1.事件冒泡: 当一个元素上的事件被触发的时候，比如说鼠标点击了一个按钮，同样的事件将会在那个元素的所有先元素中被触发。这一过程被称为事件冒泡；这个事件从原始元素开始一直冒泡到DOM树的最上层。
2.目标元素: 任何一个事件的目标元素都是最开始的那个元素，并且它在我们的元素对象中以属性的形式出现。使用事件代理的话我们可以把事件处理器添加到一个元素上，等待一个事件从它的子级元素里冒泡上来，并且可以很方便地得知这个事件是从哪个元素开始的。
以前对js的冒泡机制有点了解,知道window.event.cancelBubble 来设置是否启用事件传播.但是这只能在IE是使用.如果跨浏览器就不太合适了.Jquery中的event.stopPropagation()解决了浏览器的兼容性.以下举例说明:
<script type="text/javascript">
$(function () {
$("div").css({ border: "1px solid red" });
$("#div1").css({ height: "500px", width: "500px" }).bind("click", function (event) { alert("div1"); return false;});
$("#div2").css({ height: "300px", width: "300px" }).bind("click", function (event) { event.stopPropagation(); alert("div2"); });
$("#div3").css({ height: "100px", width: "100px" }).bind("click", function (event) { alert("div3"); });
$(document).bind("click", function (event) { alert("document"); });
});
</script>
</head>
<body>
<div id="div1">
<div id="div2">
<div id="div3">
</div>
</div>
</div>
正常情况下,我们单击div3会显示"div3”—>"div2”—>"div1”—>"document”.但是我们在div2上加上event.stopPropagation()后,单击div3显示顺序为"div3”—>"div2”, 当单击div3时首先会触发div3的click事件,然后根据dom模型传播到div3的父节点也就是div2,然后执行div2的click事件,由于在div2的click事件中加入了event.stopPropagation(),取消事件传播,也就是说事件不再向上传播.
再来看div1,正常情况下单击div1会显示"div1”—>"document”.在div1中加入return false,通过返回false来取消默认的行为并阻止事件起泡。单击后只显示"div1".
相关推荐
JavaScript事件机制详细研究
在 很多语言的学习中，“事件”...javascript中的事件处理也是相同，正因为有了事件处理，才会出现 ajax拖动的效果。本文就讨论一下javascript中的事件处理，读过之后，您就会知道，很多ajax框架实现拖动效果的原理了。
添加事件的js方法也很多，有直接加到页面结构上的，有使用一些js事件监听的方法，由于各个浏览器对事件冒泡事件监听的机制不同
本文将详细介绍nodeJS事件机制与events事件模块的使用方
HTML DOM 允许 JavaScript 对 HTML 事件作出反应。JavaScript 能够在事件发⽣时执⾏，⽐如当⽤户点击某个 HTML 元素时。
本文实例讲述了js事件机制—-捕获与冒泡机制。分享给大家供大家参考，具体如下： 先从事件绑定机制说起, 事件绑定机制通过绑定方法addEventListener()实现, 语法格式如下: element.addEventListener(event, function...
主要介绍了JS 事件机制,结合完整实例形式分析了JavaScript事件响应机制、原理与使用技巧,需要的朋友可以参考下
事件捕获/冒泡网页上的布局很复杂，我们对页面的单一操作有可能产生预计以外的影响：比如我点击一个span，我可能就想点击一个span，试试上他是先点击docume
主要介绍了js事件机制----捕获与冒泡机制,结合实例形式分析了js事件机制中捕获与冒泡机制相关原理、操作技巧与注意事项,需要的朋友可以参考下
下面小编就为大家带来一篇javaScript事件机制兼容【详细整理】。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
js事件绑定机制1
请您指正留言PS：事件阶段一节请看最新博客，之前理解有误我们的网页之所以丰富多彩并具有交互功能，是因为我们的javascript脚本语言，而javascript与HTML之间的交互又是通过事件机制实现的所以，事件是javascript一...
javascript 中事件冒泡和事件捕获机制的详解 二者作用：描述事件触发时序问题 事件捕获：从document到触发事件的那个节点，即自上而下的去触发事件—由外到内 事件冒泡：自下而上的去触发事件—由内到外 绑定事件...
写在前面 因为对Vue.js很感兴趣，而且平时工作的技术栈也是Vue.js，这几个月花了些时间研究学习了一下Vue.js源码，并做了总结与输出。 ... ... 可能会有理解存在偏差的地方...众所周知，Vue.js为我们提供了四个事件API，
JavaScript中事件冒泡机制示例详析 DOM事件流（event flow ）存在三个阶段：事件捕获阶段、 处于目标阶段、 事件冒泡阶段。 事件捕获（event capturing）：通俗的理解就是，当鼠标点击或者触发dom事件时，...