标签：click listen col 接受 属性 多个 等于 解析 div
总结：
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("clicked")">
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; } } };
标签：click listen col 接受 属性 多个 等于 解析 div
原文地址：https://www.cnblogs.com/Syinho/p/12247380.html
