js事件委托和事件冒泡

<div id="ulbox" class="ulbox">

  <a>

    <img src="../../dist/img/77014842_5.jpg" width="30px" />

    <p>aaa</p>

    <span>111</span>

    <input type="radio" name="sex" />

  </a>

  <a>

    <img src="../../dist/img/77014842_5.jpg" width="30px" />

    <p>bbb</p>

    <span>222</span>

    <input type="radio" name="sex" />

  </a>

  <a>

    <img src="../../dist/img/77014842_5.jpg" width="30px" />

    <p>ccc</p>

    <span>333</span>

    <input type="radio" name="sex" />

  </a>

</div>

<script>

var uid = document.getElementById("ulbox");

uid.onclick = function (e) {//使用事件委托给父类执行点击事件

  var ele = e.target;

  for (var i = 0; i < uid.children.length; i++) {

    uid.children[i].className = "";

    uid.children[i].lastElementChild.removeAttribute("checked");

  }

  while (ele.nodeName.toLowerCase() != "div") {//当点击的是a标签内部任意标签,利用冒泡

    if (ele.nodeName.toLowerCase() == "a") {

      break;

    }

    var ele = e.target.parentNode;

  }

  if (ele.nodeName.toLowerCase() != "div") {

    ele.className = "xxxx";

    ele.lastElementChild.setAttribute("checked","checked");

  }

}

</script>

原文地址:https://www.cnblogs.com/yuyedaocao/p/10369558.html

时间: 2024-11-17 02:51:50

js事件委托和事件冒泡的相关文章

关于事件委托和时间冒泡(以及apply和call的事项)

搜索事件委托和事件冒泡,网上一大堆乱七八糟的解释,当然意思都对,没毛病. but,真的无聊. 事件冒泡:事件会从点击的元素开始依次向上流出,直到html,遇见事件监听则执行. 事件委托:原因--父元素下有若干不定子元素需要添加相同监听事件.处理方法--利用事件冒泡性质给父元素加监听事件,再用e.target获取被点击的子元素,即事件源. 然后说到事件委托就要谈到apply和call方法了. apply方法,网上也有一大把解释,老样子,我还是喜欢简单点的. 1.所谓apply就是改变当前对象的th

事件委托与阻止冒泡

简单说下事件委托与阻止冒泡 html: <ul class="clearfix" data-type="cityPick"> <li class="active_sort_opts" data-id="0">全部</li> <li data-id="88">纽约</li> <li data-id="119">洛杉矶&

js中的事件委托或是事件代理详解

起因: 1.这是前端面试的经典题型,要去找工作的小伙伴看看还是有帮助的: 2.其实我一直都没弄明白,写这个一是为了备忘,二是给其他的知其然不知其所以然的小伙伴们以参考: 概述: 那什么叫事件委托呢?它还有一个名字叫事件代理,JavaScript高级程序设计上讲:事件委托就是利用事件冒泡,只指定一个事件处理程序,就可以管理某一类型的所有事件.那这是什么意思呢?网上的各位大牛们讲事件委托基本上都用了同一个例子,就是取快递来解释这个现象,我仔细揣摩了一下,这个例子还真是恰当,我就不去想别的例子来解释了

javascript的事件冒泡,阻止事件冒泡和事件委托, 事件委托是事件冒泡的一个应用。

首先,弄明白js 当中,什么是事件,事件模型在js中是如何设计的.什么是事件冒泡? 什么是“事件冒泡”呢?假设这里有一杯水,水被用某种神奇的方式分成不同颜色的几层.这时,从最底层冒出了一个气泡,气泡会一层一层地上升,直到最顶层.而你不管在水的哪一层观察都可以看到并捕捉到这个气泡.好了,把“水”改成“DOM”,把“气泡”改成“事件”.这就是“事件冒泡” 什么是事件委托呢?event delegation : 地址:http://davidwalsh.name/event-delegate One

【转】js中的事件委托或是事件代理详解

起因: 1.这是前端面试的经典题型,要去找工作的小伙伴看看还是有帮助的: 2.其实我一直都没弄明白,写这个一是为了备忘,二是给其他的知其然不知其所以然的小伙伴们以参考: 概述: 那什么叫事件委托呢?它还有一个名字叫事件代理,JavaScript高级程序设计上讲:事件委托就是利用事件冒泡,只指定一个事件处理程序,就可以管理某一类型的所有事件.那这是什么意思呢?网上的各位大牛们讲事件委托基本上都用了同一个例子,就是取快递来解释这个现象,我仔细揣摩了一下,这个例子还真是恰当,我就不去想别的例子来解释了

JavaScript和JQuery中的事件\委托链\事件冒泡\事件捕获,兼容所有浏览器

有做过北大青鸟培训讲师经验的我,如今在一家公司做技术部经理的职位,发现有很多程序员的基本功相当糟糕,在组织企业内部培训时讲解了一些案例,总结了一些经典代码,希望对自己和有需要的人提供一些帮助吧: JavaScript版本: DOM0事件不支持委托链 1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="C

js中的事件委托或事件代理

一,概述 JavaScript高级程序设计上讲:事件委托就是利用事件冒泡,只指定一个事件处理程序,就可以管理某一类型的所有事件. 举一个网上大牛们讲事件委托都会举的例子:就是取快递来解释,有三个同事预计会在周一收到快递.为签收快递,有两种办法:一是三个人在公司门口等快递:二是委托给前台MM代为签收.现实当中,我们大都采用委托的方案(公司也不会容忍那么多员工站在门口就为了等快递).前台MM收到快递后,她会判断收件人是谁,然后按照收件人的要求签收,甚至代为付款.这种方案还有一个优势,那就是即使公司里

js事件委托(事件代理)

事件委托 js中事件冒泡我们知道,子元素身上的事件会冒泡到父元素身上,事件代理就是本来加载子元素身上的事件,加在其父元素身上,其问起产生了,那么多的子元素怎么区分事件本应该是哪个子元素的. 答案就是event对象记录的事件源,他就是发生事件的子元素: 事件委托的好处? 1.效率高,比如不用for循环 2.js新生成的子元素也不用新其添加事件,程序逻辑比较方便 例子1. 页面有个ul包含着4个li,鼠标移动到li上,li背景变成粉色,移出,背景恢复原色. <!DOCTYPE html> <

js学习总结----事件委托和事件代理

1.什么是事件委托/事件代理 利用事件的冒泡传播机制(触发当前元素的某一个行为,它父级所有元素的相关行为都会被触发),如果一个容器中有很多元素都要绑定点击事件,我们没有必要一个个的绑定了,只需要给最外层容器绑定一个点击事件即可,在这个方法执行的时候,通过事件源的区分来进行不同的操作. 具体小案例如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"&