이 기사의 운영 환경: Windows 7 시스템, javascript 버전 1.8.5, DELL G3 컴퓨터

JavaScript 이벤트의 해석

1. 이벤트의 기본 개념

이벤트는 웹 페이지를 열거나 그 이후에 문서나 브라우저에서 발생하는 특정 상호 작용 순간을 나타냅니다. 브라우저가 로드됩니다. load 이벤트가 트리거됩니다. 마우스를 요소 위로 가져가면 hover 이벤트가 트리거됩니다. code>click 이벤트 등이 트리거됩니다. load 事件，当鼠标悬浮于某一个元素上时会触发 hover 事件，当鼠标点击某一个元素时会触发 click 事件等等。

事件处理就是当事件被触发后，浏览器响应这个事件的行为，而这个行为所对应的代码即为事件处理程序。

2. 事件操作：监听与移除监听

2.1 监听事件

浏览器会根据一些事件作出相对应的事件处理，事件处理的前提是需要监听事件，监听事件的方法主要有以下三种：

2.1.1 HTML 内联属性

即在 HTML 元素里直接填写与事件相关的属性，属性值为事件处理程序。示例如下：

<button></button>

로그인 후 복사

onclick 对应着 click 事件，所以当按钮被点击后，便会执行事件处理程序，即控制台输出 You clicked me!。

不过我们需要指出的是，这种方式将 HTML 代码与 JavaScript 代码耦合在一起，不利于代码的维护，所以应该尽量避免使用这样的方式。

2.1.2 DOM 属性绑定

通过直接设置某个 DOM 节点的属性来指定事件和事件处理程序，上代码：

const btn = document.getElementById("btn");
btn.onclick = function(e) {
    console.log("You clicked me!");
};

로그인 후 복사

上面示例中，首先获得 btn 这个对象，通过给这个对象添加 onclick 属性的方式来监听 click 事件，这个属性值对应的就是事件处理程序。这段程序也被称作 DOM 0 级事件处理程序。

2.1.3 事件监听函数

标准的事件监听函数如下：

const btn = document.getElementById("btn");
btn.addEventListener("click", () => {
    console.log("You clicked me!");
}, false);

로그인 후 복사

上面的示例表示先获得表示节点的 btn 对象，然后在这个对象上面添加了一个事件监听器，当监听到 click 事件发生时，则调用回调函数，即在控制台输出 You clicked me!。addEventListener 函数包含了三个参数 false，第三个参数的含义在后面的事件触发三个阶段之后再讲解。这段程序也被称作 DOM 2 级事件处理程序。IE9+、FireFox、Safari、Chrome 和 Opera 都是支持 DOM 2 级事件处理程序的，对于 IE8 及以下版本，则用 attacEvent() 函数绑定事件。

所以我们可以写一段具有兼容性的代码：

function addEventHandler(obj, eventName, handler) {
    if (document.addEventListener) {
        obj.addEventListener(eventName, handler, false);
    }
    else if (document.attachEvent) {
        obj.attachEvent("on" + eventName, handler);
    }    
    else {
        obj["on" + eventName] = handler;
    }
}

로그인 후 복사

2.2 移除事件监听

在为某个元素绑定了一个事件后，如果想接触绑定，则需要用到 removeEventListener 方法。看如下例子：

const handler = function() {
    // handler logic
}
const btn = document.getElementById("btn");

btn.addEventListener("click", handler);
btn.removeEventListener("click", handler);

로그인 후 복사

需要注意的是，绑定事件的回调函数不能是匿名函数，必须是一个已经被声明的函数，因为解除事件绑定时需要传递这个回调函数的引用。

同样，IE8 及以下版本也不支持上面的方法，而是用 detachEvent

이벤트 처리

는 이벤트가 트리거될 때 이벤트에 응답하는 브라우저의 동작이며, 이 동작에 해당하는 코드가

이벤트 핸들러

입니다. 2. 이벤트 작업: 모니터링 및 제거

JavaScript 이벤트란 무엇입니까? 2.1 이벤트 모니터링

