自己做网站好难挣钱,网站建设 嘉定,地方门户网站赚钱,长沙58同城招聘网找工作招聘信息说明#xff1a;该文属于 大前端全栈架构白宝书专栏#xff0c;目前阶段免费#xff0c;如需要项目实战或者是体系化资源#xff0c;文末名片加V#xff01;作者#xff1a;不渴望力量的哈士奇(哈哥)#xff0c;十余年工作经验, 从事过全栈研发、产品经理等工作#xf… 说明该文属于 大前端全栈架构白宝书专栏目前阶段免费如需要项目实战或者是体系化资源文末名片加V作者不渴望力量的哈士奇(哈哥)十余年工作经验, 从事过全栈研发、产品经理等工作目前在公司担任研发部门CTO。荣誉2022年度博客之星Top4、2023年度超级个体得主、谷歌与亚马逊开发者大会特约speaker、全栈领域优质创作者。 白宝书系列 启示录 - 攻城狮的自我修养 Python全栈白宝书 ChatGPT实践指南白宝书 产品思维训练白宝书 全域运营实战白宝书 大前端全栈架构白宝书 文章目录 ⭐ DOM事件委托 ⭐ DOM事件委托
事件委托可以帮助解决添加事件监听的两个问题
批量添加事件监听大量占用内存会出现的性能问题动态添加的元素必须添加事件监听不能获得事件监听。
下面举两个案例来分别介绍着两个问题。
**案例一批量添加事件监听会遇到性能问题**页面上有一个无序列表它内部共有20个li元素请批量给它们添加点击事件监听实现效果点击哪个li元素哪个li元素就变红。
题目分析可以使用getElementsByTagName可以获取到li的数组然后通过遍历的方式循环添加事件监听
bodydivul idlistli项/lili项/lili项/lili项/lili项/lili项/lili项/lili项/lili项/lili项/lili项/lili项/lili项/lili项/lili项/lili项/lili项/lili项/lili项/lili项/li/ul/divscriptvar oList document.getElementById(list);var lis oList.getElementsByTagName(li);for (var i 0; i lis.length; i) {lis[i].onclick function () {//在这个函数中this表示点击的这个元素this涉及函数上下文的相关知识我们在“面向对象”中再介绍this.style.color red;};};/script
/body上面案例中每一个事件监听注册都会消耗一定的系统内存而批量添加事件会导致监听数量太多内存消耗会非常大。并且每个事件处理函数都是不同的函数这些函数本身也会占用内存。
**案例二页面元素是动态添加的每个元素都需要添加事件监听**页面上有一个无序列表它内部没有li元素请制作一个按钮点击这个按钮就能添加一个li元素。并且要求每个增加的li元素也要有事件监听实现效果点击哪个li元素哪个li元素就变红
题目分析li的数量不是固定的没办法使用循环遍历的方式去批量添加事件监听。我们给新创建的li节点添加事件监听
bodybutton idbtn点击我添加列表项/buttondivul idlist/ul/divscriptvar oBtn document.getElementById(btn);var oList document.getElementById(list);oBtn.onclick function () {//创建一个孤儿节点var oLi document.createElement(li);oLi.innerHTML 我是列表项;//上树oList.appendChild(oLi);//添加事件监听oLi.onclick function () {oLi.style.color red;};};/script
/body上面案例中同样会出现性能问题因为每个事件处理函数都会占用新的内存添加几个li就会创建几个事件监听处理函数。
为了解决上面的问题DOM提供了一种方法即事件委托。 **事件委托**利用事件冒泡机制将后代元素事件委托给祖先元素 比如下图中点击任何一个li元素事件都会通过事件冒泡传给祖先元素我们只需要给ul添加事件监听就可以了而不需要给每一个li都添加一遍事件监听。 事件委托需要结合e.target属性来实现 属性属性描述target触发此事件的最早元素即“事件源元素”currentTarget事件处理程序附加到的元素与this非常相似
示例代码
bodyul idlistli我是列表项/lili我是列表项/lili我是列表项/lili我是列表项/lili我是列表项/li/ulscriptvar oList document.getElementById(list);//给ul添加事件监听oList.onclick function (e) {//e.target就表示点击的那个元素即事件源元素将事件源元素变红e.target.style.color red;}/script
/body可以自行尝试一下动态创建元素点击按钮创建新的li然后利用事件委托实现鼠标点击li时文字变红。
事件委托的使用场景 当有大量元素需要批量添加事件监听时使用事件委托可以减少内存开销 当有动态元素节点上树时使用事件委托可以让新上树的元素具有事件监听
事件委托的注意事项 注意事件是否冒泡不能委托不冒泡的事件给祖先元素 在鼠标事件监听中onmouseenter和onmouseover都表示“鼠标进入”它们有什么区别呢答onmouseenter不冒泡onmouseover冒泡onmouseenter这个属性天生就是“不冒泡”的相当于你事件处理函数附加给了哪个DOM节点就是哪个DOM节点自己触发的事件没有冒泡的过程。 示例代码 //因为onmouseeter不冒泡所以鼠标进入ul中的某个li时整个ul都会变红因为这个事件监听针对的是ul节点元素。
oList.onmouseenter function (e) { e.target.style.color red;
};解决办法将onmouseenter换成onmouseover 最内层元素尽可能不能再有额外的内层元素了否则可能实现不了理想的效果 比如下面的例子中li内部还包了span标签当鼠标点击span标签的内容时只有span标签的变红了而不能使整个li变红。 bodyul idlistlispan姓名/span我是列表项/lilispan电话/span我是列表项/lilispan地址/span我是列表项/lilispan邮箱/span我是列表项/lilispan手机/span我是列表项/li/ulscriptvar oList document.getElementById(list);//给ul添加事件监听oList.onclick function (e) {e.target.style.color red;};/script
/body
