这是我参与11月更文挑战的第13天，活动详情查看：2021最后一次更文挑战
前言
今天我们来讲一讲IE事件处理程序，其实方法和参数都是和DOM方法类似的，下面是我的理解和一些理解。
IE处理程序概述
IE 实现了与 DOM 类似的方法,即 attachEvent ()和 detachEvent ()。这两个方法接收两个同样
的参数:事件处理程序的名字和事件处理函数。因为IE8及更早版本只支持事件冒泡,所以使用 attachEvent ()添加的事件处理程序会添加到冒泡阶段。
要使用 attachEvent ()给按钮添加 click 事件处理程序,可以使用以下代码:
var btn = document . getElementById (＂ myBtn ＂);
btn . attachEvent (" onclick ＂, function (){
console,log('click')
注意, attachEvent ()的第一个参数是" onclick ",而不是 DOM 的 addEventListener 0)方法的＂ click ＂。
在 IE 中使用 attachEvent ()与使用DOM0方式的主要区别是事件处理程序的作用域。使用DOM0方式时,事件处理程序中的 this 值等于目标元素。而使用 attachEvent ()时,事件处理程序是在全局作用域中运行的,因此 this 等于 window 。来看下面使用 attachEvent ()的例子:\
varbtn = document . getElementBy Id (＂ myBtn ＂); btn . attachEvent (＂ onclick ＂, function (){
console . log ( thi В=== window ); // true
});
理解这些差异对编写跨浏览器代码是非常重要的。
与使用 addEventListener ()一样,使用 attachEvent ()方法也可以给一个元素添加多个事件处
理程序。比如下面的例子:\
var btn = document . getElementById (" my Btn "); btn . attachEvent (" onclick ＂, function (){
console . log (" Clicked ");
btn . attachEvent (" onclick ", function (){
connsole . log (" Hello world !");}//输出helloworld
这里调用 两次 attachEvent (),分别给同一个按钮添加了两个不同的事件处理程序。不过,与 DOM 方法不同,这里的事件处理程序会以添加它们的顺序反向触发。换句话说,在点击例子中的按钮后,控制台中会先打印出" Hello world !",然后再打印出" Clicked "。
使用 attachEvent ()添加的事件处理程序将使用 detachEvent ()来移除,只要提供相同的参数。与使用 DOM 方法类似,作为事件处理程序添加的匿名函数也无法移除。但只要传给 detachEvent 0)方法相同的函数引用,就可以移除。下面的例子演示了附加和剥离事件:
var btn = document . getElementById (＂ myBtn ＂);
var handler = function (){
con В ole . log (＂ clicked ＂);
btn . attachEvent (" onclick ＂, handler );
btn . detachEvent (" onclick ＂, handler );//触发函数
这里先把事件处理程序保存到变量 handler ,~后义将其传给 detachEvent ()来移除事件处理程序。IE处理程序总体来说就是运用attchEvent()和detachEvent，实现类似DOM的方法，同时方法和参数都是一样的
