码迷,mamicode.com
首页 > 编程语言 > 详细

关于JavaScript中注册和移除事件

时间:2017-05-07 23:12:13      阅读:209      评论:0      收藏:0      [点我收藏+]

标签:表示   参数   三种方式   执行   document   lis   谷歌   func   rip   

为元素注册事件的方式:3个
          1.
          对象.on+"事件类型名字"=事件处理函数(命名函数或者匿名函数)
          例子:
          document.getElementById("btn").onclick=function(){};
          document.getElementById("btn")["on"+"click"]=function(){};
          2.
          对象.addEventListener("事件类型名字",事件处理函数,false);
          第一个参数:没有on
          第三个参数:false表示的是事件冒泡,如果是true则是事件捕获
          例子:
          document.getElementById("btn").addEventListener("click",function(){},false);
          3.
          对象.attachEvent("on"+事件类型名字,事件处理函数);
          第一个参数:有on
          例子:
          document.getElementById("btn").attachEvent("onclick",function(){});
        
注册事件的兼容代码
         * function addEventListener(element,type,fn){
         *   if(element.addEventListener){
         *       element.addEventListener(type,fn,false);
         *   }else if(element.attachEvent){
         *       element.attachEvent("on"+type,fn);
         *   }else{
         *       element["on"+type]=fn;
         *   }
         * }
移除事件三种方式:
         * 1.
         * 对象.on+事件类型名=null;
         * 例子:
         * document.getElementById("btn").onclick=null;
         * 2.
         * 对象.removeEventListener("事件类型名字",fn,false);
         * 例子:
         * document.getElementById("btn").removeEventListener("click",fn,false);
         * 3.
         * 对象.detachEvent("on"+事件类型名字,fn);
         * 例子:
         * document.getElementById("btn").detachEvent("onclick",fn);
         *
         * 移除事件的兼容代码---一定要自己写
         *
注册事件和移除事件的方式的区别
         * 1.方法名不同
         * 2.参数不同
         * addEventListener:
         * 第一个参数是事件类型(事件名字),没有on
         * 第二个参数是事件处理函数
         * 第三个参数是false
         * attachEvent:
         * 第一个参数是事件类型(事件名字),有on
         * 第二个参数是事件处理函数
         * 没有第三个参数
         * 3.事件执行的时候内部的this指向不同:addEventListener中this是事件源(谁的事件触发了),attachEvent中的this是window
         * 4.一个有on,一个没有on
         * 5.兼容问题:addEventListener在谷歌和火狐中都支持,IE11也支持,IE8不支持
         * attachEvent:    IE8支持,谷歌和火狐不支持,IE11也不支持
         * 注册事件的时候可以用命名函数,也可以用匿名函数,如果是移除事件,必须用命名函数
           innerHTML=""不会把元素的事件移除.===需要注意

关于JavaScript中注册和移除事件

标签:表示   参数   三种方式   执行   document   lis   谷歌   func   rip   

原文地址:http://www.cnblogs.com/chenmeixi-1992/p/6822548.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!