事件冒泡的原理?如何禁止事件冒泡 ?
来源:互联网 发布:mac如何安装flash控件 编辑:程序博客网 时间:2024/06/03 18:27
1.如何阻止事件冒泡?
function stopBubble(e){ //如果提供了事件对象,则这是一个非 ie 浏览器 if(e && e.stopPropagation){ e.stopPropagation(); }else{ window.event.cancelBubble = true; } return false;}
2.事件流
事件流描述的是从页面中接受事件的顺序,IE 的事件流是事件冒泡,而 Netscape Communicator 的事件流是事件捕获流。
事件冒泡:即事件开始时由最具体的元素,然后逐级向上传播到较为不具体的结点。(ie
、ff
、chrome
、safari
会将事件一直冒泡到 window
对象。)
事件捕获:事件捕获的思想是不太具体的结点应该更早接收到事件,而最具体的结点应该最后接受到事件。事件捕获的用意在于在事件达到预定目标之前捕获它。
要阻止特定事件的默认行为,可以使用 preventDefault()
方法。例如,链接的默认行为就是在被单击时会导航到其 href
特性指定的 URL。如果你想阻止链接导航这一默认行为,那么通过链接的onclick
事件处理程序可以取消它:
var link = document.getElementById("myLink"); link.onclick = function(event){ event.preventDefault();};
只有 cancelable
属性设置为 true
的事件,才可以使用 preventDefault()
来取消其默认行为。
stopPropagation()
方法用于立即停止事件在 DOM 层次中的传播,即取消进一步的事件捕获或冒泡。例如,直接添加一个按钮的事件处理给程序可以调用 stopPropagetion()
,从而避免触发注册在 document.body
上面的事件处理程序:
var btn = document.getElementById("myBtn"); btn.onclick = function(event){ alert("Clicked"); event.stopPropagation();};document.body.onclick = function(event){ alert("Body clicked");};
事件对象的 eventPhase
属性,可以用来确定事件当前正位于事件流的哪个阶段。如果是在捕获阶段调用的事件处理程序,其值为1
;如果事件处理程序处于目标对象上,其值为2
;如果是在冒泡阶段调用的事件处理程序,其值为3
。这里要注意的是,尽管“处于目标”发生在冒泡阶段,但是 eventPhase 的值仍然一直等于2
。
var btn = document.getElementById("myBtn");btn.onclick = function(event){ alert(event.eventPhase);//2}document.body.addEventListener("click",function(evnet){ alert(event.eventPhase);//1},true);document.body.onclick = function(event){ alert(event.eventPhase);//3}
当单击这个例子中的按钮时,首先执行的事件处理程序是在捕获阶段触发的添加到 document.body
中的那一个,结果会弹出一个警告框表示 event.Phase
的值为1
。接着,会触发在按钮上注册的事件处理程序,此时的 eventPhase
的值为2
;最后一个被触发的事件处理程序,是在冒泡阶段执行的添加到 document.body
上的那一个,显示 eventPhase
的值为3
。而当 eventPhase
的值为2
时,this.target
和 currentTarget
的值始终都是相等的。
只有在事件处理程序执行期间,event
对象才会存在;一旦事件处理程序执行完成,event
对象就会被销毁。
- 事件冒泡的原理?如何禁止事件冒泡 ?
- 事件冒泡的原理及如何禁止
- js禁止事件冒泡
- js事件冒泡原理
- javascript冒泡事件的意义及如何阻止冒泡事件
- jquery 事件冒泡的介绍以及如何阻止事件冒泡
- javascript冒泡事件的意义及如何阻止冒泡事件
- javascript冒泡事件的意义及如何阻止冒泡事件
- Jquery 事件冒泡的介绍以及如何阻止事件冒泡
- 如何阻止事件冒泡
- 事件委托,事件绑定,事件冒泡原理
- js 如何阻止事件的冒泡
- Javascript的事件冒泡
- AS 的事件冒泡
- 阻止事件的冒泡
- 事件冒泡的解决方案
- 事件的冒泡
- 能冒泡的事件
- C、C++ register关键字
- 【python】类内置函数
- 通俗解释matlab之遗传算法程序部分(二)
- 基于spark的精准推荐系统
- spring mvc @ModelAttribute使用
- 事件冒泡的原理?如何禁止事件冒泡 ?
- 源码阅读--EventBus
- Java 面试准备系列3-JDBC
- Reflection Java 反射(九)
- dao--2.dao模式
- javaSE_8系列博客——Java语言的特性(三)--类和对象(8)--对象
- CSU 1120 病毒 最长公共递增子序列
- 偶数求和
- C语言关键字auto与register的深入理解