이벤트 처리의 전제는 이벤트를 모니터링하는 세 가지 주요 방법입니다. : ：

2.1.1 HTML 인라인 속성

즉, HTML 요소에 이벤트 관련 속성을 직접 채우는 것이며, 속성 값이 이벤트 핸들러입니다. 예는 다음과 같습니다.

const handler = function() {
    // handler logic
}
const btn = document.getElementById("btn");

btn.attachEvent("onclick", handler);
btn.detachEvent("onclick", handler);

로그인 후 복사

onclick은 click 이벤트에 해당하므로 버튼을 클릭하면 이벤트 핸들러가 실행됩니다. 즉, 콘솔 출력 저를 클릭하셨습니다!. 그러나 이 방법은 HTML 코드와 JavaScript 코드를 결합하는 방식이므로 코드 유지 관리에 도움이 되지 않으므로 이 방법은 최대한 피해야 합니다.

2.1.2 DOM 속성 바인딩

DOM 노드의 속성을 직접 설정하여 이벤트 및 이벤트 핸들러를 지정합니다. 위 코드:

function removeEventHandler(obj, eventName, handler) {
    if (document.removeEventListener) {
        obj.removeEventListener(eventName, handler, false);
    }
    else if (document.detachEvent) {
        obj,detachEvent("on" + eventName, handler);
    }
    else {
        obj["on" + eventName] = null;
    }
}

로그인 후 복사

위 예에서는 먼저 Add를 통해 btn 객체를 얻습니다. 이 속성의 값은 이벤트 핸들러에 해당합니다. 이 프로그램은 DOM 레벨 0 이벤트 핸들러라고도 합니다.

2.1.3 이벤트 리스닝 함수

표준 이벤트 리스닝 함수는 다음과 같습니다.

<div>
    <p>你猜，目标在这里还是<span>那里</span>。</p>
</div>

로그인 후 복사

위의 예는 노드를 나타내는 btn 객체를 먼저 얻은 후 이벤트 리스너를 추가하는 것을 나타냅니다. click 이벤트가 모니터링되면 콜백 함수가 호출됩니다. 즉, You clicked me!가 콘솔에 출력됩니다. addEventListener 함수에는 false라는 세 가지 매개변수가 포함되어 있습니다. 세 번째 매개변수의 의미는 이벤트 트리거의 세 단계 후에 설명됩니다. 이 프로그램은 DOM 레벨 2 이벤트 핸들러라고도 합니다. IE9+, FireFox, Safari, Chrome 및 Opera는 모두 DOM 레벨 2 이벤트 핸들러를 지원합니다. IE8 이하에서는 attacEvent() 함수를 사용하여 이벤트를 바인딩합니다.

🎜따라서 호환성이 있는 코드 조각을 작성할 수 있습니다. 🎜

// HTML
<ul id="list">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
</ul>

// JavaScript
var list = document.getElementById("list");
list.addEventListener("click", function(e) {
    console.log(e.target);
});

로그인 후 복사

🎜2.2 이벤트 리스너 제거🎜🎜이벤트를 요소에 바인딩한 후 바인딩에 연결하려면

removeEventListener< /code>를 사용해야 합니다. 방법. 다음 예를 보세요. 🎜<div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">const ele = document.getElementById(&quot;ele&quot;);
ele.addEventListener(&quot;click&quot;, function() {
    console.log(&quot;ele-click&quot;);
}, false);

document.addEventListener(&quot;click&quot;, function() {
    console.log(&quot;document-click&quot;);
}, false);</pre><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div>🎜바인딩된 이벤트의 콜백 함수는 익명 함수가 될 수 없지만 이벤트 바인딩을 해제할 때 이 콜백 함수의 참조를 전달해야 하기 때문에 선언된 함수여야 합니다. 🎜🎜마찬가지로 IE8 이하 버전에서는 위의 방법을 지원하지 않으므로 대신 <code>detachEvent

를 사용하세요. 🎜

