기능 이벤트 요약

jacklove원래의: 2018-05-21 15:42:341477검색

함수를 학습하다 보면 많은 함수 이벤트를 접하게 됩니다. 이 글에서는 이에 대해 자세히 설명하겠습니다.

이벤트란 무엇인가요?

JavaScript와 HTML 간의 상호 작용은 이벤트를 통해 이루어집니다. 이벤트는 문서나 브라우저 창에서 발생하는 특정 상호 작용 순간입니다. 이벤트가 발생할 때 적절한 코드가 실행되도록 리스너(또는 핸들러)를 사용하여 이벤트를 예약할 수 있습니다. 전통적인 소프트웨어 엔지니어링에서 관찰자 패턴으로 알려진 이 모델은 페이지 동작(JavaScript)과 페이지 모양(HTML 및 CSS) 간의 느슨한 결합을 지원합니다.

이벤트 흐름

이벤트 흐름은 페이지에서 이벤트가 수신되는 순서를 설명합니다. 다음 코드를 가정해 보세요.

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>Document</title></head><body>
    <div id="div1"></div></body></html>

div를 클릭하세요. 이 클릭은 div에서만 발생하는 것이 아니라 해당 상위 컨테이너 본문도 클릭됩니다. 그렇다면 누가 먼저 클릭을 했고, 이벤트가 어떻게 확산됐을까요? 이벤트 스트림은 이러한 이벤트 수신 순서를 설명합니다.

IE 이벤트 흐름(이벤트 버블링)

IE 이벤트 흐름은 이벤트 버블링이라고도 합니다. 즉, 이벤트는 처음에 가장 구체적인 요소(문서에서 가장 깊은 중첩 레이어가 있는 노드)에 의해 수신된 다음 다음으로 전파됩니다. 덜 구체적인 요소를 단계별로 구체적인 노드(문서)로 만듭니다.
위 코드를 예로 들면, div 요소를 클릭하면 다음과 같은 순서로 클릭 이벤트가 전파됩니다.

1.<div>
2.<body>
3.<html>
4.document

즉, 클릭 이벤트는 div 요소에서 먼저 발생하고, 요소는 우리가 클릭한 요소이며, 클릭 이벤트는 DOM 트리 위로 전파되어 문서 객체로 전파될 때까지 노드의 각 수준에서 발생합니다.

모든 최신 브라우저는 이벤트 버블링을 지원하지만 몇 가지 차이점이 있습니다. IE5.5 및 이전 버전의 이벤트 버블링은 html 요소를 건너뛰고 본문에서 문서로 직접 이동합니다. IE9, Firefox, Chrome 및 Safari는 이벤트를 창 개체까지 버블링합니다. (기존 IE 브라우저는 이벤트 버블링만 지원합니다.)

이벤트 캡처

이벤트 캡처의 개념은 덜 구체적인 노드가 이벤트를 더 일찍 수신하고 특정 노드가 마지막에 이벤트를 수신해야 한다는 것입니다. 이는 이벤트 버블링의 정반대입니다. 위의 예를 다시 살펴보면 div를 클릭합니다. , 이벤트 캡처의 이벤트 트리거 순서는 다음과 같습니다.

1.document
2.<html>
3.<body>
4.<div>

이벤트 캡처 프로세스 중에 문서 객체는 먼저 클릭 이벤트를 수신한 다음 이벤트가 실제 대상에 도달할 때까지 DOM 트리를 따라 아래쪽으로 전파됩니다. 이벤트.

IE9, Firefox, Chrome, Safari 및 Opera는 모두 이벤트 캡처를 지원합니다. DOM2 수준 이벤트 사양에서는 이벤트가 문서 개체에서 전파되기 시작해야 한다고 요구하지만 이러한 브라우저는 창 개체에서 이벤트 캡처를 시작합니다.

DOM 이벤트 흐름

DOM 레벨 2 이벤트에 지정된 이벤트 흐름에는 이벤트 캡처 단계, 대상 단계 및 이벤트 버블링 단계의 세 단계가 포함됩니다. 가장 먼저 일어나는 일은 이벤트 캡처로, 이벤트를 가로챌 수 있는 기회를 제공합니다. 그런 다음 실제 대상이 이벤트를 수신합니다. 마지막 단계는 이벤트에 응답할 수 있는 버블링 단계입니다.

DOM 이벤트 흐름에서 실제 대상은 캡처 단계 동안 이벤트를 수신하지 않습니다. 이는 캡처 단계 동안 문서에서 HTML, 본문까지의 이벤트가 중지됨을 의미합니다. 다음 단계는 대상 단계에 있으므로 이벤트는 div에서 발생하고 이벤트 처리에서 버블링 단계의 일부로 간주됩니다. 그런 다음 버블링 단계가 발생하고 이벤트가 문서로 다시 전달됩니다.
그러나 실제로 IE9, Firefox, Chrome, Safari 및 Opera9.5 이상에서는 캡처 단계 중에 이벤트 개체에서 이벤트를 트리거합니다. 결과적으로 대상 개체에 대한 이벤트를 조작할 수 있는 기회가 두 번 있습니다. (IE8 이하 버전은 DOM 이벤트 스트리밍을 지원하지 않습니다.)

