JavaScript事件监听详解

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及之前版本写法和标准浏览器的写法不一样