capture
)和冒泡(bubble
)两个阶段:捕获阶段事件从 window
开始触发事件然后通过祖先节点一次传递到触发事件的 DOM
元素上;冒泡阶段事件从初始元素依次向祖先节点传递直到 window
elem.addEventListener(type, handler, capture)
/elem.removeEventListener(type, handler, capture)
:handler
接收保存事件信息的 event
对象作为参数,event.target
为触发事件的对象,handler
调用上下文 this
为绑定监听器的对象,event.preventDefault()
取消事件默认行为,event.stopPropagation()
/event.stopImmediatePropagation()
取消事件传递elem.attachEvent('on'+type, handler)
/elem.detachEvent('on'+type, handler)
:handler
不接收 event
作为参数,事件信息保存在 window.event
中,触发事件的对象为 event.srcElement
,handler
执行上下文 this
为 window
使用闭包中调用 handler.call(elem, event)
可模仿标准模型,然后返回闭包,保证了监听器的移除。event.returnValue
为 false
时取消事件默认行为,event.cancleBubble
为 true
时取消时间传播/** * 跨浏览器事件处理工具。只支持冒泡。不支持捕获 * @author (qiu_deqing@126.com) */ var EventUtil = { getEvent: function (event) { return event || window.event; }, getTarget: function (event) { return event.target || event.srcElement; }, // 返回注册成功的监听器,IE中需要使用返回值来移除监听器 on: function (elem, type, handler) { if (elem.addEventListener) { elem.addEventListener(type, handler, false); return handler; } else if (elem.attachEvent) { var wrapper = function () { var event = window.event; event.target = event.srcElement; handler.call(elem, event); }; elem.attachEvent('on' + type, wrapper); return wrapper; } }, off: function (elem, type, handler) { if (elem.removeEventListener) { elem.removeEventListener(type, handler, false); } else if (elem.detachEvent) { elem.detachEvent('on' + type, handler); } }, preventDefault: function (event) { if (event.preventDefault) { event.preventDefault(); } else if ('returnValue' in event) { event.returnValue = false; } }, stopPropagation: function (event) { if (event.stopPropagation) { event.stopPropagation(); } else if ('cancelBubble' in event) { event.cancelBubble = true; } }, /** * keypress事件跨浏览器获取输入字符 * 某些浏览器在一些特殊键上也触发keypress,此时返回null **/ getChar: function (event) { if (event.which == null) { return String.fromCharCode(event.keyCode); // IE } else if (event.which != 0 && event.charCode != 0) { return String.fromCharCode(event.which); // the rest } else { return null; // special key } } };
本文作者:前端小毛
本文链接:
版权声明:本博客所有文章除特别声明外,均采用 BY-NC-SA 许可协议。转载请注明出处!