JS 튜토리얼

이벤트 버블링 및 JavaScript 이벤트 시간 캡처(요약 공유)

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Dec 23, 2021 pm 06:49 PM

이 글은 이벤트 버블링, 타임 캡쳐 등 JavaScript의 이벤트에 대한 기본 지식을 자세히 설명하고 있어 모든 분들께 도움이 되기를 바랍니다.

이벤트 버블링 및 JavaScript 이벤트 시간 캡처(요약 공유)

1. 이벤트 버블링 및 이벤트 캡처

p 요소와 같은 웹 페이지의 요소를 클릭할 때. 잘 생각해보면 우리는 이 p 요소뿐만 아니라 p를 중심으로 하는 동심원 요소(요소의 부모, 외부 body, body의 부모 요소 html, 외부 요소. 레이어 문서. 이러한 중첩된 요소 간의 이벤트 전파를 이벤트 흐름이라고 합니다.

1. 이벤트 버블링
2. 이벤트 캡처

1. 이벤트 버블링

IE의 이벤트 흐름을 이벤트 버블링이라고 합니다. DOM0을 사용하여 추가한 이벤트 핸들러는 이벤트 버블링 단계에서 처리됩니다. 예:

<html>
  <head>
    <script type="text/javascript">

      window.onload = bubblingHandle;      function bubblingHandle() {
          //内层p处理程序
          document.getElementById("inner").onmousedown     = function() {
              alert("inner p");
          }          //外层p处理程序
          document.getElementById("outer").onmousedown = function() {
              alert("outerp");
          }

          document.onmousedown = function() {
              alert("document");
          }
      } 
      -->    </script>
  </head>
  <body>
    <p id="outer" style="background-color:black; padding: 15px;">
        <p id="inner" style="background-color:white; padding: 5px;"></p>
    </p>
  </body></html>

내부 레이어의 흰색 p를 클릭하면 다음과 같이 순서대로 표시됩니다.

inner p
outer p
document

Event Capture

Netscape에서 제안하는 이벤트 흐름을 이벤트 캡처라고 하는데, 이는 거의 반대입니다. 즉. 이벤트는 먼저 가장 덜 구체적인 요소에 의해 수신된 다음 특정 노드로 전파됩니다.

2. DOM0 레벨 이벤트 처리

이벤트는 웹 페이지에서 발생하는 일부 특정 동작에 의해 트리거됩니다. 예를 들어 특정 페이지 요소에서 마우스 왼쪽 버튼을 누르거나 특정 키보드 키를 누르거나 개체가 포커스를 얻거나 잃으면 해당 이벤트가 트리거됩니다. JavaScript와 HTML 간의 상호 작용은 이벤트를 통해 이루어집니다. 이벤트 리스너를 사용하여 이벤트를 "등록"하고, 이벤트가 발생할 때 해당 코드가 실행됩니다.

DOM 레벨 0 이벤트 핸들러는 단순성과 브라우저 간 지원으로 인해 모든 브라우저에서 계속 지원됩니다.

DOM0 수준 메서드를 통해 이벤트 핸들러 지정
이벤트 핸들러에서 이 내용
DOM0 수준 메서드를 통해 이벤트 핸들러 삭제

DOM0 수준 메서드를 통해 이벤트 핸들러 지정

DOM0 수준 메서드를 통해 이벤트 핸들러 지정 방법은 매우 간단합니다. 먼저, 작동할 요소에 대한 참조를 얻은 다음 해당 요소의 해당 이벤트 핸들러 속성에 함수를 할당합니다. (창과 문서를 포함한 각 요소에는 고유한 이벤트 핸들러 속성이 있습니다.) 이러한 방식으로 추가된 이벤트 핸들러는 이벤트 흐름의 버블링 단계에서 처리됩니다. 事件处理程序属性。（每个元素包括window和document都拥有自己的事件处理程序属性。）注意，这种方法添加的事件处理程序将在事件流的冒泡阶段被处理。

有关事件处理程序属性，有以下几点需要说明：

1、事件处理程序属性全部小写，以”on”开头，后面跟事件类型：

onclick  //单击鼠标
onload  //图像或页面载入完成
onmouseover  //将鼠标移动到某元素上面
onmousemove  //移动鼠标
onfocus  //对象获得焦点

2、每个元素如img、a、input、form包括window和document都拥有自己的事件处理程序属性。如：

document.getElementById("btn1").onclick  //btn1上单击鼠标
document.getElementById("img1").onmouseover  //鼠标移动到img1
document.getElementById("img1").onmerror  //img1图像无法载入

接下来，给事件处理程序属性赋值即可完成事件处理程序方法的指定。例如，当鼠标移动到”img1”上时，弹出对话框”This is a nice pic!”：

var pic1 = document.getElementById("img1");
pic1.onmouseover = function() {
    alert("This is a nice pic!");
};

特别注意：如果以上代码处于文档的底部，在页面刚刚加载时，我们将鼠标移动到img1上面。有可能由于代码尚未执行，不会弹出我们设定的对话框！如今，这个延迟已经十分短暂。

事件处理程序中的this

通过DOM0级方法指定的事件处理程序，属于元素方法

이벤트 핸들러 속성과 관련하여 다음 사항을 설명해야 합니다.

1. 이벤트 핸들러 속성은 모두 소문자이며 "on"으로 시작하고 그 뒤에 이벤트 유형이 옵니다.

<input>
...//省略
<script>
  <!--
  var btn1 = document.getElementById("btn1");
  btn1.onclick = function() {
      alert(this.id + "\n" + this.type + "\n" + this.value);
  };
  -->
</script>

2. img, a, 입력, 창 및 문서를 포함한 양식은 모두 자체 이벤트 핸들러 속성을 갖습니다. 예:

pic1.onmouseover = null;

다음으로 이벤트 핸들러 속성에 값을 할당하여 이벤트 핸들러 메서드 지정을 완료합니다. 예를 들어, 마우스를 "img1"로 이동하면 "This is a nice pic!"이라는 대화 상자가 나타납니다.

addEventListener()  //指定事件处理程序
removeEventListener()  //删除事件处理程序

특별 참고 사항: 위 코드가 문서 하단에 있는 경우 페이지가 막 로드된 경우입니다. , 위의 img1로 마우스를 이동합니다. 코드가 아직 실행되지 않았기 때문에 우리가 설정한 대화 상자가 팝업되지 않을 수도 있습니다! 오늘날 이 지연은 매우 짧습니다.

this in the event handler

element 메소드

<input>
...
<script>
  <!--
  var btn1 = document.getElementById("btn1");
  var handle1 = function() {
      alert("handle1!");
  }
  var handle2 = function() {
      alert("handle2!");
  }
  btn1.addEventListener("click", handle1, false);
  btn1.addEventListener("click", handle2, false);
  -->
</script>

이벤트 핸들러를 삭제하려면 해당 이벤트 핸들러 속성을 null로 설정하세요.

handle1!
handle2!

3. DOM2 수준 이벤트 처리

1. RemoveEventListener

현재 거의 모든 브라우저는 DOM0 이벤트 모델을 지원하지만 개발자는 새로운 DOM2 모델을 사용하는 것이 좋습니다. DOM2 모델과 DOM0에는 두 가지 중요한 차이점이 있습니다.

1. DOM2는 이벤트 핸들러 속성에 의존하지 않습니다.

2. 객체의 동일한 이벤트에 대해 동시에 여러 핸들러를 등록할 수 있으며 실행됩니다. 등록순으로 순차적으로 진행됩니다.

DOM2는 2가지 메소드를 정의합니다:

btn1.removeEventListener("click", handle2, false);

🎜모든 DOM 노드에는 이 두 메소드의 사용법이 다음과 같습니다. 둘 다 3개의 매개변수를 받습니다. 첫 번째 매개변수는 처리할 이벤트의 이름입니다. ), 두 번째 이벤트 핸들러 함수, 세 번째 부울 변수: 🎜🎜예를 들어 버튼 btn1의 클릭 이벤트에 대해 2개의 이벤트 핸들러를 추가하고 이벤트 핸들러는 이벤트 버블링 단계에서 처리됩니다. 🎜

 btn1.addEventListener("click", function(){
     alert("click!");
 }, false);

 btn1.removeEventListener("click", function(){
     alert("click!");
 }, false);  //无法取消！

