首页 > 代码库 > Javascript 事件 笔记 1

Javascript 事件 笔记 1

2024-07-17 16:55:09   231人阅读

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 级 加载事件 事件名前不需要加ON2 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 级 加载事件 事件名前不需要加ON37 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


联系
我们