1.HTML事件处理程序
某个元素支持的某种事件,可以通过一个与相应事件处理程序同名的HTML特性指定。这个特性的值应该是能够执行的JS代码。例如:按钮单击是要执行一些js代码,可以像下面:
<input type="button" value="click me" onclick="showMessage()" />
在js中就可以像下面一样处理:
<script>
function showMessage(){
alert("hello function");
alert(this == window) // true
}
</script>
此时showMessage中的this指向的window,但是showMessage函数可以被多个元素同时调用。
但是此方法有的缺陷就是js和html耦合在一起,如果要更换事件处理程序,需要改html和js两个地方。所以很多人喜欢用dom事件处理程序。
2. DOM0级事件处理程序
通过js指定事件处理程序的方式,就是将一个函数赋值给一个事件处理程序的属性。
每个元素(包括window和document)都有自己的事件处理程序的属性,这些属性通常全部小写,就像onclick,将这个属性的值设置为一个函数,就可以指定事件处理程序。如下:
<html> <head></head> <body> <input type="button" value="click me2" id="btn2"> <script> var btn2 = document.getElementById("btn2"); btn2.onclick = function(){ console.log(this); } </script> </body> </html>
上面的this输出的结果是:<input type="button" value="click me2" id="btn2">,说明dom0级事件处理程序中的this指向的是当前元素本身,而不是windows,通过this可以访问元素的任何属性和任何方法。
3.DOM2级事件处理程序
DOM2级事件定义了两个方法,用于处理指定和删除事件处理程序的操作:addEventListener()和removeEventListener().所有的DOM节点都包含这两个方法,并且接受3个参数,要处理的事件名,作为事件处理程序的函数和一个布尔值。最后一个布尔值如果是true,则表示在捕获阶段,是false则表示在冒泡阶段。
<html> <head></head> <body> <input type="button" value="click me2" id="btn2"> <script> var btn2 = document.getElementById("btn2"); //addEventListener接受3个参数:要处理的事件名,作为事件处理程序的函数和一个布尔值。最后一个布尔值如果是true,则表示在捕获阶段,是false则表示在冒泡阶段 btn2.addEventListener('click',function(){ console.log(this); }, false); </script> </body> </html>
上面代码输出的结果和dom0级代码输出的结果一样:<input type="button" value="click me2" id="btn2">,说明dom2级事件处理程序中的this指向的是当前元素本身,而不是windows。
注意:addEventListener()方法只能通过removeEventListener()方法来移除。
但是使用removeEventListener()方法移除事件的时候需要注意的一点:
<html> <head></head> <body> <input type="button" value="click me2" id="btn2"> <script> var btn2 = document.getElementById("btn2"); btn2.addEventListener('click',function(){ console.log(this); }, false); btn2.removeEventListener('click',function(){//没有用 console.log(this); }, false); </script> </body> </html>
上面的方法移除click事件是没有用的,为什么呢?因为addEventListener和removeEventListener的第二个参数需要同一个函数,而上面的代码看似是同一个函数,其实不然,它们是功能相同的,但是是不同的匿名函数。如果需要正真移除事件处理程序,需要向下面这样:
<html> <head></head> <body> <input type="button" value="click me2" id="btn2"> <script> var btn2 = document.getElementById("btn2"); var handler = function(){ console.log(this); } btn2.addEventListener('click', handler, false); btn2.removeEventListener('click',handler, false); </script> </body> </html>
像上面一样,就可以保证addEventListener和removeEventListener的第二个参数是同一个函数。
attachEvent()与detachEvent()
在早期的IE浏览器,如:IE8中,没有实现addEventListener()
和removeEventListener()
,但提供了两个替代方法attachEvent()
和detachEvent()
。由于Microsoft
当前最新的系统Windows 10
中,已放弃IE
被edge
浏览器替代,所在attachEvent()
和detachEvent()
已没有意义。
上面的内容基本上是从《JavaScript高级程序设计》摘抄,在加上自己的一些理解。如果有错误,欢迎指正。