🎜btn1을 클릭할 때 버튼을 클릭하면 대화 상자가 순서대로 나타납니다. 🎜

attachEvent()
detachEvent()

🎜 방금 지정한 이벤트 핸들러를 삭제하려면 RemoveEventListener() 메서드를 사용할 수 있습니다. 매개 변수는 일관되어야 합니다. 🎜

<input>
...
<script>
  <!--
  var btn1 = document.getElementById("btn1");
  var handle1 = function() {
      alert("handle1!" + "\n" + (this === window));
  };
  var handle2 = function() {
      alert("handle2!"+ "\n" + (this === window));
  };
  btn1.attachEvent("onclick", handle1);
  btn1.attachEvent("onclick", handle2);
  -->
</script>

🎜 이때 btn1 버튼을 클릭하세요. 핸들1만 표시됩니다! 🎜🎜익명 함수를 사용하여 이벤트 핸들러를 지정하는 경우 이벤트 핸들러를 제거하기 위해 RemoveEventListener() 메서드를 사용할 수 없다는 점에 유의하는 것이 중요합니다. 🎜

 btn1.addEventListener("click", function(){
     alert("click!");
 }, false);

 btn1.removeEventListener("click", function(){
     alert("click!");
 }, false);  //无法取消！

这样是无法取消以上指定的事件处理程序的！因为上面addEventListener和removeEventListener中的2个事件处理函数虽然代码相同，实质上是2个不同的函数引用。