이벤트 핸들러

이벤트는 사용자나 브라우저 자체가 수행하는 작업입니다. 클릭, 로드, 마우스 오버 등은 모두 이벤트 이름입니다. 이벤트에 응답하는 함수를 이벤트 핸들러(이벤트 리스너)라고 합니다. 이벤트 핸들러의 이름은 "on"으로 시작하므로 클릭 이벤트에 대한 이벤트 핸들러는 onclick이고 로드 이벤트에 대한 핸들러는 onload입니다. 이벤트 처리기를 지정하는 방법에는 여러 가지가 있습니다.

HTML 이벤트 핸들러

요소가 지원하는 각 이벤트는 해당 이벤트 핸들러와 동일한 이름을 가진 HTML 속성을 사용하여 지정할 수 있습니다. 이 속성의 값은 실행될 수 있는 JavaScript 코드여야 합니다. 예:

<button id="myButton" onclick="alert(&#39;Clicked&#39;)">Click Me</button>//定义了一个按钮，点击时会显示一个警告框；

HTML에서 이벤트 핸들러를 정의하면 수행할 특정 작업이 포함될 수 있거나 페이지의 다른 곳에 정의된 스크립트를 호출할 수 있습니다. 예:

<button id="myButton" onclick="showMsg()">Click Me</button>  //点击按钮就会调用showMsg()函数；<script>
    function showMsg() {
      alert(&#39;Hello world!&#39;)
}</script>

HTML을 통해 이벤트 핸들러를 지정하면 두 가지 단점이 있습니다. 1. HTML 요소가 페이지에 나타나자마자 사용자가 해당 이벤트를 트리거할 수 있지만 이때 이벤트 핸들러에는 실행 조건이 없을 수 있기 때문에 시간 차이 문제가 있습니다. 2. HTML 및 JavaScript 코드는 Coupling과 밀접하게 관련되어 있으며, 이벤트 핸들러를 변경하려면 HTML 코드와 JavaScript 코드를 변경해야 합니다.

DOM 레벨 0 이벤트 핸들러

JavaScript를 통해 이벤트 핸들러를 지정하는 전통적인 방법은 이벤트 핸들러 속성에 함수를 할당하는 것입니다. 각 요소에는 자체 이벤트 핸들러 속성이 있으며, 이는 일반적으로 onclick과 같이 모두 소문자입니다. 이 속성의 값을 함수로 설정하면 이벤트 핸들러를 지정할 수 있습니다. 예:

 var btn = document.getElementById(&#39;myButton&#39;);
  btn.onclick = function() {
    alert("Clicked")
  }

使用DOM0级方法指定的事件处理程序被认为是元素的方法。因此，这时候事件处理程序是在元素的作用域中运行；换句话说，程序中的this引用当前元素。
也可以通过DOM0级方法删除事件处理程序，示例：

btn.onclick = null;   //删除事件处理程序；
DOM2级事件处理程序

DOM2级事件定义了两个方法，用于处理指定和删除事件处理程序的操作：addEventListener()和removeEventListener()。所有DOM节点都包含这两个方法，并且它们都接受3个参数：要处理的事件名、作为事件处理程序的函数和一个布尔值。最后的布尔值如果是true，表示在捕获阶段调用事件处理程序；如果是false，表示在冒泡阶段调用事件处理程序。示例：

 var btn = document.getElementById(&#39;myButton&#39;);  //为按钮添加了click事件和处理程序；
  btn.addEventListener(&#39;click&#39;,function() {
    alert(this.id)
  }，false)

与DOM0级方法一样，这里添加的事件处理程序也是在其依附的元素的作用域中运行的。使用DOM2级方法添加事件处理程序可以添加多个事件处理程序，示例：

 var btn = document.getElementById(&#39;myButton&#39;);  //为按钮添加了多个click事件和处理程序；
  btn.addEventListener(&#39;click&#39;,function() {
    alert(this.id);
  }，false);  var btn = document.getElementById(&#39;myButton&#39;);  ；
  btn.addEventListener(&#39;click&#39;,function() {
    alert(&#39;hello world!&#39;);
  }，false);

这里为按钮添加了2个事件处理程序。这两个事件处理程序会按照添加它们的顺序触发。
通过addEventListener()添加的事件处理程序只能用removeEventListener()来移除；移除时传入的参数与添加处理程序时使用的参数相同，意味着addEventListener()添加的匿名函数无法移除：

//该代码无法运行；btn.removeEventListener(&#39;click&#39;,function() {
  alert(this.id);
}，false);
//该代码工作正常；//removeEventListener()和addEventListener()使用了相同函数；var btn = document.getElementById(&#39;myButton&#39;); 
  var function handler() {
    alert(this.id);
  }
btn.addEventListener(&#39;click&#39;,handler,false);
btn.removeEventListener(&#39;click&#39;,handler,false);

本篇对js事件进行了总结，更多相关内容请关注php中文网。

기능 이벤트 요약

관련 기사