目录
- 一、添加事件监听（addEventListener()）
- 二、移除事件监听（removeEventListener()）
- 三、键盘事件
- 四、事件委托/代理/委派(srcElement||target)
一、添加事件监听（addEventListener()）
addEventListener()是为事件添加一个事件监听。当该对象触发指定的事件时，指定的回调函数就会被执行。事件目标可以是一个文档上的元素 Element、Document 和 Window，也可以是任何支持事件的对象。
addEventListener() 的工作原理是将实现 EventListener 的函数或对象添加到调用它的 EventTarget 上的指定事件类型的事件侦听器列表中。如果要绑定的函数或对象已经被添加到列表中，该函数或对象不会被再次添加。
语法格式：
A.addEventListener(事件（不用加on）,函数名称,true/false );eg:
input.addEventListener('click',function(){alert(1);
})
input.addEventListener('click',function(){alert(2);
})
一般情况下不要加第三个参数
有兼容性问题
true代表是事件捕获的情况下执行
false是事件冒泡的情况下执行
二、移除事件监听（removeEventListener()）
removeEventListener()
语法格式：
A.removeEventListener(事件名称（不用加on），函数名称)
eg:
function a(){alert(1);
}
function b(){alert(2);
}
A.removeEventListener('click',a);
精准解除事件监听
三、键盘事件
在 JavaScript 中，当用户操作键盘时，会触发键盘事件，键盘事件主要包括下面 3 种类型：
- keydown：在键盘上按下某个键时触发。如果按住某个键，会不断触发该事件，但是 Opera 浏览器不支持这种连续操作。该事件处理函数返回 false 时，会取消默认的动作（如输入的键盘字符，在 IE 和 Safari 浏览器下还会禁止keypress 事件响应）。
- keypress：按下某个键盘键并释放时触发。如果按住某个键，会不断触发该事件。该事件处理函数返回 false 时，会取消默认的动作（如输入的键盘字符）。
- keyup：释放某个键盘键时触发。该事件仅在松开键盘时触发一次，不是一个持续的响应状态。
docunment.onkeydown = function(){alert(1);
}
docunment.onkeyup = function(){alert(2);
}
/*效果键盘按下，弹窗显示1，抬起，显示2
*/
键盘事件属性
键盘定义了很多属性，如下表所示。利用这些属性可以精确控制键盘操作。键盘事件属性一般只在键盘相关事件发生时才会存在于事件对象中，但是 ctrlKey 和 shiftKey 属性除外，因为它们可以在水保事件中存在。例如，当按下 Ctrl 或Shift 键时单击鼠标操作。
| 属性 | 说明 |
|---|---|
| keyCode | 该属性包含键盘中对应键位的键值 |
| charCode | 该属性包含键盘中对应键位的 Unicode 编码，仅 DOM 支持 |
| target | 发生事件的节点（包含元素），仅 DOM 支持 |
| srcElement | 发生事件的元素，仅 IE 支持 |
| shiftKey | 是否按下 Shift 键，如果按下返回 true，否则为false |
| ctrlKey | 是否按下 Ctrl 键，如果按下返回 true，否则为false |
| altKey | 是否按下 Alt 键，如果按下返回 true，否则为false |
| metaKey | 是否按下 Mtea 键，如果按下返回 true，否则为false，仅 DOM 支持 |
某些键的可用性不是很正确，如 PageUp 和 Home 键等。不过常用功能键和字符键都是比较稳定的。
| 键位 | 码值 | 键位 | 码值 |
|---|---|---|---|
| 0~9（数字键） | 48~57 | A~Z（字母键） | 65~90 |
| Backspace（退格键） | 8 | Tab（制表键） | 9 |
| Enter（回车键） | 13 | Space（空格键） | 32 |
| Left arrow（左箭头键） | 37 | Top arrow（上箭头键） | 38 |
| Right arrow（右箭头键） | 39 | Down arrow（下箭头键） | 40 |
var box = document.getElementById("box"); // 获取页面元素的引用指针box.style.position = "absolute"; // 色块绝对定位box.style.width = "20px"; // 色块宽度box.style.height = "20px"; // 色块高度box.style.backgroundColor = "red"; // 色块背景document.onkeydown = keyDown;//在Document对象中注册keyDown事件处理函数function keyDown(event){ // 方向键控制元素移动函数var event = event || window.event; // 标准化事件对象switch(event.keyCode){ // 获取当前按下键盘键的编码case 37 : // 按下左箭头键，向左移动5个像素box.style.left = box.offsetLeft - 5 + "px";break;case 39 : // 按下右箭头键，向右移动5个像素box.style.left = box.offsetLeft + 5 + "px";break;case 38 : // 按下上箭头键，向上移动5个像素box.style.top = box.offsetTop - 5 + "px";break;case 40 : // 按下下箭头键，向下移动5个像素box.style.top = box.offsetTop + 5 + "px";break;}return false}/*首先获取页面元素，通过 CSS 脚本控制元素绝对定位、大小和背景色。然后在 document 对象上注册鼠标按下事件类型
处理函数，在事件回调函数 keyDown() 中侦测当前按下的方向键，并决定定位元素在窗口中的位置。其中元素的 offsetLeft
和 offsetTop 属性可以存取它在页面中的位置。
键盘响应顺序
当按下键盘时，会连续触发多个事件，它们将按如下顺序发生。
-
对于字符键来说，键盘事件的响应顺序：keydown → keypress → keyup。
-
对于非字符键（如功能键或特殊键）来说，键盘事件的相应顺序：keydown → keyup。
-
如果按下字符键不放，则 keydown 和 keypress 事件将逐个持续发生，直至松开按键。
-
如果按下非字符键不放，则只有 keydown 事件持续发生，直至松开按键。
四、事件委托/代理/委派(srcElement||target)
事件委托/代理就是给予父级元素一个事件，然后父级元素可以找到子级事件源。通过判断事件源的className、nodeName、ID等找到我妈需要的事件源，给予JavaScript脚本。最大的好处是可以控制未来的元素（动态生成的元素）
语法格式：
event.target(常用)
event.srcElement
有兼容性问题：
- target IE认为是undefined
- srcElement 低版本火狐认为是undefined
所以为了更好的兼容所有浏览器，可以采用以下方法：
Target = event.target || event.srcElement
样例代码
document.documentElement.onclick = function(){ //console.log(event.target); //console.log(event.srcElement); var iTarget = event.target || event.srcElement; if(iTarget.className == 'div'){ iTarget.style.background = 'red'; } else if(iTarget.className =='div1'){ iTarget.style.background = 'green';} }; for(var i = 0;i < 10;i++){ var oDiv = document.createElement('div'); if(i<5){oDiv.className = 'div';} else{oDiv.className = 'div1'; } document.body.appendChild(oDiv); };