另外，强调一点，以上两个函数的第一个参数(要处理的事件名)是没有on前缀的。这一点和IE不同，后面会说明。

tips: IE9, Firefox, Safari, Chrome以及Opera均支持DOM2级事件处理程序。

DOM2事件处理程序中的this

DOM2事件处理程序和DOM0相同，它们的this都在其依附的元素作用域中运行。this的指代参考DOM0的示例。这里之所以要特别指出DOM2的this，是为了和IE事件处理程序进行区分。IE中事件处理程序this与事件指定方式有关。

四、IE事件处理程序及跨浏览器支持

attachEvent()与detachEvent()

IE并没有提供对W3C事件模型的支持，其实现了2个和DOM2模型类似的方法：

attachEvent()
detachEvent()

这两个方法只接收2个参数：事件名称以及事件处理函数。由于IE8及更早版本只支持事件冒泡，这两个方法添加的事件处理程序会在事件冒泡阶段被执行。

和DOM2不同的是：

1、IE事件处理方法运行作用域为全局作用域，this指代window；
2、第一个参数事件名以on为前缀；
3、当为同一对象的相同事件指定多个处理程序时，执行顺序和DOM2相反，IE中以添加它们的相反顺序执行。

例如：

<input>
...
<script>
  <!--
  var btn1 = document.getElementById("btn1");
  var handle1 = function() {
      alert("handle1!" + "\n" + (this === window));
  };
  var handle2 = function() {
      alert("handle2!"+ "\n" + (this === window));
  };
  btn1.attachEvent("onclick", handle1);
  btn1.attachEvent("onclick", handle2);
  -->
</script>

执行结果：

handle2!
true

handle1!
true

跨浏览器支持

虽然可以使用屏蔽浏览器差异的JS库，实际上，我们自己编写一个跨浏览器兼容的事件处理代码并不是一件困难的事情，同时更有利于我们对原生JavaScript的学习理解。我们使用一个习惯上称为EventUtil的对象来进行跨浏览器事件处理：

var EventUtil = {
    addEventHandler : function(element, eventType,        handler) {
        if(element.addEventListener){
            element.addEventListener(eventType, handler, flase);
        } else if(element.attachEvent) {
            element.attachEvent("on" + eventType, handler);
        } else {
            element["on" + eventType] = handler;
        }
    },

    removeEventHandler : function(element, eventType, handler) {
        if(element.aremoveEventListener){
            element.addEventListener(eventType, handler, flase);
        } else if(element.detachEvent) {
            element.attachEvent("on" + eventType, handler);
        } else {
            element["on" + eventType] = null;
        }
    }
}

为了保证事件处理代码能够在大多数浏览器中一致地运行，我们这里只关注冒泡阶段。以上代码使用浏览器能力检测，首先检测是否支持DOM2级方法addEventListener和removeEventListener，如果支持则使用该方法；如果不支持该方法，检测是否是IE8级更早版本的attachEvent或detachEvent方法，若支持则使用该方法；如果对以上2种方法都不支持，则使用DOM0级方法。要注意，DOM0级对每个事件只能指定一个事件处理程序。

以上对象使用示例如下：

var btn1 = document.getElementById("btn1");var handle1 = function() {
    alert("handle1!" + "\n" + (this === window));
};var handle2 = function() {
    alert("handle2!"+ "\n" + (this === window));
};
EventUtil.addEventHandler(btn1, "click", handler1);
EventUtil.addEventHandler(btn1, "click", handler2);

EventUtil.removeEventHandler(btn1, "click", handler2);

五、事件对象

在触发某个事件时，会产生一个event对象。该对象中包含与事件有关的信息。例如触发事件的元素、事件的类型、与特定事件相关的如鼠标位置信息等。

1、DOM事件对象
2、IE事件对象与跨浏览器事件对象

1、DOM事件对象

不论使用DOM0级还是DOM2级方法指定事件处理程序，事件触发时都会自动将一个event对象传入事件处理程序，例如：

var btn1 = document.getElementById("btn1");

btn1.onmouseover = function(evnt) {
    alert(evnt.type);
}var handle = function(evnt) {
    alert(evnt.type);
};
btn1.addEventListener("click", handle, false);

以上是一个简单的event对象的示例。event对象中的type属性是一个只读字符串属性，其中包含着事件的类型。例如我们上例中的click和onmouseover。event对象中包含有大量的有关事件的属性和方法（例如event.stopPropagation()方法可用于停止事件在捕获或者冒泡阶段的继续传播，preventDefault()方法会取消阻止事件的行）在此就不一一列举了。其中常用的如下：

属性/方法	值类型	读写	描述
currentTarget	Element	readonly	事件处理程序当前正在处理的元素
target	Element	readonly	事件的目标
type	String	readonly	触发事件的类型
preventDefault	Function	readonly	取消事件默认行为，如链接的默认行为就是被单击时跳转到href指定的url
stopPropagation	Function	readonly	取消事件进一步冒泡或捕获

2、IE事件对象与跨浏览器事件对象

IE事件对象

在IE中，当使用DOM0级指定事件处理程序时，event对象被认为是window的一个属性，例如获取鼠标点击坐标的代码：

var mouseLoc = function() {
    var loc = "x: " + window.event.screenX + "\n" +              "y: " + window.event.screenY;
    alert(loc);
};

当使用attachEvent()方法指定事件处理程序时，event对象会被作为参数传入事件处理程序，我们将以上的代码重写：

var mouseLoc = function(event) {
    var loc = "x: " + event.screenX + "\n" +              "y: " + event.screenY;
    alert(loc);
};
btn1.attachEvent("onclick",  mouseLoc);

IE中event对象的相关属性方法：

属性/方法	值类型	读写	描述
cancelBubble	Boolean	read/write	默认为false，置为true时取消事件冒泡（同DOM中stopPropagation）
returnValue	Boolean	read/write	默认为true，设为false取消事件默认行为（同DOM中preventDefault）
srcElement	Element	readonly	事件目标
type	String	readonly	事件类型

跨浏览器事件对象

解决跨浏览器问题的思路是一贯的，我们可以对浏览器进行能力检测，这里我们对上面的EventUtil对象进行扩展，对我们学习原生JS，这是一个很漂亮的对象：

