찾다
웹 프론트엔드JS 튜토리얼JS 이벤트 위임 예시에 대한 자세한 설명
JS 이벤트 위임 예시에 대한 자세한 설명Mar 13, 2018 pm 02:59 PM
javascript상해

이 글에서는 주로 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의 이벤트 버블링, 이벤트 캡처 및 이벤트 위임이란 무엇입니까

이벤트 캡처 및 버블링과 이벤트 위임 비교 분석

Javascript 이벤트 위임에 대한 자세한 설명

위 내용은 JS 이벤트 위임 예시에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
es6数组怎么去掉重复并且重新排序es6数组怎么去掉重复并且重新排序May 05, 2022 pm 07:08 PM

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

JavaScript的Symbol类型、隐藏属性及全局注册表详解JavaScript的Symbol类型、隐藏属性及全局注册表详解Jun 02, 2022 am 11:50 AM

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

原来利用纯CSS也能实现文字轮播与图片轮播!原来利用纯CSS也能实现文字轮播与图片轮播!Jun 10, 2022 pm 01:00 PM

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

JavaScript对象的构造函数和new操作符(实例详解)JavaScript对象的构造函数和new操作符(实例详解)May 10, 2022 pm 06:16 PM

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

JavaScript面向对象详细解析之属性描述符JavaScript面向对象详细解析之属性描述符May 27, 2022 pm 05:29 PM

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

javascript怎么移除元素点击事件javascript怎么移除元素点击事件Apr 11, 2022 pm 04:51 PM

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

整理总结JavaScript常见的BOM操作整理总结JavaScript常见的BOM操作Jun 01, 2022 am 11:43 AM

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

20+道必知必会的Vue面试题(附答案解析)20+道必知必会的Vue面试题(附答案解析)Apr 06, 2021 am 09:41 AM

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

See all articles

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

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

AI Clothes Remover

AI Clothes Remover

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

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai Generator

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

뜨거운 도구

Dreamweaver Mac版

Dreamweaver Mac版

시각적 웹 개발 도구

맨티스BT

맨티스BT

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

메모장++7.3.1

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

Eclipse용 SAP NetWeaver 서버 어댑터

Eclipse용 SAP NetWeaver 서버 어댑터

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

SublimeText3 Mac 버전

SublimeText3 Mac 버전

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