写在前面的话:
lte IE8的浏览器不支持事件捕获,只支持事件冒泡,是这样来绑定事件:element.attachEvent('onclick',doSomething),注意事件名字有前缀on。
阻止事件冒泡,在lte IE8的浏览器里通过设置window.event.cancelBubble = true;在标准浏览器里通过e.stopPropagation()来实现。
从ie9开始符合标准事件机制,任何发生在w3c事件模型中的事件,首是进入捕获阶段,直到达到目标元素,再进入冒泡阶段。在使用addEventListener()绑定事件时你可以通过最后一个参数 (useCapture)true 或 false 来设定事件发生在捕获阶段还是冒泡阶段。例如:
document.getElementById("red").addEventListener("click",function(){console.log("capture")},true);
document.getElementById("red").addEventListener("click",function(){console.log("bubble")},false);
//在标准浏览器里,点击 id是red的元素后 会依次输出 capture bubble,从而说明事件的发生顺序。
var event = new Event(type [, eventInitDict]);不提倡使用document.createEvent(),来创建事件对象
返回一个event对象,它的属性type的值等于参数type, 可选项参数 eventInitDicy允许你通过同名的对象成员设置 event对象的bubbles属性和cancelable属性。
event.type
返回event对象的type值,例如: "click", "hashchange",or"submit"
event.target
返回发生事件的对象
event.currentTarget
事件侦听器的回调被调用的对象(也就是说绑定事件的那个对象)
event.eventPhase
返回event的阶段,分别是 :
NONE(数值是0), 表示事件还没发生
CAPTURING_PHASE(数值是1), 表示捕获阶段
AT_TARGET(数值是2), 表示正处在发生事件的对象上
BUBBLES_PHASE(数值是3), 表示冒泡阶段
event.stopPropagation()
停止冒泡
event.stopImmediatePropagation()
假如你绑定了好几个回调函数,在其中一个回调函数里调用了stopImmediatePropagation(),那么该回调函数之后绑定的回调函数将不再执行,当前事件也回被阻止冒泡。
event.bubbles
布尔值 表示事件是否沿着DOM tree冒泡
event.cancelable
决定是否可以通过调用event.preventDefault()来取消默认行为
event.preventDefault()
当 event.cancelable是true的时候,调用event.preventDefault()通知有当前事件引起的默认动作被取消。
event.defaultPrevented
如果event.cancelable的值是true,并且event.preventDefault()被调用了,那么event.defaultPrevented就返回true,否则就是false。
event.isTrusted
如果事件是由浏览器触发的,那么就返回true,否则就false.
event.timeStamp
返回事件创建时间到1970的毫秒数
参考:
http://dom.spec.whatwg.org/#event
https://developer.mozilla.org/en-US/docs/Web/API/Event