javascript 事件冒泡和事件代理

事件冒泡

　　简单的讲，当子元素的事件处理函数被触发（如onclick），该事件会从事件源（当前子元素）逐级向上层元素传递，触发祖先元素的 onclik 事件，一直到最外层 html 根元素。

　　这可能会带来困扰，不必要的事件处理函数被执行了，不过我们可以阻止事件冒泡。事件触发时，会传入一个event对象，它有一个 stopPropagation() 方法可以阻止事件冒泡。

　　事件冒泡机制当然也有有利的一面，事件代理就是基于浏览器的事件冒泡机制。

事件代理

　　事件代理也叫事件委托，当我们需要为父元素的很多子元素添加事件时，可以通过把事件添加到父元素并把事件委托给父元素来触发事件处理函数。

　　在开发中，我们有时会遇到给列表每一个子元素都添加一个事件，可以用遍历来操作，这种方法固然简单，但是如果这个列表有巨量的子元素的时候，就要消耗大量的性能，并且当子元素需要新增的时候，每增加一个子元素就需要遍历一次，这种方法就更不可取。

　　事件委托不仅实现相同了功能，而且大大减少了DOM操作。

    <ul class="wrap"><li class="item">1111<button>删除</button></li><li class="item">2222<button>删除</button></li><li class="item">3333<button>删除</button></li><li class="item">4444<button>删除</button></li><li class="item">5555<button>删除</button></li></ul><button class="add">添加子元素</button><script>let oWrap = document.getElementsByClassName('wrap')[0];let oItem = document.getElementsByClassName('item');let oAdd = document.getElementsByClassName('add')[0];oWrap.addEventListener('click',function(e){//判断事件目标元素是否为 li ,并显示它的第一个子节点的文本内容if(e.target && e.target.nodeName.toLowerCase() == 'li'){console.log(e.target.childNodes[0].textContent);}//判断事件目标元素是否为 button ,删除它的父元素if(e.target && e.target.nodeName.toLowerCase() == 'button'){oWrap.removeChild(e.target.parentNode);}})//添加子节点
        oAdd.addEventListener('click',function () { let oLi = document.createElement('li');oLi.setAttribute('class','item');oLi.innerHTML = oItem.length+1+'<button>删除</button>';oWrap.appendChild(oLi);})</script>

转载于:https://www.cnblogs.com/sspeng/p/9719854.html

javascript 事件冒泡和事件代理相关推荐

JavaScript：事件冒泡和事件委托
2019独角兽企业重金招聘Python工程师标准>>> JavaScript事件代理和委托(Delegation) JavaScript事件冒泡和事件委托 JavaScript:通过 ...
JavaScript(js)事件冒泡、事件捕获、事件委托详解
JavaScript(js)事件冒泡.事件捕获.事件委托详解 1.什么是事件 JavaScript和HTML之间的交互是通过事件实现的.事件,就是文档或浏览器窗口发生的一些特定的交互瞬间.可以使用监听 ...
javascript中的事件冒泡、事件捕获和事件执行顺序
谈起JavaScript的事件,事件冒泡.事件捕获.阻止默认事件这三个话题,无论是面试还是在平时的工作中,都很难避免. DOM事件标准定义了两种事件流,这两种事件流有着显著的不同并且可能对你的应用有 ...
addeventlistener事件第三个参数_简析JavaScript 事件绑定、事件冒泡、事件捕获和事件执行顺序...
这篇文章主要介绍了javaScript 事件绑定.事件冒泡.事件捕获和事件执行顺序整理总结的相关资料 (一)事件绑定的几种方式 javascript给DOM绑定事件处理函数总的来说有2种方式:在htm ...
“约见”面试官系列之常见面试题第三十四篇之事件冒泡、事件捕获、事件代理（建议收藏）
对于事件的传播机制,Netscape Communicator采用的是事件捕获(event capture),IE9.Safari.Chrome.Opera和Firefox采用的是事件冒泡(event ...
javascript的事件冒泡,阻止事件冒泡和事件委托，事件委托是事件冒泡的一个应用。...
2018年12月13日更新 <!DOCTYPE html> <html lang="en"> <head><meta charset=&q ...
JavaScript学习（二十八）—事件冒泡和事件捕获
JavaScript学习(二十八)-事件冒泡和事件捕获一.什么是事件流? 简单说,事件流就是指事件的执行顺序,他包含两种模式:事件冒泡.事件捕获. (一).事件冒泡最常用的一种模式,就是指事件的执 ...
JavaScript事件冒泡和事件委托
JavaScript事件冒泡和事件委托付建宇 - 2 条评论接触JavaScript不久,学的东西也不是特别多.小雨就是习惯把平时学到的东西拿出来分享.一方面加强自己的印象,一方面可以让自己的经验 ...
简析JavaScript 事件绑定、事件冒泡、事件捕获和事件执行顺序
JavaScript 事件绑定.事件冒泡.事件捕获和事件执行顺序这篇文章主要介绍了javaScript 事件绑定.事件冒泡.事件捕获和事件执行顺序整理总结的相关资料 (一)事件绑定的几种方式 jav ...

javascript 事件冒泡和事件代理

事件冒泡

事件代理

javascript 事件冒泡和事件代理相关推荐

最新文章

热门文章