通用的事件侦听器函数

最新推荐文章于 2023-08-29 03:00:00 发布

小蟹蟹蟹蟹

最新推荐文章于 2023-08-29 03:00:00 发布

阅读量436

点赞数

分类专栏：杂文技巧

本文链接：https://blog.csdn.net/qq_37683424/article/details/104149522

版权

杂文同时被 2 个专栏收录

22 篇文章 0 订阅

订阅专栏

技巧

18 篇文章 0 订阅

订阅专栏

1.事件侦听示例

//根据情况分别获取DOM或者IE中的事件对象，事件目标，阻止事件的默认行为
getEvent: function(event) {
return event ? event: window.event;
},
getTarget: function(event) {
return event.target || event.srcElement;
},
preventDefault: function(event) {
if(event.preventDefault) {
event.preventDefault();
} else {
event.returnValue = false;
}
}

//根据情况分别使用dom2 || IE || dom0方式来删除事件
removeHandler: function(element,type,handler){
if(element.removeHandler) {
element.removeEventListener(type,handler,false);
} else if(element.detachEvent) {
element.detachEvent("on" + type,handler);
} else {
element["on" + type] = null;
}
}

//根据情况分别取消DOM或者IE中事件冒泡
stopPropagation: function(event) {
if (event.stopPropagation) {
event.stopPropagation();
} else {
event.cancelBubble = true;
}
}
}

var btn = document.getElementById("myBtn"),
handler = function () {
alert("Clicked");
};

EventUtil.addHandler(btn,"click",handler);
EventUtil.removeHandler(btn,"click",handler);

2.在js中，常用到element.addEventListener()来进行事件的监听。但是当页面中存在大量需要绑定事件的元素时，这种方式可能会带来性能影响。此时，我们可以用事件委托的方式来进行事件的监听。

每个事件都经历三个阶段

捕获
到达目标
冒泡

事件委托需要用到事件的冒泡，冒泡就是事件发生时，上层会一层一层的接收这个事件。

如下页面结构：

<body>
   <div id="div1">
        <div id="div2">
            <button>按钮</button>
        </div>
   </div>
</body>

当点击按钮，首先button接收到事件，然后向上层冒泡，接着id="div1"接收到事件，接着是id="div2"，一直到达document的顶层。

所以可以添加一个事件处理器到父级，由他接收所有子节点的事件信息，这就是事件委托

小蟹蟹蟹蟹

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
通用的事件侦听器函数

1.事件侦听示例var EventUtil = { //根据情况分别使用dom2 || IE || dom0方式来添加事件 addHandler: function(element,type,handler) { if(element.addEventListener) { element.addEventListener(typ...
复制链接

扫一扫