要访问事件对象,请event在事件侦听器回调函数中包含一个参数:
var foo = document.getElementById("foo"); foo.addEventListener("click", onClick); function onClick(event) { // `event`参数是事件对象 // e.g. `event.type` would be "click" in this case };
HTML:
<div id="parent"> <div id="child"></div> </div>
Javascript:
var parent = document.querySelector('#parent'); var child = document.querySelector('#child'); child.addEventListener('click', function(e) { e.stopPropagation(); alert('child clicked!'); }); parent.addEventListener('click', function(e) { alert('parent clicked!'); });
由于子级停止事件传播,并且在冒泡阶段监听事件,因此单击子级只会触发子级。在不停止传播的情况下,两个事件都将被触发。
该方法停止发生元素的默认操作。event.preventDefault()
例如:
阻止提交按钮提交表单
阻止链接跟随URL
var allAnchorTags = document.querySelector('a'); allAnchorTags.addEventListener('click', function(e){ e.preventDefault(); console.log('anchor tags are useless now! *evil laugh*'); });
e.currentTarget标识事件的当前目标,因为事件遍历DOM。它始终是指事件处理程序已附加到event.target的元素,而不是标识事件发生在其上的元素。
换一种说法
e.target 将返回触发事件调度程序触发的内容
e.currentTarget 将返回您分配给侦听器的内容。
HTML:
<body> <button id="my-button"></button> </body>
Javascript:
var body = document.body; body.addEventListener( 'click', function(e) { console.log('e.target', e.target); console.log('e.currentTarget', e.currentTarget); });
如果您单击my-button,
e.target将是my-button
e.currentTarget将为body