事件委托
利用事件冒泡机制，委托事件给父级元素，比监听每个子元素的事件性能好。
html
<div style="height: 100px;">
<ul>
<li>1</li>
<li>2</li>
</ul>
</div>
js
function foo(e) {
if (e.target.nodeName.toLowerCase() === 'li') {
e.target.style.background = '#000';
}
}
document.querySelector('div').addEventListener('click', foo)
监听div内容修改
1.DOM2级中的mutation(变动事件)里的 DOMSubtreeModified 可以监听div内容修改
document.querySelector('.element').addEventListener('DOMSubtreeModified', function(){
alert(this);
});
2.MutationObserver构造函数可以监听div内容修改
//兼容性
var MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver;
var node = document.getElementById('node'); //配置信息
var config = {
subtree: true, //监听目标节点包括后代节点
childList: true, //监听目标节点的子节点是否增加或者移除
attributes: true, //监听目标节点的attributes属性的增删改
characterData: true //如果监听的目标节点是文本节点，同时监听节点的文本内容
} //回调函数
var func = function(re) {
alert("success");
console.log(re);
} //生成实例
var server = new MutationObserver(func); //调用配置信息和回调函数
server.observe(node, config);
事件监听会传入一个event对象。
1.当事件绑定在触发的元素上，触发元素时，event.currentTarget 和 event.target 和 this 都指向这个元素。
例：
var btn = document.getElementById("nowBtn");
btn.onclick = function(e) {
console.log(e.currentTarget === this); //true
console.log(e.target === this); //true
}
如果绑定在当前元素的父级元素，触发元素时，event.currentTarget 和 this 都指向这个父级元素。 event.target 则指向触发的元素。
例：
document.body.onclick = function(e) {
console.log(event.currentTarget === document.body); //true
console.log(this === document.body); //true
console.log(event.target === document.getElementById("nowBtn")); //true
}
2.需要绑定多个事件时，可以利用event.type属性
var btn = document.getElementById('myBtn');
var handler = function(e) {
switch(e.type) {
case "click":
console.log("click");
break;
case "mouseover":
event.target.style.backgroundColor = "#333";
break;
case "mouseout":
event.target.style.backgroundColor = "#000";
break;
}
}
btn.onclick = handler;
btn.addEventListener("mouseover",handler);
btn.onmouseover = handler;
3.event.preventDefault()可以阻止元素的默认行为。
如<a>元素默认行为是导航到href的URL，用事件处理就可以取消它(需要event.cancelable为true，默认为true)。
var link = document.getElementById('myLink');
link.onclick = function(e) {
e.preventDefault();
};
4.event.stopPropagation()用来阻止捕获及冒泡。
var btn = document.getElementById('myBtn');
btn.onclick = function(e) {
console.log("click");
event.stopPropagation(); //执行完后阻止冒泡到body的click事件
};
document.body.onclick = function(e) {
console.log('body click');
};
keyCode可以直接转换成大写字母和数字
回车等特殊键无法转换，符号转换错误。
var key;
document.getElementById('element').addEventListener('keydown', function(e){
key = e.keyCode;
})
key = String.fromCharCode(key);
HTML5事件
1.监听contextmenu事件用preventDefault()方法阻止冒泡后，可以阻止右键弹出的上下文菜单。这个事件是冒泡事件，监听document可以阻止所有元素的contextmenu事件。
2. haschange事件可以监听URL参数变化（主要用于Ajax），这个事件只能添加给window对象。此时的 event 会多出 oldURL 和 newURL，例：
window.addEventListener('haschange',function(e){
console.log(e.oldURL);
console.log(e.newURL);
})