1. addEventListener 和removeEventListener:
参数1:事件类型;
参数2: 事件处理函数;
参数3:是否在捕获阶段处理事件,通常为false;
2.attachEvent(IE)
区别1:IE不支持捕获阶段;
区别2:事件类型需要有“on”前缀;
3.运行环境:
(1). 使用addEventListener注册的事件函数this关键字指向事件目标,attachEvent指向全局对象;
注意下面例子中用attach注册的事件是没有办法用detachEvent移除的.
function addEvent(target, type, handler, usecapture, global) { if (target.addEventListener) target.addEventListener(type, handler, usecapture); else target.attachEvent("on" + type, global ? function(event) { return handler.call(target, event); } : handler); } function removeEvent(target, type, handler, usecapture) { if (target.removeEventListener) target.removeEventListener(type, handler, usecapture); else target.detachEvent("on" + type, handler); }
通常返回false可以告诉浏览器不要执行这个事件相关的默认操作。onbeforeunload事件通过返回字符串来生成弹窗询问。
5.事件处理阶段:
(1).捕获阶段,从DOM树向下,直到调用事件目标的父元素的捕获事件处理程序,目标本身的处理程序不会被调用;
(2).目标阶段:执行目标的事件处理程序;
(3).冒泡阶段:从目标向根节点冒泡,执行中间经过节点的事件处理程序;
6.事件取消:
(1). 取消浏览器默认操作的方法:
function cancelHandler(event) { var event = event || window.event; if (event.preventDefault) event.preventDefault; if (event.returnValue) event.returnValue = false; // IE return false: };
在支持addEventListener的浏览器中在任何阶段中断事件流的传播;
(3). event.cancelBubble:
在IE中只在冒泡阶段结束冒泡;
(4). stopImmediatePropagation:
类似stopPropagation,但是会终止所有注册在相同对象上的程序调用,非标准,在jQuery等库中有跨平台实现。