关于监听

295 阅读4分钟

1、事件的概念: JavaScript使我们有能力创建动态页面,网页中的每一个元素都可以产生某些触发JavaScript函数的事件。我们可以认为事件是可以被JavaScript侦测到的一种行为。   2、事件流: 事件流主要分为冒泡型事件和捕获型事件。IE浏览器目前只支持冒泡型事件,而支持标准DOM的浏览器比如火狐、Chrome等两者都支持。

   3、使用返回值改变HTML元素的默认行为:   HTML元素大都包含了自己的默认行为,例如:超链接、提交按钮等。我们可以通过在绑定事件中加上"return false"来阻止它的默认行为。   4、通用性的事件监听方法:   (1)绑定HTML元素属性:        (2)绑定DOM对象属性:     document.getElementById("xxx").onclick=test; 01 通用监听 5、不常用的事件监听:   5.1  IE中的监听方法:     5.1.1  [object].attachEvent("事件类型","处理函数");//添加监听        5.1.2  [object].detachEvent("事件类型","处理函数");//取消监听 02 IE中的监听   5.2  标准DOM中的事件监听方法:     5.2.1  [object].addEventListener ("事件类型","处理函数","冒泡事件或捕获事件true/false");     5.2.2  [object]. removeEventListener ("事件类型","处理函数","冒泡事件或捕获事件true/false");     03 标准DOM事件监听     提示:IE监听方法中事件类型和标准DOM监听方法中的事件类型写法有点不同, 前者事件类型用“on”开头,如:“onclick”、“onmousemove”等, 而后者不需要“on”,直接写事件,如:“click”、“mousemove”等。

  6、标准事件流:   6.1  举个例子:冒泡事件(从内至外) 04 冒泡事件

运行结果是

  6.2  冒泡事件和捕获事件的比较(从外向内) 05 冒泡事件和事件捕获    运行结果:

  倘若把addEventListener中的true改为false,那么运行结果为:   

 7、访问事件对象:     事件对象封装了事件发生的详细信息,尤其是鼠标、键盘事件。如鼠标事件发生的位置、键盘事件的键盘键等。

  7.1  IE中的事件对象:       IE中的事件对象是一个隐式可用的全局对象:event,它是window对象的一个属性。

  7.2  标准DOM的事件对象:       在标准DOM浏览器检测发生了某个事件时,将自动创建一个Event对象,并隐式地将该对象作为事件处理函数的第一个参数传入

      //IE中得到事件对象       op.onclick=function(){           var oEvent=window.event;       }

      //标准DOM中得到事件对象       op.onclick=function(oEvent){           //作为参数传进来       }

      经验之谈:为了兼容不同的浏览器,通常采用下面的方法得到事件对象。       op.onclick=function(oEvent){           if(window.event){               oEvent=window.event; ….           }       } 06 事件兼容性写法   Event事件对象常用的属性:

8、常用的事件类型:   8.1  常用的鼠标事件:

07常用鼠标事件

  8.2  常用的键盘事件:

08常用键盘事件 8.3  HTML事件:

09常用HTML事件

附: A.事件监听/取消监听 Mozilla/Chrome中: addEventListener的使用方式: DOMOBJ.addEventListener(事件, 接口/函数, true/false); DOMOBJ: 文档节点、document、window 或 XMLHttpRequest。 type:事件名称,不含“on”,比如“click”、“mouseover”、“keydown”等。 listener :实现了 EventListener 接口或者是 JavaScript 中的函数。 useCapture :是否使用捕捉,一般用 false 。例如:document.getElementById("testText").addEventListener("keydown", function (event) { alert(event.keyCode); }, false);

IE中:

target.attachEvent(type, listener); target: 文档节点、document、window 或 XMLHttpRequest。 type: 字符串,事件名称,含“on”,比如“onclick”、“onmouseover”、“onkeydown”等。 listener :实现了 EventListener 接口或者是 JavaScript 中的函数。 例如:document.getElementById("txt").attachEvent("onclick",function(event){alert(event.keyCode);});

移除设定的事件 W3C格式: removeEventListener(event,function,capture/bubble); Windows IE的格式如下: detachEvent(event,function);

attachEvent方法 attachEvent用法: attachEvent(事件类型, 处理函数);---针对IE addEventListener(事件类型, 处理函数, 使用捕获);---针对FireFox

var theBtn = document.getElementById("theBtn"); //取得ID为theBtn的按钮 theBtn.attachEvent("onclick", buttonClicked); //给按钮增加事件 function buttonClicked (e){ alert("点击了一下"); } //定义函数

B.阻止冒泡 js事件冒泡、阻止事件冒泡以及阻止默认行为 事件冒泡 当事件发生后,这个事件就要开始传播(从里到外或者从外向里)。为什么要传播呢?因为事件源本身(可能)并没有处理事件的能力,即处理事件的函数(方法)并未绑定在该事件源上。例如我们点击一个按钮时,就会产生一个click事件,但这个按钮本身可能不能处理这个事件,事件必须从这个按钮传播出去,从而到达能够处理这个事件的代码中(例如我们给按钮的onclick属性赋一个函数的名字,就是让这个函数去处理该按钮的click事件),或者按钮的父级绑定有事件函数,当该点击事件发生在按钮上,按钮本身并无处理事件函数,则传播到父级去处理。 什么是事件冒泡


主题列表:juejin, github, smartblue, cyanosis, channing-cyan, fancy, hydrogen, condensed-night-purple, greenwillow, v-green, vue-pro, healer-readable

贡献主题:github.com/xitu/juejin…

theme: juejin highlight: