事件处理程序

Posted 2021-03-13 syinho

总结：

1.html事件处理程序不允许使用未转义字符，event变量访问事件对象，this指向目标元素本身，建议使用try/catch语句避免浏览器报错，但并不推荐使用HTML事件处理程序。

2.DOM0级事件处理程序中this指向目标元素本身，赋值null删除事件处理程序。

3.DOM2级事件处理程序this指向目标元素本身，布尔值代表在事件捕获（true）或事件冒泡（false）阶段处理事件。

4.IE与DOM2级相似，但其this值指向window，添加多个事件处理程序后最后添加的优先处理。

 

一、HTML事件处理程序

（写在前面：因为在开发中更改HTML事件处理程序需要进行大量操作，因此这种方法很多时候是被摒弃的)

1.直接写入js代码不允许使用未经转义的字符

1 <input type="button" value="click me" onclick="alert(‘clicked‘)"> 

双引号是js代码，因为写在html文件中，所以在其中不允许使用未经转义的部分字符，例如&，大小于号，双引号等。

举例：如果需要使用双引号：

<input type="button" value="click me" onclick="alert(&quot;clicked&quot;)"> 

2.常用情况是直接调用函数名

onclick="showMessage())"//showMessage是函数名

3.利用event变量可以直接访问事件对象

<input type="button" value="click me" onclick="alert(event.type)">//click 

4.this值等于事件的目标元素（此处是input元素）

1 <input type="button" value="click me" onclick="alert(this.value)"> //click me

5.处理文档加载完毕，但函数尚未完成解析的情况，进行事件交互的浏览器报错

1 <input type="button" value="click me" onclick="try{showMessage();}catch(err){}">

 

二、DOM0级事件处理程序

每个元素（包括window和document）都有自己的事件处理程序属性。DOM0级事件处理程序在事件冒泡阶段对事件进行处理。

1.this值等于事件的目标元素(其事件处理作用域在元素作用域内)

var btn=document.getElementById("btn");
btn.onclick=()=>{
      alert(this.id);//btn
}

2.删除DOM0级事件处理程序只需要给其赋值null即可。

 

三、DOM2级事件处理程序

addEventListener、removeEventListener。

接收三个值：要处理的事件名（例如click），事件处理程序函数，布尔值（true代表捕获阶段进行处理，false代表冒泡阶段进行处理）。

通过addEventListener添加的事件处理程序只能通过remove删除。所以如果第二个值是匿名函数那么将无法删除。

1.this值等于事件的目标元素

2.大多数情况都在冒泡阶段处理程序。理由是兼容各种浏览器。

 

四、IE事件处理程序

attachEvent、detachEvent

接受两个值：事件处理程序名称（例如onclick），时间处理程序函数。

1.事件处理程序的作用域是全局作用域。this值等于window。

var btn=document.getElementById("btn");
btn.attachEvent("onclick",()=>{
        alert(this===window);//true
})

2.在对同一个元素对象添加多个事件处理程序时，当事件触发时会按照相反的方向执行，即首先执行最后添加的那个事件处理程序。

 

五、跨浏览器的事件处理程序

var EventUntil={
    addHandler:(element,type,handler)=>{
        if(element.addEventListener){
            element.addEventListener(type,handler,false);//DOM2级事件处理程序
        }else if(element.attachEvent){
            element.attachEvent("on"+type,handler);//IE事件处理程序
        }elese{
            element["on"+type]=handler;//DOM0级事件处理程序
        }
    },
    removeHandler:(element,type,handler)=>{
        if(element.removeEventListener){
            element.removeEventListener(type,handler,false);
        }else if(element.detachEvent){
            element.detachEvent("on"+type,handler);
        }else{
            element["on"+type]=null;
        }
    }
};