事件监听

最新推荐文章于 2024-07-16 20:08:38 发布

倩lq

最新推荐文章于 2024-07-16 20:08:38 发布

阅读量291

点赞数

本文链接：https://blog.csdn.net/L666Q/article/details/103743068

版权

事件监听：给他一个对象的同一个事件绑定多个不同的函数，需要用到时间监听。

在低版本的浏览器中，每个元素和window对象都有两个方法：attach.Event方法和detachEvent方法

obj.attachEvent(事件名称,事件函数);  //事件监听 
obj.detachEvent(事件名称,事件函数);  //解除事件监听

在标准浏览器中每个支持事件的对象都可以使用addEventListener方法和removeEventListener方法

 obj.addEventListener(事件名称,事件函数,是否捕获);  //事件监听
 obj.removeEventListener(事件名称,事件函数,是否捕获); //解除事件监听

注意：是否捕获默认是false，false：冒泡，true：捕获

事件监听器的封装

<!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>Document</title>
</head>
<body>
    <script>
    function bind(obj,attr,fns){
        for(var i=0;i<fns.length;i++){
            obj.attachEvent ? obj.attachEvent("on"+attr,function (){ fns[fns.length-1-i].call(obj);}) : obj.addEventListener(attr,fns[i],false);
        }
    }
    bind(document,"click",[
        function (){
            alert(123);
        },
        function (){
            alert(456);
        },
    ])
</script>
</body>
</html>

补充：

阻止默认事件：preventDefault()方法

阻止事件冒泡：stopPropagation()方法

倩lq

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
事件监听

事件监听：给他一个对象的同一个事件绑定多个不同的函数，需要用到时间监听。在低版本的浏览器中，每个元素和window对象都有两个方法：attach.Event方法和detachEvent方法obj.attachEvent(事件名称,事件函数); //事件监听 obj.detachEvent(事件名称,事件函数); //解除事件监听在标准浏览器中每个支持事件的对象都可以使用addE...
复制链接

扫一扫