好资源导航 » 文章资讯 » JS事件绑定的常用方式实例总结

JS事件绑定的常用方式实例总结

2023-08-28 09:34:05 70

本文实例讲述了JS事件绑定的常用方式。分享给大家供大家参考，具体如下：

常用的事件绑定的几种方式有三种：

直接在dom元素上进行绑定。
用on绑定。
用addEventListener、attachEvent绑定。

一、直接在dom元素上进行绑定

二、用on绑定

兼容性：在IE，FF，Chrome，Safari，Mozilla，Opera下都适用。

//onclick绑定
document.body.onclick=()=>{
console.log(111)
}
//解绑
document.body.onclick=null;

但是，同一个dom元素上，on只能绑定一个同类型事件，后者会覆盖前者，不同类型的事件可以绑定多个。

三、用addEventListener、attachEvent绑定

同一个dom元素上，用addEventListener、attachEvent可以绑定多个同类型事件。

但是，addEventListener事件执行顺序按照事件绑定的先后顺序执行；attachEvent事件执行顺序则是随机的。

addEventListener

//绑定
document.body.addEventListener('click',bodyClick,false);
//解绑
document.body.removeEventListener('click',bodyClick,false);

注意：removeEventListener第二个参数要和addEventListener指向同一个函数才能解绑成功。

addEventListener的第三个参数若为false，函数在冒泡阶段执行；若为true，函数在捕获阶段执行。默认为false。

box.addEventListener("click",function(){
console.log("box");
},false);
child.addEventListener("click",function(){
console.log("child");
});
//执行顺序为childbox

box.addEventListener("click",function(){
console.log("box");
},true);
child.addEventListener("click",function(){
console.log("child");
});
//执行顺序为boxchild

兼容性

Chrome和FireFox只支持addEventListener；IE只支持attachEvent（IE11开始不支持了）。

所以必须对2种方法做兼容处理。原理是先判断attachEvent是否为真，如果为真则用attachEvent绑定事件，否则用addEventListener绑定事件。

可以封装一个函数做兼容性处理：

//dom绑定事件的元素，ev事件名，fn执行函数
functionmyAddEvent(dom,ev,fn){
if(dom.attachEvent){
dom.attachEvent("on"+ev,fn);
}else{
dom.addEventListener(ev,fn,false);
}
}
myAddEvent(d1,"click",()=>{
console.log(1111)
});

另外

以上三种方式绑定的点击事件都可以用下面这条语句触发

document.getElementById("btn").click();

PS：关于javascript事件说明可参考本站javascript事件与功能说明大全：http://tools.jb51.net/table/javascript_event

更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript事件相关操作与技巧大全》、《JavaScript操作DOM技巧总结》、《JavaScript页面元素操作技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript错误与调试技巧总结》

希望本文所述对大家JavaScript程序设计有所帮助。

返回顶部
514930285
czq8825@qq.com

JS事件绑定的常用方式实例总结

热门推荐

随机推荐