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

转发至：http://www.cnblogs.com/fibonaccixue/p/5340279.html
1. 事件处理程

通常情况下，返回值false就是告诉浏览器不要执行这个事件相关的默认操作。例如，表单提交按钮的onclick事件处理程序能通过返回false阻止浏览器提交表单，再如a标签的onclick事件处理程序通过返回false阻止跳转href页面。类似地，如果用户输入不合适的字符，输入域上的 onkeypress事件处理程序能通过返回false来过滤键盘输入。

  事件处理程序的返回值只对通过属性注册的处理程序才有意义。

调用顺序

文档元素或其他对象可以为指定事件类型注册多个事件处理程序。当适当的事件发生时，浏览器必须按照如下规则调用所有的事件处理程序：

通过设置对象属性或HTML属性注册的处理程序一直优先调用。
使用addEventListener()注册的处理程序按照它们的注册顺序调用。
使用attachEvent()注册的处理程序可能按照任何顺序调用，所以代码不应该依赖于调用顺序。

事件传播
　　在调用在目标元素上注册的事件处理函数后，大部分事件会“冒泡”到DOM树根。调用目标的父元素的事件处理程序，然后调用在目标的祖父元素上注册的事件处理程序。这会一直到Document对象，最后到达Window对象。

　　发生在文档元素上的大部分事件都会冒泡，值得注意的例外是focus、blur和scroll事件。文档元素的load事件会冒泡，但它会在 Document对象上停止冒泡而不会传播到Window对象。只有当整个文档都加载完毕时才会触发Window对象的load事件。
1. 取消事件默认行为、阻止事件传播
  
  在支持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来实现阻止事件进一步传播。 js中的preventDefault与stopPropagation详解首先讲解一下js中preventDefault和stopPropagation两个方法的区别： preventDefault 方法的起什么作用呢？我们知道比如百度,这是html中最基础的东西，起的作用就是点击百度链接到 http://www.baidu.com,这是属于标签的默认行为，而preventDefault方法就是可以阻止它的默认行为的发生而发生其他的事情。看一段代码大家就明白了：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JS阻止链接跳转</title>
<script type="text/javascript"> 
function stopDefault( e ) { 
if ( e && e.preventDefault ) 
   e.preventDefault(); 
    else 
   window.event.returnValue = false; 

    return false; 
} 
</script> 
</head>
<body>
<a href="http://www.baidu.com" id="testLink">百度</a> 
<script type="text/javascript"> 
var test = document.getElementById('testLink'); 
test.onclick = function(e) { 
   alert('我的链接地址是：' + this.href + ', 但是我不会跳转。'); 
   stopDefault(e); 
} 
</script>
</body>
</html>

此时点击百度链接，不会打开http://www.baidu.com，而只是弹出一个alert对话框。 preventDefault方法讲解到这里，stopPropagation方法呢？讲stopPropagation方法之前必需先给大家讲解一下js的事件代理。事件代理用到了两个在JavaSciprt事件中常被忽略的特性：事件冒泡以及目标元素。当一个元素上的事件被触发的时候，比如说鼠标点击了一个按钮，同样的事件将会在那个元素的所有祖先元素中被触发。这一过程被称为事件冒泡；这个事件从原始元素开始一直冒泡到DOM树的最上层。对任何一个事件来说，其目标元素都是原始元素，在我们的这个例子中也就是按钮。目标元素它在我们的事件对象中以属性的形式出现。使用事件代理的话我们可以把事件处理器添加到一个元素上，等待事件从它的子级元素里冒泡上来，并且可以很方便地判断出这个事件是从哪个元素开始的。 stopPropagation方法就是起到阻止js事件冒泡的作用，看一段代码。阻止JS事件冒泡传递（cancelBubble 、stopPropagation） function doSomething (obj,evt) { alert(obj.id); var e=(evt)?evt:window.event; if (window.event) { e.cancelBubble=true;// ie下阻止冒泡 } else { //e.preventDefault(); e.stopPropagation();// 其它浏览器下阻止冒泡 } }

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

猜你喜欢