4.dom高级事件笔记总结

最新推荐文章于 2023-12-04 17:23:29 发布

菜鸟小黄

最新推荐文章于 2023-12-04 17:23:29 发布

阅读量140

点赞数

分类专栏：前端文章标签： js dom

本文链接：https://blog.csdn.net/weixin_43324141/article/details/105567905

版权

前端专栏收录该内容

16 篇文章 1 订阅

订阅专栏

注册事件：

两种方式

传统注册： 1.<button onclick= "alert('hi')"></button> 2.btn.onclick = function(){}

监听注册的方式

IE9以上：注册对象.addEventListener（type,Listener [, useCapture]）
在这里插入图片描述

eventTarget.addEventListener()方法将指定的监听器注册到 eventTarget（目标对象）上，当该对象触发指定的事件时，就会执行事件处理函数。
在这里插入图片描述

IE9以下：attacheEvent（）IE678支持
在这里插入图片描述

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

在这里插入图片描述

事件监听兼容性解决方案：

封装一个函数，函数中判断浏览器的类型：
在这里插入图片描述

删除事件（解绑事件）

在这里插入图片描述

删除事件兼容性解决方案：

在这里插入图片描述

    <div>1</div>
    <div>2</div>
    <div>3</div>
    <script>
        var divs = document.querySelectorAll('div');
        divs[0].onclick = function() {
            alert(11);
            // 1. 传统方式删除事件
            divs[0].onclick = null;
        }
        // 2. removeEventListener 删除事件
        divs[1].addEventListener('click', fn) // 里面的fn 不需要调用加小括号
        function fn() {
            alert(22);
            divs[1].removeEventListener('click', fn);
        }
        // 3. detachEvent
        divs[2].attachEvent('onclick', fn1);

        function fn1() {
            alert(33);
            divs[2].detachEvent('onclick', fn1);
        }
    </script>