[TOC] # 1. 事件三要素 1. 事件源：触发(被)事件的元素 2. 事件类型：事件的触发方式(例如鼠标点击或键盘点击) 3. 事件处理程序：事件触发后要执行的代码(函数形式) # 2. 注册事件/移除事件三方式 ```js var box = document.getElementById('box'); // 注册方式1 box.onclick = function () { console.log('点击后执行'); }; // 移除方式1 box.onclick = null; // 注册方式2 box.addEventListener('click', eventCode, false); // 移除方式2 box.removeEventListener('click', eventCode, false); // 注册方式3 box.attachEvent('onclick', eventCode); // 移除方式3 box.detachEvent('onclick', eventCode); function eventCode() { console.log('点击后执行'); } ``` # 3. 为标签绑定任何事件（兼容处理） ```js // 可以为标签添加任何一种事件 function addAnyEventListener(element, eventType, fn) { if (element.addEventListener) { // 需要判断浏览器是否支持当前的事件类型 element.addEventListener(eventType, fn, false); } else if (element.attachEvent){ element.attachEvent('on' + eventType,fn); } else { element['on'+eventType] = fn; // 相当于给对象element赋值fn，如ele = {eventType: fun} } } // 可以为标签移除任何一种事件 function removeAnyEventListener(element, eventType, fn) { if (element.removeEventListener) { element.removeEventListener(eventType, fn, false); } else if (element.detachEvent) { element.detachEvent('on' + eventType, fn); } else { element['on'+eventType] = null; } } ``` # 4. 事件的三个阶段 1. 捕获阶段 2. 当前目标阶段 3. 冒泡阶段 event.eventPhase属性可以查看事件触发时所处的阶段 **`事件的三个阶段.html`** ```js <pre> 事件共有三个阶段： 1.事件捕获阶段 :从外向内 2.事件目标阶段 :最开始选择的那个 3.事件冒泡阶段 : 从里向外 addEventListener(event, function, useCapture)中的useCaptrue就是设置捕获阶段或冒泡阶段的。 通过e.eventPhase这个属性可以知道当前的事件是什么阶段的： 如果这个属性的值是: 1---->捕获阶段 2---->目标阶段 3---->冒泡 一般默认都是冒泡阶段,很少用捕获阶段 冒泡阶段:从里向外 捕获阶段:从外向内 </pre> <script type="text/javascript"> document.getElementById("div1").onclick = function(e) { console.log(e.eventPhase); } document.getElementById("div1").onclick = function(e) { console.log(e.eventPhase); } document.getElementById("div1").onclick = function(e) { console.log(e.eventPhase); } </script> ```