const ele = document.getElementById("ele");
ele.addEventListener("click", function(e) {
    console.log("ele-click");
    e.stopPropagation(); // 阻止事件冒泡
}, false);

document.addEventListener("click", function(e) {
    console.log("document-click");
}, false);

로그인 후 복사

🎜마찬가지로 호환되는 이벤트 삭제 함수를 작성할 수 있습니다: 🎜

function preventBubble(e) {
    if (!e) {
        const e = window.event;
    }
    e.cancelBubble = true;
    if (e.stopPropagation) {
        e.stopPropagation();
    }
}

로그인 후 복사

🎜3. 이벤트 트리거 프로세스🎜🎜이벤트 흐름은 페이지가 이벤트를 수신하는 순서를 설명합니다. 최신 브라우저(IE9+, FireFox, Safari, Chrome 및 Opera 등을 포함하여 IE6-IE8을 제외한 브라우저 참조)의 이벤트 흐름에는 캡처 단계, 대상 단계 및 버블링 단계의 세 가지 프로세스가 포함되어 있습니다. 이 프로세스를 보여줍니다. 🎜🎜🎜🎜🎜이 세 가지 프로세스는 아래에서 자세히 설명됩니다. 🎜🎜3.1 캡처 단계🎜🎜마우스 클릭, 호버 등의 DOM 요소에 대한 작업을 수행하면 이벤트가 DOM 요소로 전달됩니다. 이 이벤트는 Window에서 시작하여 docuemnt, html, body 및 등등. 대상 요소에 도달할 때까지 하위 노드를 통과하고 Window에서 대상 요소의 상위 노드에 도달하는 과정을 🎜캡처 단계🎜라고 합니다. 이때는 아직 대상 노드에 도달하지 않았습니다. 🎜🎜3.2 대상 단계 🎜🎜캡처 단계가 끝나면 이벤트가 대상 노드의 상위 노드에 도달하고, 최종적으로 대상 노드에 도달하여 대상 노드에서 이벤트를 트리거합니다. 🎜🎜이벤트에 의해 트리거된 대상 노드는 가장 낮은 노드라는 점에 유의해야 합니다. 예를 들어 다음 예는 다음과 같습니다. 🎜

<div>
    <p>你猜，目标在这里还是<span>那里</span>。</p>
</div>

로그인 후 복사

当我们点击“那里”的时候，目标节点是，点击“这里”的时候，目标节点是，而当我们点击区域之外，区域之内时，目标节点就是。

3.3 冒泡阶段

当事件到达目标节点之后，就会沿着原路返回，这个过程有点类似水泡从水底浮出水面的过程，所以称这个过程为冒泡阶段。

针对这个过程，wilsonpage 做了一个 DEMO，可以非常直观地查看这个过程。

现在再看 addEventListener(eventName, handler, useCapture) 函数。第三个参数是 useCapture，代表是否在捕获阶段进行事件处理，如果是 false，则在冒泡阶段进行事件处理，如果是 true，在捕获阶段进行事件处理，默认是 false。这么设计的主要原因是当年微软和 netscape 之间的浏览器战争打得火热，netscape 主张捕获方式，微软主张冒泡方式，W3C 采用了折中的方式，即先捕获再冒泡。

4、事件委托

上面我们讲了事件的冒泡机制，我们可以利用这一特性来提高页面性能，事件委托便事件冒泡是最典型的应用之一。

何谓“委托”？在现实中，当我们不想做某件事时，便“委托”给他人，让他人代为完成。JavaScript 中，事件的委托表示给元素的父级或者祖级，甚至页面，由他们来绑定事件，然后利用事件冒泡的基本原理，通过事件目标对象进行检测，然后执行相关操作。看下面例子：

// HTML
<ul id="list">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
</ul>

// JavaScript
var list = document.getElementById("list");
list.addEventListener("click", function(e) {
    console.log(e.target);
});

로그인 후 복사

上面的例子中，5 个列表项的点击事件均委托给了父元素 <ul id="list"></ul>。

