以下代码出自《DOM Enlightenment》一书
1.三种事件形式
<body onclick="alert('触发内联属性事件')">
<div>click me</div>
</body>
<script>
var div = document.querySelector('div');
div.onclick = function() {
alert("触发属性事件");
};
div.addEventListener('click', function() {
alert('触发addEventListener');
}, false);
</script>
2.事件流程
先捕获后冒泡
捕获：从树主干到分支
冒泡：从树分支到主干
<html>
<body>
<div>click me to start event flow</div>
</body>
</html>
<script>
// 捕获阶段 window
window.addEventListener('click', function() {
alert(1);
}, true); // 捕获阶段 document
document.addEventListener('click', function() {
alert(2);
}, true); // 捕获阶段 html
document.documentElement.addEventListener('click', function() {
alert(3);
}, true); // 捕获阶段 body
document.body.addEventListener('click', function() {
alert(4);
}, true); // 捕获阶段 div
document.querySelector('div').addEventListener('click', function() {
alert(5);
}, true); // 冒泡阶段 div
document.querySelector('div').addEventListener('click', function() {
alert(6);
}, false); // 冒泡阶段 body
document.body.addEventListener('click', function() {
alert(7);
}, false); // 冒泡阶段 html
document.documentElement.addEventListener('click', function() {
alert(8);
}, false); // 冒泡阶段 document
document.addEventListener('click', function() {
alert(9);
}, false); // 冒泡阶段 window
window.addEventListener('click', function() {
alert(10);
}, false); </script>
3.移除事件
<body>
<div>click to say hi</div>
</body>
<script>
var sayHi = function() {
alert('hi');
};
document.querySelector('div').addEventListener('click', sayHi, false); document.querySelector('div').removeEventListener('click', sayHi); document.body.addEventListener('click', function() {
alert('hello');
}, false); // 不是同一个回调，是不起作用的
document.body.removeEventListener('click', function() {
alert('hello');
});
</script>
4.事件状态对象
<body>
<div>click me</div>
</body>
<script>
document.querySelector('div').addEventListener('click', function(event) {
console.dir(event);
}, false); window.addEventListener('load', function(event) {
console.dir(event);
}, false);
</script>
5.监听函数this指向
this指向绑定事件的节点，即event.currentTarget属性
<body>
<div>click me</div>
</body>
<script>
document.body.addEventListener('click', function(event) {
alert(this);
alert(this == event.currentTarget)
});
</script>
6.获取事件触发元素（事件源头）
<body>
<div>click me</div>
</body>
<script>
document.body.addEventListener('click', function(event) {
alert(event.target);
});
</script>
7.阻止默认事件
<body>
<a href="http://www.baid.com">链接</a>
<input type="checkbox"/>
<textarea></textarea>
</body>
<script> // 点击链接时，阻止跳转
document.querySelector('a').addEventListener('click', function(e) {
e.preventDefault();
}); // 点击复选框时，阻止选中
document.querySelector('input').addEventListener('click', function(e) {
e.preventDefault();
}); // 在文本框中尝试输入字符时，阻止输入（使用输入法时，不一定会触发keypress事件）
document.querySelector('textarea').addEventListener('keypress', function(event) {
event.preventDefault();
});
</script>
8.阻止事件冒泡
<body>
<div>click</div>
</body>
<script>
document.querySelector('div').addEventListener('click', function(e) {
alert('div');
e.stopPropagation();
});
document.body.addEventListener('click', function() {
alert('body');
});
</script>
9.阻止冒泡和其他相同事件监听器
<body>
<div>click</div>
</body>
<script>
document.querySelector('div').addEventListener('click', function(e) {
alert(1);
});
document.querySelector('div').addEventListener('click', function(e) {
alert(2);
e.stopImmediatePropagation();
});
document.querySelector('div').addEventListener('click', function(e) {
alert(3);
});
document.body.addEventListener('click', function() {
alert('body');
});
</script>
10.自定义事件
<body>
<div>click</div>
</body>
<script>
var customEvent = document.createEvent('CustomEvent');
// 参数是：name,bubble,cancelable,detail
customEvent.initCustomEvent('hello', true, false,{
msg: 'hello'
});
var div = document.querySelector('div');
div.addEventListener('click', function() {
alert('click');
this.dispatchEvent(customEvent);
})
div.addEventListener('hello', function(e) {
alert(e.detail.msg);
})
</script>
11.模拟鼠标点击事件
<body>
<div>自动触发</div>
</body>
<script>
var div = document.querySelector('div');
div.addEventListener('click', function() {
alert('click');
}) var autoClick = document.createEvent('MouseEvent');
// 参数是: name,bubble,cancelable,view,detail,screenx,screeny,clientx,clienty,ctrlkey,altkey,shiftkey,metakey,button,relatedTarget
autoClick.initMouseEvent('click', true, true, document.defaultView,0,0,0,0,0,false,false,false,0,null,null);
div.dispatchEvent(autoClick);
</script>
12.事件委托
<p>点击某个单元格</p>
<table border="1">
<tr>
<td>row 1 col 1</td>
<td>row 1 col 2</td>
</tr>
<tr>
<td>row 2 col 1</td>
<td>row 2 col 2</td>
</tr>
<tr>
<td>row 3 col 1</td>
<td>row 3 col 2</td>
</tr>
<tr>
<td>row 4 col 1</td>
<td>row 4 col 2</td>
</tr>
</table>
<script>
document.querySelector('table').addEventListener('click', function(event) {
if (event.target.tagName.toLowerCase() == 'td') {
alert(event.target.textContent);
}
});