同一个按钮绑定多个事件_JavaScript绑定/解绑事件兼容代码

最新推荐文章于 2023-10-24 17:24:42 发布
最新推荐文章于 2023-10-24 17:24:42 发布
阅读量802 收藏 1
点赞数
文章标签： 同一个按钮绑定多个事件

26f979c9613b7c8041b9f518fed8c181.png

建议用电脑看比较舒服一点。

为元素绑定事件(DOM)除了用对象.οnclick=fn这类的方式（这种方式无法绑定多个事件，如果写了多个事件则会发生覆盖），还有：

1 对象.addEventListener("事件类型",事件处理函数,false)

--谷歌、火狐和IE9、10、11支持,IE8不支持

2 对象.attachEvent("有on的事件类型",事件处理函数)

--谷歌不支持,火狐不支持,IE8支持，但是IE11不支持

addEventListener

//my$函数封装了getElementById

attachEvent

//参数1:事件类型---事件名字，有on

两者的区别

总结绑定事件的区别:addEventListener()和attachEvent()

  • 相同点: 都可以为元素绑定事件
  • 不同点:
  • 1.方法名不一样
  • 2.参数个数不一样addEventListener三个参数,attachEvent两个参数
  • 3.addEventListener 谷歌,火狐,IE11支持,IE8不支持；attachEvent 谷歌火狐不支持,IE11不支持,IE8支持
  • 4.this不同,addEventListener 中的this是当前绑定事件的对象，attachEvent中的this是window
  • 5.addEventListener中事件的类型(事件的名字)没有on；attachEvent中的事件的类型(事件的名字)有on

绑定/解绑兼容性代码

5f8dd6ce65e5700ec3df4d64ff949c6d.gif 
<!DOCTYPE html>

JavaScript部分：

<
weixin_39569076
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
js实现同一个页面,多个enter事件绑定的示例
10-17
今天小编就为大家分享一篇js实现同一个页面,多个enter事件绑定的示例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
同一个按钮想绑定多个事件的方法
m0_52946104的博客
09-21 1661
ie8 以下，和ie8 以上，this 分别指向window和当前调用对象的问题
javascript实现一个按钮绑定多个事件
m0_71912711的博客
03-30 2190
javascript实现一个按钮绑定多个事件，实现点击一个按钮实现多个隐藏文字的同时出现和隐藏通过两种方法实现一个按钮绑定多个事件，实现点击一个按钮实现多个隐藏文字的同时出现和隐藏。
JS 为按钮绑定多个点击事件（兼容性代码）
夏沐的博客
01-22 1万+
为元素绑定事件(DOM):一种,但是不兼容,有两种     1 对象.addEventListener("事件类型",事件处理函数,false);--谷歌和火狐支持,IE8不支持     2 对象.attachEvent("有on的事件类型",事件处理函数)--谷歌不支持,火狐不支持,IE8支持 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &l...
一个按钮执行多个事件
Fatty-Web前端心得分享
12-26 1060
//一个按钮执行多个事件 $(function(){     $("button").on("click",hide_fun); }); //方法切换 show_hide(show_fun,hide_fun); // @show_f 解除绑定事件 // @hide_f 绑定当前事件 function show_hide(show_f,hide_f){ $("button").off("click",show_f); $("button").on("click",hide_
jQuery事件多次绑定与解绑问题实例分析
10-17
当一个元素的同一个事件被多次绑定时，执行的效果是这些绑定的事件处理函数会依次按绑定的顺序执行。例如： ```html ()" /> ``` ```javascript $(document).ready(function () { $("#btnAdd").click(function () ...
jquery事件绑定解绑机制源码解析
10-21
在内部，`on`方法会创建一个事件数据对象，包含事件类型、原始事件类型、数据、处理函数、全局唯一标识符（guid）以及选择器等信息，并将其存储在元素的缓存中。缓存是以元素的JQuery实例ID为键，事件类型为键值的...
javascript 处理事件绑定的一些兼容写法
12-09
2. **另一个事件绑定实现**： ```javascript var addEvent = (function() { if (document.addEventListener) { return function(el, type, fn) { el.addEventListener(type, fn, false); }; } else { return...
javascript实现简单的on事件绑定
10-21
这种方法可以减少事件处理器的数量，提高性能，因为只需要在一个父元素上设置一个事件监听器，而不是每个子元素都设置。 在实际应用中，事件绑定和解绑是JavaScript编程中常见的操作。理解如何自定义这些功能对于...
JQuery给元素绑定click事件多次执行的解决方法
10-25
然后，`click`方法重新绑定新的事件处理函数，这样即使代码被多次调用，也只会有一个事件处理函数存在，避免了多次执行的问题。 然而，`unbind`方法会完全移除指定类型的事件，如果你有多个功能不同的`click`事件...
button多个事件处理
hakunamatata2008的专栏
07-08 704
有时候需要一个button按钮，点击跳到别的页面，又不想多写js代码，如下代码可以实现：1.如果让本页转向新的页面则用：button onclick="window.location.href(连接)"> 2.如果需要打开一个新的页面进行转向，则用：button onclick="window.open(连接)">button value=刷新 onclick="window.
按钮不同方式绑定事件this指向
xiaokanfuchen86的博客
03-08 443
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script> </script> <style type="text/css"&g...
LayerUI中按钮点击一次，触发了两次事件
最新发布
qq_22744093的博客
10-24 576
莫名其妙，看到代码中引用了两次LayUI,去掉重复的应用就可以解决问题。点击一次，触发了两次事件。
前端学习day15-DOM：事件流，阻止冒泡事件流，事件的代理，事件绑定的方式，多个按钮绑定同一个事件，鼠标和键盘的事件类型
qq_45926448的博客
07-02 453
事件流，阻止冒泡事件流，事件的代理，事件绑定的方式，多个按钮绑定同一个事件，鼠标和键盘的事件类型
js：按钮绑定多个事件的三种方法（js，DOM，jQuery）
qq_52824207的博客
04-27 7384
1.js可以直接通过通过button的onclick添加多个函数来绑定多个事件。 2.DOM可以通过事件监听函数addEventListener绑定事件。 3.Jquery可以通过click方法来绑定事件。 完整代码： <!DOCTYPE html> <html lang="en"> <head> <title>按钮绑定多个事件</title> <meta charset="utf-8"&gt
js给一个对象的同一个事件绑定多个不同的函数（一个按钮点击两次得到不同结果）
林中明月间丶
05-11 6390
&lt;script type="text/javascript"&gt; //给一个对象绑定一个事件处理函数的第一种形式 //document.onclick = fn1; function fn1(){ alert(1); } function fn2(){ alert(2); } //给一个元素绑定事件函数的第二种形式： //给一个对象的同一个事件绑定多个不同的函数:...
如何用原生js给一个按钮绑定两个onclick事件？
热门推荐
修炼中的小妖怪
12-29 2万+
Var btn=document.getElementById(‘btn’); //事件监听 绑定多个事件 var btn4 = document.getElementById(“btn4”); btn4.addEventListener(“click”,hello1); btn4.addEventListener(“click”,hello2); function hello1(){ aler...
如何利用一个按钮绑定两个事件
jrrfgj的博客
11-14 8304
如何利用一个按钮绑定两个事件
探索JavaScript事件机制：绑定方式与三要素详解
1. **事件源**：即触发事件的HTML元素，比如一个按钮、文本框或窗口。它是事件的出发点。 2. **事件类型**：指定了具体的交互动作，如`click`、`load`、`unload`等，每个事件类型对应不同的用户交互或页面状态变化。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值