DOM注册事件

最新推荐文章于 2022-11-07 14:15:21 发布

FG.

最新推荐文章于 2022-11-07 14:15:21 发布

阅读量147

点赞数 2

分类专栏： Web APIs 文章标签： javascript 前端服务器

本文链接：https://blog.csdn.net/weixin_54418006/article/details/122463556

版权

Web APIs 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

1. 注册事件概述

给元素添加事件，称为注册事件或者绑定事件。
注册事件有两种方式：传统方式和方法监听注册方式
传统注册方式

利用on开头的事件onclick
<button onclick= "alert(hi~)"></button>
btn.οnclick=function() { }
特点：注册事件的唯一性
同一个元素同一个事件只能设置一个处理函数，最后注册的处理函数将会覆盖前面注册的处理函数

方法监听注册方式

w3c标准推荐方式
addEventListener() 它是一个方法
E9之前的IE不支持此方法，可使用attachEvent()代替
特点：同一个元素同一个事件可以注册多个监听器
按注册顺序依次进行

2. addEventListener 事件监听方式

eventTarget.addEventListener(type, listener[, useCapture])

eventTarget.addEventListener() 方法将指定的监听器注册到evenTarget(目标对象)上，当该对象触发指定的事件时，就会执行事件处理函数。
该方法接受三个参数：

type：事件类型字符串，比如 click、mouseover，注意这里不带on
listener：事件处理函数，事件发生时，会调用该监听函数
useCapture：可选参数，是一个布尔值，默认是false

3. attachEvent 事件监听方式

eventTarget.attachEvent(eventNameWithOn, callback)

eventTarget.attachEvent() 方法将指定的监听器注册到eventTarget(目标对象)上，当该对象触发指定的事件时，指定的回调函数就会执行。
该方法接受两个参数：

eventNameWithOn：事件类型字符串，比如 click、onmouseover，这里要带on
callback：事件处理函数，当目标触发事件时回调函数被调用

<body>
    <button>传统注册事件</button>
    <button>方法监听注册事件</button>
    <button>attachEvent</button>
    <script>
        var btns = document.querySelectorAll('button');
        //(1)传统注册事件
        btns[0].onclick = function () {
            alert('hi');
        }

        //(2)方法监听注册事件 事件类型必加引号且不带on
        btns[1].addEventListener('click', function () {
            alert(1);
        })
        btns[1].addEventListener('click', function () {
            alert(2);
        })
        //(3) attachEvent ie9以前版本支持
        btns[2].attachEvent('onclick', function () {
            alert(3);
        })
    </script>
</body>

4. 注册事件兼容性问题

function addEventListener (element, eventName, fn ) {
     //判断当前浏览器是否支持 addEventListener 方法 
     if (element.addEventListener) {
       element.addEventListener(eventName, fn);//第三个参数默认是false
     } else if (element.attachEvent) {
       element.attachEvent('on'+ eventName, fn); 
     } else {
       //相当于 element.onclick = fn;
       element =['on' + eventName]= fn;
}

兼容性处理的原则：首先照顾大多数浏览器，再处理特殊浏览器

5. 删除事件

传统注册方式
eventTarget.onclick = null;

方法监听注册方式
(1) eventTarget.removeEventListener(type, listener[, useCapture]);
(2) eventTarget.detachEvent(eventNameWithOn, callback);

<body>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <script>
        var divs = document.querySelectorAll('div');
        //1.传统方式删除事件
        divs[0].onclick = function () {
            alert(1);
            divs[0].onclick = null;
        }
        //2. removeEventListener 删除事件
        divs[1].addEventListener('click', fn)
        function fn() {
            alert(2);
            divs[1].removeEventListener('click', fn1);
        }
        //3.
        divs[2].attachEvent('onclick', fn1);
        function fn1() {
            alert(3);
            divs[2].detachEvent('onclick', fn1);
        }
    </script>
</body>

6. 删除事件兼容性问题

function removeEventListener(element, eventName, fn) {
    //判断当前浏览器是否支持 removeEventListener 方法 
    if (element.removeEventListener) {
    element.removeEvehEListener(eventName, fn);//第三个参数默认是false
    } else if (element.detachEvent){
      element.detachEvent('on' + eventName, fn);
    } else {
      element['on' + eventName] = null;
}