原生JS实现事件绑定

最新推荐文章于 2022-09-16 11:43:58 发布

KK要继续努力

最新推荐文章于 2022-09-16 11:43:58 发布

阅读量511

点赞数

CC 4.0 BY-SA版权

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

本文链接：https://blog.youkuaiyun.com/weixin_45393020/article/details/115964717

前端专栏收录该内容

50 篇文章

订阅专栏

本文介绍了如何使用原生JavaScript实现事件绑定，包括直接在HTML标签内绑定、在JS代码中绑定以及通过事件监听方式实现。特别是事件监听方法，允许为一个对象的同一事件绑定多个函数，适用于标准浏览器和IE8及以下版本。示例代码展示了如何针对不同浏览器环境适配这两种监听方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

原生JS实现事件绑定

原生JS实现事件绑定一共有3种方法，分别为：

直接在html标签内绑定

<input type="text" onclick="alert(123)">

在js代码中绑定（这种方法只能给一个对象绑定一个函数）

obj.onclick = function(){
};

通过事件监听的方式实现事件绑定（可以给一个对象的同一个事件绑定多个函数）

//标准浏览器
obj.addEventListener("click",function(){},false)
					//事件    //函数      //是否冒泡

//IE8及其以下浏览器
obj.attachEvent("click",function(){})

var x = document.getElementById("myBtn");
if (x.addEventListener) {     // 对于所有主流浏览器，IE 8及更早版本除外
  x.addEventListener("click",function(){},false);
} else if (x.attachEvent) {   // 适用于IE 8及更早版本
  x.attachEvent("onclick",function(){});
}