jQuery中的事件冒泡、事件捕获和事件追加引发的问题

近日在项目中遇到一些问题，一个是ID值唯一存在的问题，另一个便是事件的追加产生的错误。
关于ID值唯一存在，从id的定义来看，id代表唯一的元素，若页面中出现多个标签存在相同的id，那么此时只有第一个id所在的标签起作用，而且会多次起作用。所以若需要多个相同的元素出现在一个页面上，切记不要使用相同的ID值，建议可使用class或者name。
其次是事件的冒泡、捕获和追加事件，前两者很好理解，见得也比较多，在此简单介绍。
事件冒泡:子元素的事件向上冒泡至根级父元素，多次执行子元素上的事件。比如：

<div><h1 click=click()></h1>
</div>

这段代码中，虽然div标签里没有定义click事件，但是因为div是h1的父级元素，所以当点击h1时，click事件会执行两次。
同理，事件捕获：父级元素的事件向下捕获至根级子元素，多次执行父元素上的事件。比如：

<div click=click()><h1></h1>
</div>

这段代码中，虽h1标签里没有定义click事件，但是因为h1是div的子元素，所以当点击div时，click事件会执行两次。

事件追加：元素执行时会向同级元素查找，多次执行。比如：

<div ><h1 class=“captal” click=click()></h1><h1 class=“captal” click=click()></h1><h1 class=“captal” click=click()></h1><h1 class=“captal” click=click()></h1>
</div>

四个h1是完全一样的，所以点击第一个h1的时候，会执行四次click,点击第二个h1时，会执行三次click，也就是说会在点击目标元素开始向下查找，有几个相同的就执行几次。

几种事件类型的解决方案
冒泡：因为存在兼容性问题，所以有如下几种方式来阻止冒泡

event.stopPropagation() ；在基于firefox内核的浏览器中支持此做法
event.cancelBubble=true；在基于ie内核的浏览器中的使用此做法
return false；

event=(event)?event:window.event用来判断如果是ie内核，返回后者，否则返回前者。
时间捕获：

event.preventDefault();
return false；

事件追加：
- event.stopImmediatePropagation()此方法即可是阻止事件追加也可以阻止事件冒泡

jQuery中的事件冒泡、事件捕获和事件追加引发的问题相关推荐

JavaScript权威设计--事件冒泡，捕获，事件句柄，事件源，事件对象(简要学习笔记十八)...
1.事件冒泡与事件捕获 2.事件与事件句柄 3.事件委托:利用事件的冒泡技术.子元素的事件最终会冒泡到父元素直到跟节点.事件监听会分析从子元素冒泡上来的事件. 事件委托的好处: 1.每个函 ...
vue 阻止事件冒泡，捕获方法
要想了解 VUE 阻止事件冒泡和捕获方法,首先要了解一下 JS 事件和 JS 阻止事件冒泡,捕获方法 1. js 事件的三阶段捕获阶段目标阶段:执行当前对象的事件处理程序冒泡阶段 2. js 阻 ...
事件冒泡、捕获？如何阻止
事件冒泡 <style>div{color: white;font-size: 30px;}.content{width: 400px;height: 400px;background-c ...
JS 中的事件冒泡与捕获
本文来源:渔人原文地址:http://yuren.space/blog/2016/10/16/事件冒泡与捕获/ 刚接触 JS 的那个时候,啥也不懂,只想着如何利用 Google.百度到的函数来解决实 ...
vue 阻止事件冒泡和捕获
vue 阻止事件冒泡和捕获 @click.stop : 阻止事件冒泡 @click.prevent : 阻止事件默认行为 @click.self : 事件只作用在元素本身,而不是其子元素
JS 事件冒泡、捕获。学习记录
作为一个转行刚到公司的新人,任务不多,这一周任务全部消灭,闲暇的一天也别闲着,悄悄的看起了书.今天写一下JS的事件冒泡.捕获. 也是今天看的内容有点多了,有些消化不了,就随手记录一下.纯属自我理解,如 ...
JS 事件冒泡整理浏览器的事件流
JavaScript与HTML的交互通过事件来实现.而浏览器的事件流是一个非常重要的概念.不去讨论那些古老的浏览器有事件捕获与事件冒泡的争议, 只需要知道在DOM2中规定的事件流包括了三个部分,事件捕 ...
Js阻止事件冒泡和阻止默认事件
js中阻止事件冒泡,阻止默认事件的方法,理解stopPropagation(),preventDefault(),return false的区别 1.event.stopPropagation()方法 ...
JS、Vue、React阻止事件冒泡及阻止默认事件
JS阻止事件冒泡及阻止默认事件解决方案: 1.event.preventDefault -- 阻止默认 Event 接口的 preventDefault()方法,告诉user agent:如果此事件没 ...
什么是事件冒泡？如何阻止事件冒泡？
什么是事件冒泡?如何阻止事件冒泡? 比如说在一个层层嵌套的HTML元素中,触发了最里面的那个HTML元素的某个事件,接下来会自里向外相继触发每一层HTML元素的相同事件,这就是事件冒泡.阻止事件冒泡可 ...

jQuery中的事件冒泡、事件捕获和事件追加引发的问题

jQuery中的事件冒泡、事件捕获和事件追加引发的问题相关推荐

最新文章

热门文章