JS一个元素怎么绑定多个事件

有时候一个一个元素要绑定多个事件，其实是分开写

先看这个例子，我们预期它先执行alert1，然后是alert2，但事实上是没有alert1，因为覆盖了

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>绑定多个事件</title><script>window.onload = function(){document.getElementById('btn').onclick = function () {alert(1);};document.getElementById('btn').onclick = function () {alert(2);};}</script>
</head>
<body><button id="btn">点我</button>
</body>
</html>

只需要使用addEventListener方法即可解决这个问题：

  <script>window.onload = function(){document.getElementById('btn').addEventListener('click', function(){alert(1);}, false);document.getElementById('btn').addEventListener('click', function(){alert(2);}, false);}</script>

其中addEventListener的参数值得说一下，第一个参数是事件名称，没有on，第二个是回调函数，其实是浏览器调用的，第三个是是否捕获阶段触发，一般设置为false，还有就是这个方法是先绑定的先执行

另外，经过测试，发现这个addEventListener在IE8及一下版本不支持，可以使用attachEvent方法开替代，当然，是兼容处理

这个用法如下：

元素.attachEvent( 'onclick', function(){...} );

这个方法是先绑定的后执行，当然，如果你这么介意顺序，就没必要分开绑定了

JS一个元素怎么绑定多个事件相关推荐

php如何给单选框加js事件,js给元素添加绑定事件
yizer 2016-08-05 22:26 Bing search 你好 // getElementById,通过id获取元素 var getDom = function (id){ return ...
js如何让一个元素触发click点击事件
很简单,就一行代码.如下: <div id="div"></div> let div = document.getElementById("div ...
jquery一个控件绑定多个事件
jQuery("#id").bind("click mouseover",function(){}) // 两个事件中间有空格 $("p" ...
js进入页面后自动触发点击事件
// 进入页面立即触发(()=>{// 兼容IEif(document.all) {document.getElementById("绑定的id").click();}// ...
Web——KnockOut 绑定语法之事件
7 click 绑定目的 click绑定在DOM元素上添加事件句柄以便元素被点击的时候执行定义的JavaScript 函数.大部分是用在button,input和连接a上,但是可以在任意元素上使 ...
[jQuery]JQuery一个对象可以同时绑定多个事件，这是如何实现的？
JQuery一个对象可以同时绑定多个事件,这是如何实现的? ①$(document).ready(function() {$("button").bind({click: func ...
【v-on】一个元素绑定多个事件以及一个事件绑定多个函数的两种写法
本文代码主要讲述了v-on绑定事件函数传参,一个元素绑定多个事件的两种写法,一个事件绑定多个函数的两种写法,修饰符的使用. <!DOCTYPE html> <html lang=&q ...
js基础总结——js 获取元素节点、js 绑定onclick事件、js 获取属性修改属性值、js 获取子元素、js 改变css样式
参考书籍:<JavaScript DOM编程艺术第2版> 本博客代码的测试页面是:https://www.layui.com/ js dom操作 js 获取元素节点一份document ...
js动态添加html元素绑定事件,JS实现动态添加DOM节点和事件的方法示例
本文实例讲述了JS实现动态添加DOM节点和事件的方法.分享给大家供大家参考,具体如下: 运行效果图如下: 完整实例代码如下: /p> "http://www.w3.org/TR/xht ...

JS一个元素怎么绑定多个事件

JS一个元素怎么绑定多个事件相关推荐

最新文章

热门文章