JavaScript事件处理：返回值、调用顺序与传播机制详解

事件处理程序返回值与调用顺序

1.事件处理程序的返回值

通常情况下，返回false会告知浏览器不执行与该事件关联的默认操作。例如，表单提交按钮的onclick事件处理程序通过返回false可阻止表单提交；a标签的onclick事件处理程序通过返回false可阻止跳转至href指定的页面。类似地，若用户输入非法字符，输入域上的onkeypress事件处理程序可通过返回false来过滤键盘输入。需要注意的是，事件处理程序的返回值仅对通过属性注册的处理程序有效。

2.调用顺序

文档元素或其他对象可为指定事件类型注册多个事件处理程序。当相应事件发生时，浏览器需遵循以下规则调用所有已注册的处理程序：

通过设置对象属性或HTML属性注册的处理程序始终优先调用。使用addEventListener()注册的处理程序按其注册顺序依次调用。使用attachEvent()注册的处理程序调用顺序可能不确定，因此代码不应依赖特定的调用顺序。

事件传播与冒泡机制

3.事件传播

在调用目标元素上注册的事件处理函数后，多数事件会“冒泡”至DOM树根。即依次调用目标父元素、祖父元素上注册的事件处理程序，直至Document对象，最后到达Window对象。

文档元素上的多数事件均会冒泡，但focus、blur和scroll事件是例外。文档元素的load事件虽会冒泡，但会在Document对象处停止，不会传播至Window对象。只有当整个文档加载完毕时，才会触发Window对象的load事件。

4.取消事件默认行为、阻止事件传播

取消默认行为与阻止传播实现

在支持addEventListener()的浏览器中，可通过调用事件对象的preventDefault()方法取消事件的默认操作。在IE9之前的IE版本中，可通过将事件对象的returnValue属性设为false来实现相同效果。以下代码结合三种技术来取消事件：

function cancelHandler(event){
 var event=event||window.event;//兼容IE
 //取消事件相关的默认行为
 if(event.preventDefault) //标准技术
 event.preventDefault();
 if(event.returnValue) //兼容IE9之前的IE
 event.returnValue=false;
 return false; //用于处理使用对象属性注册的处理程序
}

取消事件相关的默认操作仅是事件取消的一种形式，我们同样可以取消事件传播。在支持addEventListener()的浏览器中，可调用事件对象的stopPropagation()方法以阻止事件继续传播。若在同一对象上定义了其他处理程序，剩余处理程序仍将被调用；但调用stopPropagation()后，其他对象上的事件处理程序将不再被调用。

IE9之前的IE版本不支持stopPropagation()方法，而是通过将事件对象的cancelBubble属性设为true来实现阻止事件进一步传播。

以上即为本文总结的全部内容，希望对大家有所帮助~