addEventListener&onclick

最新推荐文章于 2024-04-05 19:25:27 发布
最新推荐文章于 2024-04-05 19:25:27 发布
阅读量175 收藏
点赞数 1
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/s1124yy/article/details/79432128
版权 
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>

<body>
  <ul id="color-list">
    <li id="addEvent">red</li>
    <li id="on_click">yellow</li>
  </ul>
  <script type="text/javascript">
    (function() {

      addEvent.addEventListener("click", function() {
        alert("我是addEvent1");
      }, false);
      addEvent.addEventListener("click", function() {
        alert("我是addEvent2");
      }, false);

      on_click.onclick = function() {
        alert("我是click1");
      }
      on_click.onclick = function() {
        alert("我是click2");
      }
      //如果id可以直接选择器的话，为什么这么写会错？
      color-list.style.color = 'blue';
      console.log(on_click)
    })();

  </script>
</body>

</html>

这两者的区别：
onclick只弹出一次：我是click2【第一次click事件会被第二次所覆盖】
addEventListener却可以先后运行，弹出两次，不会被覆盖。

不懂：
on_click和addEvent应该是未定义啊，为什么可以正确运行？
在sf上已解决：https://segmentfault.com/q/1010000013509289?utm_source=index-hottest

s1124yy
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
事件绑定之小测试 onclick && addEventListener
09-05
昨晚回去后，和雷子讨论如何才能“检测”到页面上某个元素都绑定了哪些事件监听函数，第一感觉就是应该从浏览器入手，比如FF，或者Chrome等
onclick和addEventListener 的区别
wlijun_0808的博客
11-27 203
onclick和addEventListener 的区别
使用addEventListener方法，监听按钮点击并弹窗
长风破浪会有时的博客
03-14 1149
使用addEventListener方法，监听按钮点击并弹窗
addEventListener与onclick
qq_43320218的博客
08-14 927
<ul id="test"> <li>a1</li> <li>a2</li> <li>a3</li> </ul> <a href="https://baidu.com" id='aa'>百度</a> <script> // 事件冒泡机制，点击li会弹出对应的li的内容 do.
JavaScript----addEventListener与onclick
maidu_xbd的博客
09-25 267
onclick: onclick 添加事件不能绑定多个事件，后面绑定的会覆盖前面的。 执行以下代码，点击按钮弹出“onclick3” <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" conten...
addEventListener() 和 onclick 的区别
最新发布
2301_79111443的博客
04-05 1127
我们经常会看到有关。
JS中onclick与addEventListener的区别详解
01-08
在JavaScript中，`onclick`和`addEventListener`是两种常见的用于为HTML元素添加点击事件处理程序的方法，它们在处理事件上有着显著的区别。 1. `onclick`属性： - 使用方式：`element.onclick = function () {}` ...
addEventListener 的用法示例介绍
09-04
`addEventListener` 是JavaScript中用于添加事件监听器的方法，它允许我们为同一个元素绑定多个事件处理函数，这对于构建复杂的交互式网页非常有用。在不同的浏览器环境中，`addEventListener` 的使用略有差异，尤其...
事件绑定之小测试 onclick addEventListener
01-21
开发工具中应该有相应的功能，于是测试之: 前提：只是一个简单的小测试，而且 addEventListener 属于标准绑定函数，IE 中与此不兼容（IE 相应的是 attachEvent），所以此次测试先抛弃 IE，使用 Firefox 5.0.1, ...
动态的绑定事件addEventListener方法的使用
09-04
然后，我们在`<body>`标签内使用`addEventListener`方法将`test`函数动态地绑定到ID为`but1`的按钮的`onclick`事件上。这意味着当用户点击这个按钮时，`test`函数会被调用。 ```html function test() { window....
onclick 和 addEventListener的区别
qq_42880714的博客
08-08 1710
onclick 和 addEventListener的区别
addEventListener与onclick的区别
qq_44473483的博客
06-30 7136
在js中一直使用的addEventListener，依稀记得是看视频时老师说的这个好些，但也一直不明白两者之间的优缺点和联系，今天整理了下，对两者进行简单分析。 1.addEventListener可以对同一个元素绑定多个事件，执行顺序从上到下依次执行。而onclick同一个元素只能绑定一个事件，如有多个，后面的事件会覆盖前面的事件。 document.getElementById("myDIV").addEventListener("click", function() { alert(1) });
js:addEventListener与onclick同时使用
彭世瑜的博客
09-16 1418
js:addEventListener与onclick同时使用。赋值，后一次的值把前一次的覆盖了。"点击了button1""点击了button2""点击了button3""点击了button4"并没有输出，原因是两次。点击了button3。
26、addEventListener()和onClick()的区别
y_xiuzhu的博客
03-18 823
26.1 结论 onclick事件在同一时间只能指向唯一对象 addEventListener给一个事件注册多个listener addEventListener对任何DOM都是有效的，而onclick仅限于HTML addEventListener可以控制listener的触发阶段，（捕获/冒泡）。对于多个相同的事件处理器，不会重复触发，不需要手动使用removeEventListener清除 IE9使用attachEvent和detachEvent 26.3 实例 addEventListener
前端事件处理addEventListener和onclick
企鹅菜鸟的成长过程
03-16 6134
先留下坑，慢慢填 1.什么是事件处理？ DOM 事件类型是分为 UIEvent、UIEvent:KeyEvent、UIEvent:MouseEvent 2.addEventListener addEventListener() 方法用于向指定元素添加事件句柄,使用 removeEventListener()方法来移除 addEventListener() 方法添加的事件句柄。在
onclick与addEventListener区别
热门推荐
Cassie's blog
01-26 1万+
这次做项目遇到了这个问题，本来习惯性的每次都写的是addEventListener绑定click事件。但是当用addEventListener绑定了多次click事件的时候，引发了我的思考，这两者有区别吗？具体的事件分析可查看另一篇文章 结论： 1.onclick事件在同一时间只能指向唯一对象 2.addEventListener给一个事件注册多个listener 3.addEventLi...
js监听事件 (addEventListener()) 和普通事件( onclick() )的区别
weixin_40016215的博客
04-13 2510
研究事件冒泡时，发现一个问题，某些情况下，addEventListener() 要做的事，onclick也能做 引发了我一个思考，这两个有什么区别？ 区别： 1.onclick事件在同一时间只能指向唯一对象 2.addEventListener给一个事件注册多个listener 3.addEventListener对任何DOM都是有效的，而onclick仅限于HTML（这里的html指的是html4的标签） 4.addEventListener可以控制listener的触发阶段，（捕获/冒泡）。对于多个.
addEvent()和addEventlistner()的区别
shueiyuan1983的专栏
10-09 1万+
//绑定事件 function addEvent(el,name,fn){     if(el.addEventListener) return el.addEventListener(name,fn,false);//在火狐中会执行这一句   return el.attachEvent('on'+name,fn);//在ie中执行这一句  } attachEvent方法
on事件和addevent事件的区别
zm_miner的博客
02-09 6807
on事件 function fn1(){alert(1)}; function fn2(){alert(2)}; document.onclick=fn1(); document.onclick=fn2(); 只会弹出2 - 使用on事件，给标签加多个事件的时候后面的会覆盖前面的。 function fn1(){alert(1)}; function fn2(){aler...
addeventlistener和onclick
03-16
addEventListener() 是 JavaScript 中的一个方法，用于向指定的元素添加事件处理程序。它可以添加多个事件处理程序，而不会覆盖已有的事件处理程序。 onclick 是 HTML 中的一个属性，用于指定元素被点击时所执行的 ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值