使用事件委托降低重复的事件绑定,从而降低dom操作的对性能的消耗

举例：实现点击li打印对应li内的数字

dom结构：

    <ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li></ul>

js：

var ul = document.getElementsByTagName('ul')[0];ul.addEventListener('click', function (e) {if(e.target && e.target.nodeName == 'LI'){console.log('clicked li' + e.target.innerText);}})

效果：

使用事件委托降低重复的事件绑定,从而降低dom操作的对性能的消耗相关推荐

使用事件委托降低重复的事件绑定,从而降低dom操作的对性能的消耗[兼容IE版]
使用事件委托降低重复的事件绑定,从而降低dom操作的对性能的消耗[兼容IE版] 原理: W3C将DOM2.0模型中事件处理流程分为三个阶段: 一.事件捕获阶段: 当某个元素触发某个事件(如onclic ...
js原生事件委托写法，jquery事件委托写法
什么是事件委托: 事件委托--给父元素绑定事件,用来监听子元素的冒泡事件,并找到是哪个子元素的事件.(不理解冒泡的可以去百度下) 定义: 利用事件冒泡处理动态元素事件绑定的方法,专业术语叫事件委托. ...
.net 事件委托 java_仿net事件委托的java事件模型实现(转csdn)
作为对比,我们来看看Java Swing的事件处理和委托就要复杂很多:代码如下:(您若还不是很了解Swing事件驱动的话,可以参考我的另外一篇文章:事件驱动模型实例详解(Java篇))://为btnS ...
js hover 触发事件_为什么说JS的DOM操作很耗性能
想问这样的问题,其实是自己心中没有个谱,一直用 js 计算性能来衡量浏览器dom 操作性能.js性能和浏览器性能其实是两码事. 这个问题很抽象,它里面涉及挺多个小的知识点. 重申一点,js 操作 D ...
你真的理解事件绑定、事件冒泡和事件委托吗？
一文了解Web API中的事件绑定.事件冒泡.事件委托引言正文一.事件绑定 1.事件和事件绑定时什么? 2.事件是如何实现的? 二.事件冒泡 1.事件模型 2.事件模型解析 (1)捕获阶段 (2 ...
vue学习：事件传递（冒泡和捕获），事件委托，jquery中的事件委托，$event 获取元素，vue事件修饰符
事件传递 ----冒泡和捕获 DOM事件标准定义了两种事件流,这两种事件流分别是捕获和冒泡. 和许多Web技术一样,在它们成为标准之前,Netscape和微软各自不同地实现了它们.Netscape选 ...
JS 事件代理和事件委托
目录事件委托的概念理解为什么要用事件委托事件委托的原理: 事件代理(委托)实现总结: 事件委托的概念理解为什么叫事件委托?它还有一个名字叫事件代理. JavaScript高级程序设计上讲:事 ...
详解事件代理（事件委托）以及应用场景
事件代理(也称事件委托)事件代理,俗地来讲,就是把⼀个元素响应事件 ( click . keydown ......)的函数委托到另⼀个元素前⾯讲到,事件流的都会经过三个阶段: 捕获阶段 -> ...
JavaScript：事件冒泡和事件委托
2019独角兽企业重金招聘Python工程师标准>>> JavaScript事件代理和委托(Delegation) JavaScript事件冒泡和事件委托 JavaScript:通过 ...

使用事件委托降低重复的事件绑定,从而降低dom操作的对性能的消耗

使用事件委托降低重复的事件绑定,从而降低dom操作的对性能的消耗相关推荐

最新文章

热门文章