JavaScript中事件处理

事件处理分为三个阶段：捕获 - 处理 - 冒泡。

以点击按钮为例：

捕获阶段：由外层到内层，首先调用给Window注册的click捕获阶段监听方法，然后document、body、一层层的父节点，一直到按钮本身。

处理阶段：调用按钮本身的click监听方法。

起泡阶段：从按钮开始，从内层到外层，依次调用各级父节点的起泡阶段监听方法，直到Window。

但是，对于IE8及更低版本IE，不支持捕获阶段，因此捕获阶段的事件监听目前尚不通用。

通常的事件处理方法形式为：

[javascript] view
plain copy

function eventHandler(e) {  

    e = e || window.event;  

    var target = e.target || e.srcElement;  

    ... ...  

      

}  

e为事件对象，当事件触发时，作为参数传进来，但对于IE8及更低版本IE不适用，只能通过全局的event变量访问，好在不会出现同时处理两个事件的情况。

如何注册事件监听方法？

（1）直接写在HTML里，DOM元素的属性里。

[javascript] view
plain copy

<button id="btn" onclick="alert(123)">CLICK</button>  

<button id="btn2" onclick="eventHandler()">CLICK2</button>  

（2）在Javascript中，赋值给相应的DOM元素。

[javascript] view
plain copy

document.getElementById('btn2').onclick = eventHandler;  

（3）addEventListener

[javascript] view
plain copy

document.getElementById('btn2').addEventListener('click', eventHandler, false);  

这里第三个参数是标识何时触发eventHandler，false表示在事件起泡阶段触发，true表示在事件捕获阶段触发。因为在IE8即更低版本不支持事件捕获，因此不经常使用true。

可以给同一个控件调用多次此注册方法，注册多个handler。

removeEventListener与之对应。

在IE8及更低版本IE中，使用attachEvent代替。

[javascript] view
plain copy

document.getElementById('btn2').attachEvent('onclick', eventHandler);  

此时，浏览器仅支持事件起泡，不支持事件捕获，因此无第三个参数。

detachEvent与之对应。

阻止浏览器默认操作

对于通过第一种、第二种方法注册的监听方法，返回值如果为false，就阻止进一步的浏览器默认操作。以超链接为例：

[javascript] view
plain copy

<a href="http://www.baidu.com" onclick="alert(1);return false">LINK</a>  

点击了这个LINK后，因为返回值为false，因此不会跳转到百度首页（默认操作）。

对于通过第三种方法注册的监听方法，返回值无效，可以通过event.preventDefault()来阻止浏览器的默认操作。对于IE8即更低版本IE，不支持preventDefault方法，只能通过event.returnValue=false来实现。因此，阻止浏览器默认操作的通用写法为：

[javascript] view
plain copy

if(e.preventDefault) {  

        e.preventDefault();  

    } else {  

        e.returnValue = false; // IE8-  

    }  

阻止事件冒泡

[javascript] view
plain copy

if(e.stopPropagation) {  

    e.stopPropagation();  

} else {  

    e.cancelBubble = true;  

}