先看看事件委托的可行性。有人会问，当事件不是加在某个元素上的，如何在这个元素上触发事件呢？我们就是利用事件冒泡的机制，事件流到达目标元素后会向上冒泡，此时父元素接收到事件流便会执行事件执行程序。有人又会问，被委托的父元素下面如果有很多子元素，怎么知道事件流来自于哪个子元素呢？这个我们可以从事件对象中的 target 属性获得。事件对象下面会详细讲解。

我们再来看看为什么需要事件委托。

减少事件绑定。上面的例子中，也可以分别给每个列表项绑定事件，但利用事件委托的方式不仅省去了一一绑定的麻烦，也提升了网页的性能，因为每绑定一个事件便会增加内存使用。
可以动态监听绑定。上面的例子中，我们对 5 个列表项进行了事件监听，当删除一个列表项时不需要单独删除这个列表项所绑定的事件，而增加一个列表项时也不需要单独为新增项绑定事件。

看了上面的例子和解释，我们可以看出事件委托的核心就是监听一个 DOM 中更高层、更不具体的元素，等到事件冒泡到这个不具体元素时，通过 event 对象的 target 属性来获取触发事件的具体元素。

5、阻止事件冒泡

事件委托是事件冒泡的一个应用，但有时候我们并不希望事件冒泡。比如下面的例子：

const ele = document.getElementById("ele");
ele.addEventListener("click", function() {
    console.log("ele-click");
}, false);

document.addEventListener("click", function() {
    console.log("document-click");
}, false);

로그인 후 복사

我们本意是当点击 ele 元素区域时显示 "ele-click"，点击其他区域时显示 "document-click"。但是我们发现点击 ele 元素区域时会依次显示 "ele-click" "document-click"。那是因为绑定在 ele 上的事件冒泡到了 document 上。想要解决这个问题，只需要加一行代码：

const ele = document.getElementById("ele");
ele.addEventListener("click", function(e) {
    console.log("ele-click");
    e.stopPropagation(); // 阻止事件冒泡
}, false);

document.addEventListener("click", function(e) {
    console.log("document-click");
}, false);

로그인 후 복사

我们还能用 e.cancelBubble = true 来替代 e.stopPropagation()。网上的说法是 cancelBubble 仅仅适用于 IE，而 stopPropagation 适用于其他浏览器。但根据我实验的结果，现代浏览器（IE9 及以上、Chrome、FF 等）均同时支持这两种写法。为了保险起见，我们可以采用以下代码：

function preventBubble(e) {
    if (!e) {
        const e = window.event;
    }
    e.cancelBubble = true;
    if (e.stopPropagation) {
        e.stopPropagation();
    }
}

로그인 후 복사

6、event 对象

Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。当一个事件被触发的时候，就会创建一个事件对象。

我们用下面的代码打印出事件对象：

<div id="list">
    <li>Item 1</li>
    <li>Item 2</li>
</div>
<script>
    var list = document.getElementById("list");
    list.addEventListener("click", function(e) {
        console.log(e);
    });
</script>

로그인 후 복사

chrome 49 的运行结果如下：

JavaScript 이벤트란 무엇입니까?

下面介绍一些比较常用的属性和方法。

target、 srcElement、 currentTarget 和 relatedTarget、fromElement、 toElement

target 与 srcElement 完全相同；
target은 이벤트를 트리거한 요소를 참조하고, currentTarget은 이벤트가 바인딩된 요소를 참조합니다.
관련Target: 이벤트의 대상 노드와 관련된 노드입니다. 마우스오버 이벤트의 경우 이 속성은 대상 노드 위로 이동할 때 마우스 포인터가 떠난 노드입니다. mouseout 이벤트의 경우 이 속성은 마우스 포인터가 대상을 떠날 때 들어가는 노드입니다.
이 속성은 다른 유형의 이벤트에는 유용하지 않습니다.
fromElement 및 toElement는 mouseover 및 mouseout 이벤트에만 유효합니다.

위의 예를 들어 설명을 위해 <li>Item 1</li> 时，target 就是 <li>Item 1</li> 元素，而 currentTarget 是 를 클릭하세요.