Javascript 事件 笔记 1
HTML 事件处理程序：
缺点：html 和 js 耦合性太高 （如果改动方法名 那么就要改HTML 代码和JS代码 )
优点： 兼容性强
1 <input type="button" id="btn1" value="btn1" onclick="alert(this.value)">
Dome 0 级事件处理程序：
把函数赋值给一个事件的属性。
简单，跨浏览器
1 var btn2 = document.getElementById('btn2'); 2 // dome 0 级 加载事件 3 btn2.onclick = function() { 4 alert('hello world'); 5 } 6 7 // dome 0 级 取消加载事件 8 // btn2.onclick = null;
Dome 2 级 事件处理程序(IE9 一下不适用)：
两个方法 addEventListener(),removeEventListener()
接收三个参数 1.事件名 2. 事件处理函数 3. 布尔值 （true 表示事件捕获， false 表示事件冒泡）
1 // dome 2 级 加载事件 事件名前不需要加ON 2 var btn3 = document.getElementById('btn3'); 3 btn3.addEventListener('click', btn3fun, false); 4 5 btn3.addEventListener('click', btn2fun, false);
IE事件处理程序(听说IE11 已经废弃了这两个方法)：
两个方法 attachEvent() detachEvent()
接收两个参数， 1.事件名 2. 处理函数
问： 这里为什么没有布尔值？
答： IE9 之前只支持冒泡
1 // IE 的事件处理程序 事件名前需要加on IE 11已经移除了这两个方法 2 var btn4 = document.getElementById('btn4'); 3 // alert(btn4['value']); 4 btn4.attachEvent('onclick', btn3fun); 5 btn4.detachEvent('onclick', btn3fun);
全面实例：
1 <html>Hello Javascript</title> 2 3 </head> 4 5 6 <body bgcolor="yellow"> 7 <h1>Hello world</h1> 8 <!-- html 加载事件 --> 9 <input type="button" id="btn1" value="btn1" onclick="alert(this.value)"> 10 <input type="button" id="btn2" value="btn2"> 11 <input type="button" id="btn3" value="btn3"> 12 <input type="button" id="btn4" value="btn4"> 13 14 </body> 15 <!-- 注意加载顺序 --> 16 <script type="text/javascript"> 17 var btn2 = document.getElementById('btn2'); 18 // dome 0 级 加载事件 19 btn2.onclick = function() { 20 alert('hello world'); 21 } 22 btn2.onclick = btn3fun; 23 //dome 0 级 只识别最后一个加载事件 24 btn2.onclick = btn2fun; 25 // dome 0 级 取消加载事件 26 // btn2.onclick = null; 27 28 function btn2fun(){ 29 alert('btn2'); 30 }; 31 32 function btn3fun() { 33 alert('this is btn3 function'); 34 } 35 36 // dome 2 级 加载事件 事件名前不需要加ON 37 var btn3 = document.getElementById('btn3'); 38 btn3.addEventListener('click', btn3fun, false); 39 40 btn3.addEventListener('click', btn2fun, false); 41 //卸载事件的方法应该和加载时的参数一样 匿名函数卸载不了 42 btn3.removeEventListener('click', btn3fun, true); 43 // addEventListener 添加的事件 只能通过removeEventListener 删除 44 btn3.onclick = null; 45 46 // IE 的事件处理程序 事件名前需要加on IE 11已经移除了这两个方法 47 var btn4 = document.getElementById('btn4'); 48 // alert(btn4['value']); 49 btn4.attachEvent('onclick', btn3fun); 50 btn4.detachEvent('onclick', btn3fun); 51 52 53 </script> 54 </html>
关于什么是 事件冒泡 ， 事件捕获 请看这位仁兄的博客：http://www.cnblogs.com/janes/p/3912677.html
