day-14.4 监听事件

监听事件：

当有一个元素已经有一个事件的前提下，要再添加一个同样的事件的时候，

可以用监听事件，也就是说监听事件的意思就是：监听一个事件执行，执行的时候做相应的动作；这里的监听并不仅限于添加了事件函数的元素对象，就算没有添加事件函数的元素对象，触发事件时还是会被监听到；

比如：

 1 <body>
 2         <div id="wrap"></div>
 3         
 4         <script>
 5             var oWrap = document.getElementById("wrap"); //并没有对oWrap对象设定事件函数，但是当点击事件发生时，监听事件还是会触发，并输出1,2，由此可以看出，点击事件的触发机制是DOM内核实现的，跟是否设定点击的事件函数没有关系；
 6                 oWrap.addEventListener( "mouseup", function (){
 7                     console.log(1);
 8                 });
 9                 oWrap.addEventListener ("click",function () {
10                     console.log(2);
11                 });
12         </script>
13 </body>

DOM 0级事件：

最原始的事件，类似于onclick,onmuseup 等，这类事件时DOM最早期的，最原始的元素事件，

这类事件的优点：兼容所有浏览器，缺点：一个对象只能绑定一个同一类型的原始事件。比如一个元素对象如果绑定了onclick了，就不能再绑定一个onclick，因为这类事件的函数类似于变量赋值；

比如：

1 oWrap.onclick = function (){
2     console.log(1);
3 };
4 oWrap.onclick = function (){ //定义的过程，第二次定义赋值覆盖了顶一次，所以当事件触发执行函数时，只会执行第二个；
5     console.log(2);
6 };

DOM 2级事件（没有1级）；

基于函数执行变大形式的监听事件，比如addEventListener()，他其实是DOM已经写好了的函数了，你调用执行就可以了，他监听的是元素的事件是否触发，跟是否绑定事件函数没有关系；

优点：他可以对一个元素对象同时实行多个监听；

缺点：IE8及以下不支持；

1 oWrap.addEventListener ("mouseup",function () { //第一个参数为事件名，跟原始事件的事件名一致，但是不带on，第二个参数为触发的函数；
2                     console.log(2);
3                 });

 

移除事件监听：removeEventListener（"事件名"，“函数名”）；

移除事件监听函数里的函数名可以不写，这样就会移除这个对象的所有该事件的监听，但是当你如果只想移除某一个监听时，就必须要写，这就要求我们在设定事件监听的时候，函数尽量别使用匿名函数，这样方便后续针对性的监听移除；

1 oWrap.addEventListener("click",fn);
2                 function fn() {
3                     console.log(3);
4                 }
5 oWrap.removeEventListener("click",fn); //移除fn

IE浏览器8及以下兼容写法；

1 oWrap.attachEvent("onclick",function () { 
2                     console.log(1);
3                 })
4 oWrap.attachEvent("onclick",function () {  //会输出2,1,先绑定的后执行，事件需要带on
5                     console.log(2);
6                 })

IE浏览器8及以下移除的兼容写法；

1 oWrap.attachEvent("onclick",fn);
2 function fn () { 
3                     console.log(1);
4                }
5 oWrap.detachEvent("onclick","fn");//跟removeListener一样，不要写匿名函数；

事件捕获，

跟冒泡类似，捕获是由子元素到父元素，由父元素捕获了再提交显示；冒泡是父元素的事件冒上来，由子元素接收了再提交显示；

 1     <script>
 2         var oBox = document.getElementById("box");
 3         /*
 4             addEventListener的boolean值：
 5                false   冒泡
 6                true    捕获
 7             事件捕获：从父级到子级往下捕获的事件叫捕获事件
 8             ie不支持事件捕获
 9          */
10         oBox.addEventListener("click",fn,true);
11         document.addEventListener("click",fn,true);
12 
13         function fn() {
14             console.log(this);
15         }
16     </script>

 重复绑定

 1         var aDiv = document.getElementsByTagName("div"),
 2             value = 0;
 3         aDiv[0].addEventListener("click",function () {
 4             value += 4;
 5             aDiv[1].addEventListener("click",function () {
 6                 value += 3;
 7 
 8                 aDiv[2].addEventListener("click",function () {
 9                     value += 2;
10                     console.log(value);
11                 });
12                 console.log(value);
13             });
14             console.log(value);
15         });

 

posted @ 2018-06-27 11:36  bibiguo  阅读(125)  评论(0)    收藏  举报