原生js事件委托实现

html界面

<ul id="example"><li>111<span><input type="text" value="测试">aaaaaaa</span></li><li>222</li>
</ul>

js的逻辑实现

document.querySelector('#example').addEventListener('click', function (e) {console.log(this.querySelector('li').contains(e.target));var tDOM = e.target;while (tDOM) {if(tDOM.matches('li')){console.log('委托元素的事件处理');break;}else {if(tDOM === this || tDOM.parentNode === this) {break;}else {tDOM = tDOM.parentNode;}}}}, false);

转载于:https://www.cnblogs.com/reamd/p/7250800.html

js原生事件委托的实现相关推荐

js原生事件委托写法，jquery事件委托写法
什么是事件委托: 事件委托--给父元素绑定事件,用来监听子元素的冒泡事件,并找到是哪个子元素的事件.(不理解冒泡的可以去百度下) 定义: 利用事件冒泡处理动态元素事件绑定的方法,专业术语叫事件委托. ...
js 利用事件委托解决mousedown中的click
有一个需求是这样的: 父元素div绑定一个mousedown事件,子元素a绑定一个click事件. 看解构: <div id="nav"><a href=&quo ...
JS原生事件如何绑定
JS原生绑定事件主要为三种: 一是html初见处理程序二是DOMO级事件处理程序三是DOM2级事件处理程序其中:html事件现在早已不用了,就是在html各种标签上直接添加事件,类似于css的行内样 ...
js 用事件委托实现删除节点
用事件委托来处理子节点的相同点击事件的好处是 1.假如节点是动态生成的不需要在手动添加点击事件 2.不用循环遍历为每一个子节点添加点击事件代码实现思路 // 获取父节点元素var nUls = do ...
JS与Jquery的事件委托机制
传送:http://www.ituring.com.cn/article/467 概念: 什么是事件委托:通俗的讲,事件就是onclick,onmouseover,onmouseout,等就是事件,委 ...
JS的事件监听与委托机制
JS的事件监听机制小故事: 很久以前有个叫Netscape的姑娘,她制订了Javascript的一套事件驱动机制(即事件捕获) 后来又有一个叫"IE"的小子,这孩子比较傲气,他认 ...
JavaScript之事件委托（附原生js和jQuery代码）
事件委托的原理依赖于事件冒泡,可以通过给父元素的事件委托来确定是哪个子元素触发了事件从而做一系列操作. 使用事件委托的优点 1.操作子元素时不用一一遍历,可以根据事件触发的对象而进行相应操作 dom结 ...
原生JS及jQuery中事件委托的写法
在绑定节点事件处理程序时遇到的问题: 每个函数都是对象,都会占用内存:内存中的对象越多,性能就越差. 其次,必须事先指定所有事件处理程序而导致的 DOM访问次数,会延迟整个页面的交互就绪时间. 采 ...
第三天：js中的事件提高篇（事件流，事件对象，事件委托深层次理解）
目录前言一,基础部分 1.1 js监听并绑定事件 1.2 删除事件绑定二,事件流 2.1 事件流是什么 2.2 事件流模型 2.3 捕获与冒泡具体示例 2.3.1 addEventListene ...

js原生事件委托的实现

原生js事件委托实现

js原生事件委托的实现相关推荐

最新文章

热门文章