var EventUtil = {
    addEventHandler : function(element, eventType, handler) {
        if(element.addEventListener){
            element.addEventListener(eventType, handler, flase);
        } else if(element.attachEvent) {
            element.attachEvent("on" + eventType, handler);
        } else {
            element["on" + eventType] = handler;
        }
    },

    removeEventHandler : function(element, eventType, handler) {
        if(element.aremoveEventListener){
            element.addEventListener(eventType, handler, flase);
        } else if(element.detachEvent) {
            element.attachEvent("on" + eventType, handler);
        } else {
            element["on" + eventType] = null;
        }
    },

    getEvent: function (event) {
        return event ? event : window.event;
    },

    getTarget: function (event) {
        return event.target || event.srcElement;
    },

    preventDefault: function (event) {
        if (event.preventDefault) {
            event.preventDefault();
        } else {
            event.returnValue = false;
        }
    },

    stopPropagation: function (event) {
        if (event.stopPropagation) {
            event.stopPropagation();
        } else {
            event.cancelBubbles = true;
        }
    },

    getRelatedTarget: function (event) {
        if (event.relatedTarger) {            return event.relatedTarget;
        } else if (event.toElement) {            return event.toElement;
        } else if (event.fromElement) {            return event.fromElement;
        } else { return null; }
    }
}

【相关推荐：javascript学习教程】

위 내용은 이벤트 버블링 및 JavaScript 이벤트 시간 캡처(요약 공유)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명

이 기사는 CSDN에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제

관련 기사

JavaScript 및 웹 : 핵심 기능 및 사용 사례Apr 18, 2025 am 12:19 AM

웹 개발에서 JavaScript의 주요 용도에는 클라이언트 상호 작용, 양식 검증 및 비동기 통신이 포함됩니다. 1) DOM 운영을 통한 동적 컨텐츠 업데이트 및 사용자 상호 작용; 2) 사용자가 사용자 경험을 향상시키기 위해 데이터를 제출하기 전에 클라이언트 확인이 수행됩니다. 3) 서버와의 진실한 통신은 Ajax 기술을 통해 달성됩니다.

JavaScript 엔진 이해 : 구현 세부 사항Apr 17, 2025 am 12:05 AM

보다 효율적인 코드를 작성하고 성능 병목 현상 및 최적화 전략을 이해하는 데 도움이되기 때문에 JavaScript 엔진이 내부적으로 작동하는 방식을 이해하는 것은 개발자에게 중요합니다. 1) 엔진의 워크 플로에는 구문 분석, 컴파일 및 실행; 2) 실행 프로세스 중에 엔진은 인라인 캐시 및 숨겨진 클래스와 같은 동적 최적화를 수행합니다. 3) 모범 사례에는 글로벌 변수를 피하고 루프 최적화, Const 및 Lets 사용 및 과도한 폐쇄 사용을 피하는 것이 포함됩니다.

Python vs. JavaScript : 학습 곡선 및 사용 편의성Apr 16, 2025 am 12:12 AM

Python은 부드러운 학습 곡선과 간결한 구문으로 초보자에게 더 적합합니다. JavaScript는 가파른 학습 곡선과 유연한 구문으로 프론트 엔드 개발에 적합합니다. 1. Python Syntax는 직관적이며 데이터 과학 및 백엔드 개발에 적합합니다. 2. JavaScript는 유연하며 프론트 엔드 및 서버 측 프로그래밍에서 널리 사용됩니다.

Python vs. JavaScript : 커뮤니티, 라이브러리 및 리소스Apr 15, 2025 am 12:16 AM

Python과 JavaScript는 커뮤니티, 라이브러리 및 리소스 측면에서 고유 한 장점과 단점이 있습니다. 1) Python 커뮤니티는 친절하고 초보자에게 적합하지만 프론트 엔드 개발 리소스는 JavaScript만큼 풍부하지 않습니다. 2) Python은 데이터 과학 및 기계 학습 라이브러리에서 강력하며 JavaScript는 프론트 엔드 개발 라이브러리 및 프레임 워크에서 더 좋습니다. 3) 둘 다 풍부한 학습 리소스를 가지고 있지만 Python은 공식 문서로 시작하는 데 적합하지만 JavaScript는 MDNWebDocs에서 더 좋습니다. 선택은 프로젝트 요구와 개인적인 이익을 기반으로해야합니다.

