Javascript事件模型(二):Javascript事件的父元素和子元素
DOM事件标准定义了两种事件流,分别是捕获和冒泡。默认情况下,事件使用冒泡事件流,不使用捕获事件流。你可以指定使用捕获事件流,方法是在注册事件时传入useCapture参数,将这个参数设为true。
冒泡事件流
当事件在某一DOM元素被触发时,例如用户在客户名字节点上点击鼠标,事件将跟随着该节点继承自的各个父节点冒泡穿过整个的DOM节点层次,直到它遇到依附有该事件类型处理器的节点,此时,该事件是onclick事件。在冒泡过程中的任何时候都可以终止事件的冒泡,在遵从W3C标准的浏览器里可以通 过调用事件对象上的stopPropagation()方法,在Internet Explorer里可以通过设置事件对象的cancelBubble属性为true。如果不停止事件的传播,事件将一直通过DOM冒泡直至到达文档根。
捕获事件流
事件的处理将从DOM层次的根开始,而不是从触发事件的目标元素开始,事件被从目标元素的所有祖先元素依次往下传递。在这个过程中,事件会被从文档 根到事件目标元素之间各个继承派生的元素所捕获,如果事件监听器在被注册时设置了useCapture属性为true,那么它们可以被分派给这期间的任何 元素以对事件做出处理;否则,事件会被接着传递给派生元素路径上的下一元素,直至目标元素。事件到达目标元素后,它会接着通过DOM节点再进行冒泡。
传统的事件冒泡
传统的阻止子元素继承父元素的事件方法是:为子元素添加父元素的相同事件,然后在子元素事件中阻止事件冒泡。例如:在父元素中添加onclick事件,如果不阻止冒泡的话,点击子元素也会响应父元素事件。而在子元素中阻止冒泡的话,则子元素不响应父元素事件。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <script type="text/javascript" src="jquery.min.js"></script> <script type="text/javascript"> function test1(){ $("#child").click(function(e){ e.stopPropagation(); }); alert("测试1"); } </script> </head> <body> <div id="parent" onclick="test1(this);" style="border:1px solid black;width:250px"> <input type="text" value="123" id="child"> </div> </body> </html>
还有一种方法,可以去判定事件的引发者,然后进行相应处理,如果不想引发,可以简单的给出return false;
function onmousemove(event) { var evt = event || window.event; var srcObj = getTarget(evt); if (srcObj.tagName == "DIV") { return false; } Xxxxxxxx; }
特殊的事件冒泡
对于onmouseover和onmouseout事件,不能使用e.stopPropagation()或e.cancelBubble=true来阻止事件冒泡。虽然onmouseleave和onmouseenter事件可以替代onmouseover和onmouseout事件,因为这两个事件是不会冒泡的。但是这两个事件只支持IE浏览器。jQuery中有mouseleave事件个mouseenter事件,可以用bind绑定它们即可解决浏览器冲突。
纯js的操作则需如下方式:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <script type="text/javascript" src="jquery.min.js"></script> <script type="text/javascript"> function isLeaveOrEnter(e,obj){ if(e.type != "mouseover" && e.type != "mouseout"){ return false; } var relag= relag?e.relatedTarget:(e.type=="mouseover")?e.toElement:e.formElement; if(relag && relag == obj){ if(e.type == "mouseover"){ $("#child").val("这是一次测试"); }else{ $("#child").val(""); } } } </script> </head> <body> <div id="parent" onmouseover="isLeaveOrEnter(event,this);" onmouseout="isLeaveOrEnter(event,this);" style="border:1px solid black;width:250px"> <input type="text" value="123" id="child"> </div> </body> </html>
操作原理:
获取事件作用的对象元素,判断该对象是不是绑定的对象元素,如果是则进行操作,不是则不操作。这里的示例是当鼠标移入div时input框的值为“这是一次测试”,移除div时清空值,而鼠标移入input框时则不做操作。
return false也能阻止事件冒泡,但是它不仅阻止了事件冒泡也阻止了事件本身,相当于阻塞了该事件,不再执行。而e.stopPropagation()只是阻止事件冒泡。
默认操作
事件操作可以使用阻止冒泡,而链接跳转等操作则需要阻止默认操作才行,这时需要用到event.preventDefault或window.event.returnValue=false。