首页 > 编程语言 > 详细

JavaScript事件监听详解

时间:2020-04-08 01:38:09      阅读:68      评论:0      收藏:0      [点我收藏+]

JavaScript事件监听详解

JavaScript事件的监听首先要了解以下原则:

  1. 侦听事件函数不能带入任何参数

  2. 侦听事件函数有且仅有一个参数e就是事件接收到事件对象,其他函数没有

  3. 事件函数不能写return 返回值,但是可以用return跳出

语法

添加事件

element.addEventListener(‘事件名’,事件函数名,事件冒泡/捕获);

移除事件

element.removeEventListener(‘事件名’,事件函数名,事件冒泡/捕获);

当浏览器为ie8及以下,则应分别为:

element.attachEvent(‘on开头的事件名’,事件函数名);
element.detachEvent(‘on开头的事件名’,事件函数名);

 案例

 var num=0;
        var bn=document.querySelector("button");
        bn.addEventListener("click",clickHandler1);
        bn.addEventListener("click",clickHandler2);
        bn.addEventListener("mousemove",clickHandler2);

        function clickHandler1(e){
            num++;
            console.log("aaa");
            if(num>1){
                // this是事件侦听的对象
                // e.currentTarget.removeEventListener("click",clickHandler1);
                this.removeEventListener("click",clickHandler1);
            }
        }

        function clickHandler2(e){
            // console.log("bbb");
            console.log(e.type)
        } 

需要注意的是:

当元素的事件不再使用时,必须删除,否则会造成内存堆积,侦听事件都会被存储在堆中; 当元素被删除了,也必须删除该元素的所有事件。
 

P.S

DOM0级:

? 一个标签的同一事件只能绑定一个事件函数

? 事件可以直接添加在行内

? 各大浏览器都支持,不存在兼容性问题

DOM2级

? 一个标签的同一事件可以绑定多个事件函数

? 绑定的事件函数必须有名字,否则无法删除

? 存在兼容性问题,IE8及之前版本写法和标准浏览器的写法不一样

JavaScript事件监听详解

原文:https://www.cnblogs.com/tokkipopo/p/12657311.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!