手写通用事件监听函数

最新推荐文章于 2022-12-21 13:54:54 发布

Qingshan_z

最新推荐文章于 2022-12-21 13:54:54 发布

阅读量209

点赞数 1

文章标签： js javascript 事件模块

本文链接：https://blog.csdn.net/Qingshan_z/article/details/119791140

版权

手写通用事件监听函数

事件代理和事件冒泡

事件代理：

事件代理（Event Delegation），又称之为事件委托。是JavaScript中常用绑定事件的常用技巧。顾名思义，“事件代理”即是把原本需要绑定在子元素的响应事件（click、keydown…）委托给父元素，让父元素担当事件监听的职务。事件代理的原理是DOM元素的事件冒泡。
事件冒泡：
当要多个子元素绑定同一事件时，可使其父元素绑定此事件，这样会从触发元素向父元素冒泡，也就是p1->div2->body,其中如果有不需要绑定事件冒泡的元素即可用

event.stopPropagation(); //阻止冒泡

普通事件绑定和事件代理绑定

HTML文件为

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>事件 演示</title>
    <style>
        div {
            border: 1px solid #ccc;
            margin: 10px 0;
            padding: 0 10px;
        }
    </style>
</head>

<body>
    <button id="btn1">一个按钮</button>

    <div id="div1">
        <p id="p1">激活</p>
        <p id="p2">取消</p>
        <p id="p3">取消</p>
        <p id="p4">取消</p>
    </div>
    <div id="div2">
        <p id="p5">取消</p>
        <p id="p6">取消</p>
    </div>

    <div id="div3">
        <a href="#">a1</a><br>
        <a href="#">a2</a><br>
        <a href="#">a3</a><br>
        <a href="#">a4</a><br>
        <button>点击增加a标签.</button>
    </div>

    <script src="./event.js"></script>
</body>

</html>

普通事件绑定：把事件绑定在这个按钮元素上

const btn1 = document.getElementById ('btn1');
bindEvent( btn1, ' click ', function( event ){//这里有三个参数！！
	event.preventDefault();//阻止默认行为
	alert(this.innerHTML);   //如果用的是箭头函数的话 这句要改成alert(btn1.innerHTML);
})

事件代理绑定：把这个事件绑定给父元素

const div = document.getElementById ('div3');
bindEvent( div3, ' click ', 'a' ,  function( event ){  //这里是四个参数！！第三参数为css选择器，选择的所有a标签
   event.preventDefault();//阻止默认行为  阻止链接点击打开链接的默认行为，去触发绑定的事件
   alert(this.innerHTML);   //如果用的是箭头函数的话 这句要改成alert(event.target.innerHTML);
})

通用的事件监听函数

// 通用的事件绑定函数
// function bindEvent(elem, type, fn) {
//     elem.addEventListener(type, fn)
// }
function bindEvent(elem, type, selector, fn) {
    if (fn == null) {//判断有几个参数，如果fn等于空 就有三个参数，说明是普通绑定  
        fn = selector
        selector = null  //普通绑定没有selector赋值为空
    }
    elem.addEventListener(type, event => {
        const target = event.target //获取目标元素
        if (selector) {
            // 代理绑定
            if (target.matches(selector)) { 
                fn.call(target, event)
            }
        } else {
            // 普通绑定
            fn.call(target, event)
        }
    })
}

Qingshan_z

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
2
评论
手写通用事件监听函数

手写通用事件监听函数事件代理和事件冒泡普通事件绑定和事件代理绑定通用的事件监听函数事件代理和事件冒泡事件代理：事件代理（Event Delegation），又称之为事件委托。是JavaScript中常用绑定事件的常用技巧。顾名思义，“事件代理”即是把原本需要绑定在子元素的响应事件（click、keydown…）委托给父元素，让父元素担当事件监听的职务。事件代理的原理是DOM元素的事件冒泡。事件冒泡：当要多个子元素绑定同一事件时，可使其父元素绑定此事件，这样会从触发元素向父元素冒泡，也就是p
复制链接

扫一扫