C/C에서 JavaScript까지 : 모든 것이 어떻게 작동하는지Apr 14, 2025 am 12:05 AM

C/C에서 JavaScript로 전환하려면 동적 타이핑, 쓰레기 수집 및 비동기 프로그래밍으로 적응해야합니다. 1) C/C는 수동 메모리 관리가 필요한 정적으로 입력 한 언어이며 JavaScript는 동적으로 입력하고 쓰레기 수집이 자동으로 처리됩니다. 2) C/C를 기계 코드로 컴파일 해야하는 반면 JavaScript는 해석 된 언어입니다. 3) JavaScript는 폐쇄, 프로토 타입 체인 및 약속과 같은 개념을 소개하여 유연성과 비동기 프로그래밍 기능을 향상시킵니다.

JavaScript 엔진 : 구현 비교Apr 13, 2025 am 12:05 AM

각각의 엔진의 구현 원리 및 최적화 전략이 다르기 때문에 JavaScript 엔진은 JavaScript 코드를 구문 분석하고 실행할 때 다른 영향을 미칩니다. 1. 어휘 분석 : 소스 코드를 어휘 단위로 변환합니다. 2. 문법 분석 : 추상 구문 트리를 생성합니다. 3. 최적화 및 컴파일 : JIT 컴파일러를 통해 기계 코드를 생성합니다. 4. 실행 : 기계 코드를 실행하십시오. V8 엔진은 즉각적인 컴파일 및 숨겨진 클래스를 통해 최적화하여 Spidermonkey는 유형 추론 시스템을 사용하여 동일한 코드에서 성능이 다른 성능을 제공합니다.

브라우저 너머 : 실제 세계의 JavaScriptApr 12, 2025 am 12:06 AM

실제 세계에서 JavaScript의 응용 프로그램에는 서버 측 프로그래밍, 모바일 애플리케이션 개발 및 사물 인터넷 제어가 포함됩니다. 1. 서버 측 프로그래밍은 Node.js를 통해 실현되며 동시 요청 처리에 적합합니다. 2. 모바일 애플리케이션 개발은 재교육을 통해 수행되며 크로스 플랫폼 배포를 지원합니다. 3. Johnny-Five 라이브러리를 통한 IoT 장치 제어에 사용되며 하드웨어 상호 작용에 적합합니다.

Next.js (백엔드 통합)로 멀티 테넌트 SAAS 애플리케이션 구축Apr 11, 2025 am 08:23 AM

일상적인 기술 도구를 사용하여 기능적 다중 테넌트 SaaS 응용 프로그램 (Edtech 앱)을 구축했으며 동일한 작업을 수행 할 수 있습니다. 먼저, 다중 테넌트 SaaS 응용 프로그램은 무엇입니까? 멀티 테넌트 SAAS 응용 프로그램은 노래에서 여러 고객에게 서비스를 제공 할 수 있습니다.

See all articles

핫 AI 도구

Undresser.AI Undress

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

AI Clothes Remover

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

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

AI 옷 제거제

AI Hentai Generator

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

뜨거운 도구

메모장++7.3.1

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

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

SecList

SecLists는 최고의 보안 테스터의 동반자입니다. 보안 평가 시 자주 사용되는 다양한 유형의 목록을 한 곳에 모아 놓은 것입니다. SecLists는 보안 테스터에게 필요할 수 있는 모든 목록을 편리하게 제공하여 보안 테스트를 더욱 효율적이고 생산적으로 만드는 데 도움이 됩니다. 목록 유형에는 사용자 이름, 비밀번호, URL, 퍼징 페이로드, 민감한 데이터 패턴, 웹 셸 등이 포함됩니다. 테스터는 이 저장소를 새로운 테스트 시스템으로 간단히 가져올 수 있으며 필요한 모든 유형의 목록에 액세스할 수 있습니다.