一个Dom绑定多个事件

在原生操作dom元素的时候，常常需要用到一个dom绑定多个事件，比如一个元素既要点击又要数遍移入；要同时监听到两个事件原生需要addEventlistener

直接上代码：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><title>绑定多个事件</title></head><body><button id="btn">点击显示</button>显示：<div id="box"></div></body><script>window.onload = function () {var box = document.getElementById("box");document.getElementById("btn").addEventListener("click", function () {box.innerText = "这是第一个元素";});document.getElementById("btn").addEventListener("dblclick", function () {box.innerText = "这是第二个元素";});};</script>
</html>

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

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

这个用法如下：

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

如果是JQuery库的话使用on即可：

$("#btn").on("click", function () {$("#box").text("这是第二个元素");});

一个Dom绑定多个事件相关推荐

【v-on】一个元素绑定多个事件以及一个事件绑定多个函数的两种写法
本文代码主要讲述了v-on绑定事件函数传参,一个元素绑定多个事件的两种写法,一个事件绑定多个函数的两种写法,修饰符的使用. <!DOCTYPE html> <html lang=&q ...
[js] 在DOM上同时绑定两个点击事件（一个用捕获，一个用冒泡），事件总共会执行几次，先执行哪个事件？
[js] 在DOM上同时绑定两个点击事件(一个用捕获,一个用冒泡),事件总共会执行几次,先执行哪个事件? 两次先捕获,后冒泡个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一 ...
js：按钮绑定多个事件的三种方法（js，DOM，jQuery）
1.js可以直接通过通过button的onclick添加多个函数来绑定多个事件. 2.DOM可以通过事件监听函数addEventListener绑定事件. 3.Jquery可以通过click方法来绑定 ...
jquery每次动态加载dom,绑定事件会多一次,
jquery绑定事件,每次动态加载dom,绑定的事件会加1,比如动态加载dom5次,点那个点击事件会弹出5次解决办法就是在每次绑定之前解绑定. $('.seek-footer .btn1').off ...
js如何监听元素事件是否被移除_javascript – 如果一个DOM元素被删除,它的监听器也从内存中删除？...
现代浏览器纯JavaScript 如果被删除的DOM元素是无引用的(没有指向它的引用),那么yes – 该元素本身被垃圾收集器以及与其相关联的任何事件处理器/监听器拾取. var a = docum ...
python作业.创建两个文本框，一个按钮。第 1 个文本框绑定任意键事件，敲击键盘任意可显示字符，在交互窗口中显示该字符；第 2 个文本框绑定＜a＞键事件，敲击键盘 a 字符，在交互窗口中显示 10
""" 创建两个文本框,一个按钮. 第 1 个文本框绑定任意键事件,敲击键盘任意可显示字符,在交互窗口中显示该字符: 第 2 个文本框绑定<a>键事件,敲击键 ...
创建两个文本框，一个按钮。第 1 个文本框绑定任意键事件，敲击键盘任意可显示字符，在交互窗口中显示该字符；
创建两个文本框,一个按钮.第 1 个文本框绑定任意键事件,敲击键盘任意可显示字符,在交互窗口中显示该字符:第 2 个文本框绑定键事件,敲击键盘 a 字符,在交互窗口中显示 10 个'a'字符:按钮绑定 ...
JS一个元素怎么绑定多个事件
有时候一个一个元素要绑定多个事件,其实是分开写先看这个例子,我们预期它先执行alert1,然后是alert2,但事实上是没有alert1,因为覆盖了 <!DOCTYPE html> &l ...
react中绑定点击事件_在React中绑定事件处理程序的最佳方法
react中绑定点击事件 by Charlee Li 通过李李在React中绑定事件处理程序的最佳方法 (The best way to bind event handlers in React) ...

一个Dom绑定多个事件

一个Dom绑定多个事件相关推荐

最新文章

热门文章