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

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

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

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

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

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

  1. 事件传播
      在调用在目标元素上注册的事件处理函数后,大部分事件会“冒泡”到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();// 其它浏览器下阻止冒泡 } }
展开阅读全文

没有更多推荐了,返回首页