이 글에서는 주로 JS 이벤트 위임 예제에 대한 자세한 설명을 공유합니다. 먼저 분석을 살펴보겠습니다. 이벤트 위임: 이벤트 프록시라고도 하며 버블링 원리를 사용하여 부모에 이벤트를 추가하여 실행 효과를 발생시킵니다. .
우선 이런 프로그램을 작성하셨을 겁니다. 마우스가 각 리로 이동하면 배경색이 빨간색으로 바뀌므로 다음과 같은 코드를 작성했습니다.
(제가 제공한 코드는 일반적으로 다음과 같습니다. 작성 키코드는 HTML로 직접 작성하셔도 됩니다.)
window.onload = oUl = document.getElementById('ull' aLi = document.getElementsByTagName('li'); ( i =0;i <p style="margin:10px auto;color:rgb(51,51,51);font-family:verdana, Arial, Helvetica, sans-serif;font-size:14px;background-color:rgb(255,255,255);">물론 코드에는 문제가 없습니다. 루프를 통해 각 li에 이벤트를 추가하지만, li이 많으면 필요할까요? 이벤트를 여러 번 추가하려면? 실제로 성능이 많이 소모됩니다. 그러면 이벤트 하나만 추가하면 달성할 수 있을지 궁금해집니다. 물론 가능합니다. 그렇지 않으면 나는 그것에 대해 이야기하지 않을 것입니다. </p><p style="margin:10px auto;color:rgb(51,51,51);font-family:verdana, Arial, Helvetica, sans-serif;font-size:14px;background-color:rgb(255,255,255);"> 이는 버블링 원칙을 통한 이벤트 위임입니다. 부모 oUL에만 이벤트를 추가할 수 있으므로 어떤 li가 이동하더라도 부모의 이동 이벤트가 트리거됩니다. 내 JS 버블링 기사를 참조하세요. 그러나 내 요구 사항은 전체 목록이 아닌 해당 li의 색상을 변경하는 것이므로 내 마우스가 어느 LI로 이동했는지 어떻게 알 수 있습니까? 시간, 범용 이벤트 개체 속성 중 하나가 나타나려고 합니다. 이는 이벤트 소스(이벤트가 바인딩된 요소에 관계없이 실제로 이벤트를 트리거하는 대상을 나타냄)이며, 이는 LI를 가져올 수 있습니다. 현재 마우스 위치는 </p><p style="margin:10px auto;color:rgb(51,51,51);font-family:verdana, Arial, Helvetica, sans-serif;font-size:14px;background-color:rgb(255,255,255);">그러나 이는 IE와 표준 사이에 호환성 문제가 있습니다. 표준은 최신 버전의 브라우저를 참조합니다. </p><p style="margin:10px auto;color:rgb(51,51,51);font-family:verdana, Arial, Helvetica, sans-serif;font-size:14px;background-color:rgb(255,255,255);">IE: window.event.srcElement<br>Standard: event.target</p><p style="margin:10px auto;color:rgb(51,51,51);font-family:verdana, Arial, Helvetica, sans-serif;font-size:14px;background-color:rgb(255,255,255);">그래서 호환성이 필요합니다. , 이는 또한 매우 간단합니다. </p><p style="margin:10px auto;color:rgb(51,51,51);font-family:verdana, Arial, Helvetica, sans-serif;font-size:14px;background-color:rgb(255,255,255);">아래 전체 코드를 보세요. </p><pre style="margin-bottom:0px;padding-right:0px;padding-left:0px;white-space:pre-wrap;font-family:'Courier New';" class="brush:php;toolbar:false;">window.onload = function(){ var oUl = document.getElementById('ull'); var aLi = document.getElementsByTagName('li'); oUl.onmouseover = function(ev){ var event = ev||window.event; // 获取event对象 var target = ev.target || ev.srcElement; // 获取触发事件的目标对象 if(target.nodeName.toLowerCase() == 'li'){ //判断目标对象是不是li target.style.background = 'red'; } } 代码中加了一个标签名的判断,主要原因是如果不加判断,当你鼠标移入到父级oUL上面的时候,整个列表就会变红,这不是我们想要的结果,所以要判断一下。
target.nodeName 弹出的名字是大写的,所以需要转换大小写再比较。
이렇게 하면 전체 요구 사항이 완성되고, 목록이 많을 때 성능이 크게 향상됩니다.
사실 이벤트 위임에는 두 번째 장점이 있습니다. 새로 추가된 요소에는 이전 이벤트도 포함됩니다.
또 다른 요구 사항이 있다고 가정하고, 버튼을 클릭하고, 이때 목록에 다른 li를 생성합니다. 새로 생성된 li에는 이벤트가 추가되지 않아 이동하여 빨간색으로 바뀌는 기능이 없습니다. 그러나 이벤트 위임 방식을 사용하면 새 li에도 이 이벤트가 있습니다. 아버지에게 이벤트가 추가되기 때문에 원리를 적용하는 것도 매우 쉽습니다. 아버지가 있으면 이벤트도 거기에 있으므로 직접 테스트해 볼 수 있습니다.
관련 추천:
js의 이벤트 버블링, 이벤트 캡처 및 이벤트 위임이란 무엇입니까
위 내용은 JS 이벤트 위임 예시에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

去掉重复并排序的方法:1、使用“Array.from(new Set(arr))”或者“[…new Set(arr)]”语句,去掉数组中的重复元素,返回去重后的新数组;2、利用sort()对去重数组进行排序,语法“去重数组.sort()”。

本篇文章给大家带来了关于JavaScript的相关知识,其中主要介绍了关于Symbol类型、隐藏属性及全局注册表的相关问题,包括了Symbol类型的描述、Symbol不会隐式转字符串等问题,下面一起来看一下,希望对大家有帮助。

怎么制作文字轮播与图片轮播?大家第一想到的是不是利用js,其实利用纯CSS也能实现文字轮播与图片轮播,下面来看看实现方法,希望对大家有所帮助!

本篇文章给大家带来了关于JavaScript的相关知识,其中主要介绍了关于对象的构造函数和new操作符,构造函数是所有对象的成员方法中,最早被调用的那个,下面一起来看一下吧,希望对大家有帮助。

本篇文章给大家带来了关于JavaScript的相关知识,其中主要介绍了关于面向对象的相关问题,包括了属性描述符、数据描述符、存取描述符等等内容,下面一起来看一下,希望对大家有帮助。

方法:1、利用“点击元素对象.unbind("click");”方法,该方法可以移除被选元素的事件处理程序;2、利用“点击元素对象.off("click");”方法,该方法可以移除通过on()方法添加的事件处理程序。

本篇文章给大家带来了关于JavaScript的相关知识,其中主要介绍了关于BOM操作的相关问题,包括了window对象的常见事件、JavaScript执行机制等等相关内容,下面一起来看一下,希望对大家有帮助。

本篇文章整理了20+Vue面试题分享给大家,同时附上答案解析。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。


핫 AI 도구

Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool
무료로 이미지를 벗다

Clothoff.io
AI 옷 제거제

AI Hentai Generator
AI Hentai를 무료로 생성하십시오.

인기 기사

뜨거운 도구

Dreamweaver Mac版
시각적 웹 개발 도구

맨티스BT
Mantis는 제품 결함 추적을 돕기 위해 설계된 배포하기 쉬운 웹 기반 결함 추적 도구입니다. PHP, MySQL 및 웹 서버가 필요합니다. 데모 및 호스팅 서비스를 확인해 보세요.

메모장++7.3.1
사용하기 쉬운 무료 코드 편집기

Eclipse용 SAP NetWeaver 서버 어댑터
Eclipse를 SAP NetWeaver 애플리케이션 서버와 통합합니다.

SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)
