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