button点击触发事件_JavaScript-事件的绑定和事件对象Event

最新推荐文章于 2024-05-16 04:34:53 发布

李大雷

最新推荐文章于 2024-05-16 04:34:53 发布

阅读量4.3k

点赞数

文章标签： button点击触发事件

本文链接：https://blog.csdn.net/weixin_42521949/article/details/113047486

版权

绑定事件的两种方式/DOM事件的级别

我们在之前的一篇文章《04-JavaScript/22-DOM简介和DOM操作》中已经讲过事件的概念。这里讲一下绑定（注册）事件的两种方式，我们以onclick事件为例。

DOM0的写法：onclick

element.onclick = function () {
}

举例：

<body>
<button>点我</button>
<script>
var btn = document.getElementsByTagName("button")[0];
//这种事件绑定的方式，如果绑定多个，则后面的会覆盖掉前面的
btn.onclick = function () {
console.log("事件1");
}
btn.onclick = function () {
console.log("事件2");
}
</script>
</body>

点击按钮后，上方代码的打印结果：

事件2

我们可以看到，DOM对象.事件 = 函数的这种绑定事件的方式：一个元素的一个事件只能绑定一个响应函数。如果绑定了多个响应函数，则后者会覆盖前者。

DOM2的写法：addEventListener（高版本浏览器）

element.addEventListener('click', function () {
}, false);

参数解释：

参数1：事件名的字符串(注意，没有on)
参数2：回调函数：当事件触发时，该函数会被执行
参数3：true表示捕获阶段触发，false表示冒泡阶段触发（默认）。如果不写，则默认为false。【重要】

举例：

<body>
<button>按钮</button>
<script>
var btn = document.getElementsByTagName("button")[0];
// addEventListener: 事件监听器。原事件被执行的时候，后面绑定的事件照样被执行
// 这种写法不存在响应函数被覆盖的情况。（更适合团队开发）
btn.addEventListener("click", fn1);
btn.addEventListener("click", fn2);
function fn1() {
console.log("事件1");
}
function fn2() {
console.log("事件2");
}
</script>
</body>

点击按钮后，上方代码的打印结果：

事件1
事件2

我们可以看到，addEventListener()这种绑定事件的方式：

一个元素的一个事件，可以绑定多个响应函数。不存在响应函数被覆盖的情况。执行顺序是：事件被触发时，响应函数会按照函数的绑定顺序执行。
addEventListener()中的this，是绑定事件的对象。
addEventListener()不支持 IE8 及以下的浏览器。在IE8中可以使用attachEvent来绑定事件（详见下一小段）。

DOM2的写法：attachEvent（IE8及以下版本浏览器）

element.attachEvent('onclick', function () {
});

参数解释：

参数1：事件名的字符串(注意，有on)
参数2：回调函数：当事件触发时，该函数会被执行

举例：

<body>
<button>按钮</button>
<script>
var btn = document.getElementsByTagName('button')[0];
btn.attachEvent('onclick', function() {
console.log('事件1');
});
btn.attachEvent('onclick', function() {
console.log('事件2');
});
</script>
</body>

在低版本的IE浏览器上，点击按钮后，上方代码的打印结果：

事件2
事件1

我们可以看到，attachEvent()这种绑定事件的方式：

一个元素的一个事件，可以绑定多个响应函数。不存在响应函数被覆盖的情况。注意：执行顺序是，后绑定的先执行。
attachEvent()中的this，是window

兼容性写法

上面的内容里，需要强调的是：

addEventListener()中的this，是绑定事件的对象。
attachEvent()中的this，是window。

既然这两个写法的this不同，那么，有没有一种兼容性的写法可以确保这两种绑定方式的this是相同的呢？我们可以封装一下。代码如下：

<body>

最低0.47元/天解锁文章

李大雷

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
button点击触发事件_JavaScript-事件的绑定和事件对象Event

绑定事件的两种方式/DOM事件的级别我们在之前的一篇文章《04-JavaScript/22-DOM简介和DOM操作》中已经讲过事件的概念。这里讲一下绑定（注册）事件的两种方式，我们以onclick事件为例。DOM0的写法：onclick element.onclick = function () {}举例：<body><button>点我</button>...
复制链接

扫一扫