事件绑定和普通事件

偏执的太偏执、 2022-06-03 06:08 348阅读 0赞 
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.     <style>
  7.         #d1{
  8.             width: 50px;
  9.             height: 50px;
  10.             background: red;
  11.             margin-bottom: 20px;
  12.         }
  13.         #d2{
  14.             width: 50px;
  15.             height: 50px;
  16.             background: green;
  17.         }
  18.     </style>
  19. </head>
  20. <body>
  21.     <div id="d1"></div>
  22.     <div id="d2"></div>
  23.     <script>
  24.         d1.οnclick=function(){
  25.             console.log("1");
  26.         }
  27.         d1.οnclick=function(){
  28.             console.log("2");
  29.         }
  30.         //只输出2
  32.         d2.addEventListener("click",function(){
  33.             console.log("d2_1");
  34.         },false);
  35.         d2.addEventListener("click",function(){
  36.             console.log("d2_2");
  37.         },false);
  38.         //输出d2_1、d2_2
  39.     </script>
  40. </body>
  41. </html>

普通添加事件的方法不支持添加多个事件，最下面的事件会覆盖上面的，而事件绑定(addEventListener)方式添加事件可以添加多个。

addEventListener不兼容低版本IE

普通事件无法取消

addEventListener还支持事件冒泡+事件捕获，removeEventListener取消绑定事件

addEventListener中的false是默认情况，表示事件在冒泡阶段执行。true表示事件在捕获阶段执行。

发表评论

表情：
评论列表 （有 0 条评论，348人围观）

还没有评论，来说两句吧...

相关阅读

    相关 WEUI 事件绑定

    1、简易的输入同步框 所需用到的事件为bindinput,详情可以查看开发文档 通过bindinput事件来监听输入框的值是否发生改变且获取到改变后的值，之后在js文件...

    小灰灰小灰灰/ 0 赞/ 1166 阅读