向元素添加事件句柄的语法:element.addEventListener(event, function, useCapture);
第一个参数是事件的类型,如click或者mousedown,注意前面都没有on
第二个是事件触发后调用的函数
第三个参数为布尔值,可选,默认值为false,即冒泡传递
例如
<button id="myBtn">点我</button> <script> document.getElementById("myBtn").addEventListener("click", function(){alert("Hello World!");}); </script>
<button id="myBtn">点我</button> <script> document.getElementById("myBtn").addEventListener("click", myFunction); function myFunction() {alert ("Hello World!");} </script>
上述第一种情况时直接写明函数与内容,第二种情况是通过函数名调用函数,这两种情况是等价的,并且与直接给元素添加事件是等价的。
注意,直接给元素添加事件时,是通过'函数名()'指明事件的,函数名后面有括号,并且整体通过''引用,而添加事件句柄时,直接通过函数名引用,没有括号也没有引号。
<button id="myBtn" onclick='myFunction()'>点我</button> <script> function myFunction() {alert ("Hello World!");} </script>
移除事件句柄:element.removeEventListener(event, function);
<p style='background:pink' id='p'>段落</p> <button onclick='myClick()'>点我移除生成随机数的事件句柄</button> <script> document.getElementById("p").addEventListener('mousemove',myFunction) function myFunction(){document.getElementById("p").innerHTML=Math.random();} function myClick(){document.getElementById("p").removeEventListener('mousemove',myFunction);} </script>
如下,当鼠标在粉色段落框内移动时,段落内容随着鼠标移动而变成随机数,点击按钮后再在段落内移动,段落内容保持最后的不变。
可以向一个元素添加多个不同的事件句柄,也可以是两个同类型的事件例如两个click事件,后添加的事件句柄不会覆盖之前的事件句柄。
事件传递有两种方式:冒泡与捕获。
事件传递定义了元素事件触发的顺序。 如果<p>元素包含在<div>元素中,并且这两个元素都有一个click事件句柄,当用户点击<p>元素时,哪个元素的 "click" 事件先被触发呢?
在冒泡中,内部元素的事件会先被触发,然后再触发外部元素,即<p>元素的点击事件先触发,然后再触发<div>元素的点击事件。
在捕获中,外部元素的事件会先被触发,然后再触发内部元素,即<div>元素的点击事件先触发 ,然后再触发<p>元素的点击事件。
addEventListener() 方法可以指定 "useCapture" 参数来设置传递类型,默认值为false即冒泡传递,当值为 true 时事件使用捕获传递。
例如,如下
<div class="outer"> I'm outer <p class="inner">I'm inner</p> </div> <script> var ele1=document.getElementsByClassName('outer')[0]; var ele2=document.getElementsByClassName('inner')[0]; ele1.onclick=function(){alert('I\'m outer')} ele2.onclick=function(){alert('I\'m inner')} </script>
在点击inner框时,会先弹出I'm inner再弹出I'm outer。如果想只执行本元素事件而不触发父元素事件,可向子元素的事件函数传递参数e,并通过e.stopPropagation()阻止事件传递。
ele2.οnclick=function(e){ alert('I\'m inner'); e.stopPropagation()}