#yyds干货盘点# 【js学习笔记三十六】事件委托

简介: #yyds干货盘点# 【js学习笔记三十六】事件委托

前言


我是歌谣 我有个兄弟 巅峰的时候排名c站总榜19 叫前端小歌谣 曾经我花了三年的时间创作了他 现在我要用五年的时间超越他 今天又是接近兄弟的一天人生难免坎坷 大不了从头再来 歌谣的意志是永恒的 放弃很容易 但是坚持一定很酷


导语


事件委托

图片.png

代码部分



事件委托的核心原理:给父节点添加侦听器, 利用事件冒泡影响每一个子节点


绑定一百个li

var itemli = document.getElementsByTagName('li')
      for (var i = 0; i < itemli.length; i++) {
        itemli[i].onclick = (function (n) {
          return function () {
            console.log(n + itemli[n].innerHTML)
          }
        })(i)
      }
var ul = document.querySelector('ul')
      ul.onclick = function (e) {
        e = e || window.event //这一行及下一行是为兼容IE8及以下版本
        var target = e.target || e.srcElement
        if (target.tagName.toLowerCase() === 'li') {
          var li = this.querySelectorAll('li')
          index = Array.prototype.indexOf.call(li, target)
          alert(target.innerHTML + index)
        }
      }

总结


事件委托的核心原理:给父节点添加侦听器, 利用事件冒泡影响每一个子节点

相关文章
|
2月前
|
JavaScript 前端开发
JavaScript DOM 操作:什么是事件委托(Event Delegation)?有什么优势?
JavaScript DOM 操作:什么是事件委托(Event Delegation)?有什么优势?
78 1
|
7天前
|
JavaScript 前端开发
事件委托是JS技巧,通过绑定事件到父元素利用事件冒泡,减少事件处理器数量,提高性能和节省内存。
【6月更文挑战第27天】事件委托是JS技巧,通过绑定事件到父元素利用事件冒泡,减少事件处理器数量,提高性能和节省内存。例如,动态列表可共享一个`click`事件处理器,通过`event.target`识别触发事件的子元素,简化管理和响应动态内容变化。
9 0
|
2月前
|
移动开发 JavaScript 前端开发
webgl学习笔记3_javascript的HTML DOM
webgl学习笔记3_javascript的HTML DOM
28 0
webgl学习笔记3_javascript的HTML DOM
|
2月前
|
JavaScript 前端开发 Java
webgl学习笔记2_javascript基础快速学习
webgl学习笔记2_javascript基础快速学习
24 0
|
2月前
|
JavaScript 前端开发
js开发:请解释什么是事件委托(event delegation),并给出一个示例。
事件委托是JavaScript中优化事件处理的技术,通过绑定事件处理器到共享的父元素,利用事件冒泡机制来处理子元素的事件。这种方法能提升性能、简化代码并降低内存消耗。示例展示了如何在父元素上监听`click`事件,然后通过`event.target`识别触发事件的具体子元素(如`&lt;li&gt;`),实现对动态生成列表项的点击事件处理。
|
2月前
|
JavaScript 前端开发 UED
JavaScript中的事件委托机制及实践应用
事件委托是JavaScript中常用的性能优化技巧,通过将事件监听器绑定在父元素上,实现对子元素事件的统一管理,减少页面中事件处理函数的数量,提升页面性能。本文将介绍事件委托的原理和实践应用,帮助开发者更好地理解和运用这一技术。
|
2月前
|
前端开发 JavaScript
JavaScript 中的事件委托机制详解
【2月更文挑战第2天】本文将深入探讨 JavaScript 中的事件委托机制,介绍其原理、优势以及实际应用场景,帮助读者更好地理解并运用这一重要的前端开发技术。
|
2月前
|
前端开发 JavaScript API
JavaScript学习笔记(一)promise与async
JavaScript学习笔记(一)promise与async
|
2月前
|
存储 JavaScript
【ES6系列第二篇】适用JS初学者的Set对象和Map对象学习笔记
【ES6系列第二篇】适用JS初学者的Set对象和Map对象学习笔记
31 0
|
2月前
|
JavaScript 前端开发
JavaScript DOM操作:如何实现事件委托?
JavaScript DOM操作:如何实现事件委托?
26 2