JavaScript事件绑定和事件监听的区别

来源：互联网发布：苏州聚合数据招聘编辑：程序博客网时间：2024/06/06 03:14

<!doctype html><html lang="en"><head>    <meta charset="UTF-8" />    <title>Document</title></head><body>    <!--普通事件中的onclick事件只支持单个事件，会被其他onclick事件覆盖，(重点！！！)        有两种写法:        一是在标签内写onclick事件　　　　 二是在JS里面写onlicke=function（）{}        事件监听中的addEventListener可以添加多个事件而不用担心被覆盖        只有一种写法：监听方法    -->    <!--第一种写法    不执行-->    <input id="myButton" type="button" value="点我" onclick="alert('普通事件1');">      <script type="text/javascript">        document.getElementById("myButton").onclick=function () {            alert('普通事件2');       //第二种写法  会将上面的alert('普通事件1')覆盖          }        //事件监听添加两个事件.  监听可以对同一件事情添加多个监听的事件        document.getElementById("myButton").addEventListener('click', a);          document.getElementById("myButton").addEventListener('click', b);  //不能用onclick        function  a() {            alert('事件监听1');  //执行        }        function  b() {            alert('事件监听2');//执行        }    </script></body></html>

这里顺便提一下addEventListener这个函数
函数原型：addEventListener(event, function, useCapture)，重点是第三个参数，这个参数设置了事件的传递类型，默认值为 false, 即冒泡传递，当值为 true 时, 事件使用捕获传递。
如下图：
这里写图片描述

再举一个栗子：

document.addEventListener('click',functiona(){ },false) ;document.addEventListener('click',functionb(){ },false) ;<div onclick="functionb">    <div onclick = "functiona">           点击先触发哪个事件？    </div></div>点击文本两个div事件同时响应，此时先后顺序是:如果为false 则阻止捕获，先响应functiona,在响应functionb，否则，响应顺序相反。

阅读全文

0 0