- 什么是事件处理程序？
事件就是用户或者浏览器自身执行的某种动作，例如：click,load等，都是事件的名称。事件处理程序又或者叫做事件侦听器是来响应某个事件函数的，它是以"on"开头的。 - 事件处理程序的分类
- HTML事件处理程序
<button onclick="alert('success')">点我</button>
对呀，没错啊，可以这么定义事件，但是HTML事件处理程序中Javascript代码作为了onclick特性的值，因此，我们不能在JavaScript代码中使用未经转义的HTML语法字符，如&(和号)、""（双引号）、<(小于号)、>（大于号）等等。
仔细看下面的代码，加了双引号就会出错，必须用转义字符修改
<button value="html事件处理" onclick="alert("111")"></button>
也有小伙伴说了，我把处理函数写在外边啊，可以呀
<button onclick=showMessage()>html事件处理</button>
<script>
function showMessage() {
alert("hello world");
}
</script>
事件处理程序中的代码在执行时，有权访问到全局作用域中的任何代码。
扩展作用域
<form action="" method="post">
<input type="text" name="User" value="222">
<input type="button" onclick="alert(User.value)">
</form>
使用这种方法，会存在以下缺点：
(1)时差问题
就相当于你和你的妈妈一个在中国，一个在美国，凌晨你在睡觉，而妈妈所在地却是白天，来不及等你反应，电话就打来了，你潜意识是不具备接电话的功能的。
同理，用户可能在HTML元素一出现就开始触发相应事件，但是有可能该事件的脚本（如例4中show()函数的函数定义在script中）还没有加载完成，此时不具备执行条件，故报错。
有错误就try -- catch吧
<button onclick="try{showMessage();}catch(ex){}">html事件处理</button>
(2)扩展事件处理程序的作用域链在不同的浏览器中会导致不同的结果。
(3)HTML与JS代码耦合性高，要修改就得修改两个地方，太过麻烦.
- DOM0级事件处理程序
就是将函数值赋值给一个事件处理程序的属性。
//DOM0级事件处理程序
btn.onclick = function () {
alert("DOM0级处理")
};
//btn.onclick = null;删除事件处理程序
它解决了HTML处理事件的缺点，但是它自身还是存在问题
(1)我们不能给一个元素同时添加两个事件。
(2)我们不能控制元素的事件流（捕获or冒泡）。
- DOM2级事件处理程序
addEventListener() ---添加事件侦听器
removeEventListener() ---删除事件侦听器
接收三个参数：
(1) 要处理的事件名（注意：是时间名，所以没有on！），如click、mouseover等。
(2) 作为事件处理程序的函数，如function(){alert("clicked");}
(3) 表示事件流方式的布尔值。false为冒泡阶段调用事件处理程序；true为捕获阶段调用事件处理程序。
//DOM2级处理事件程序
btn.addEventListener("click",function () {
alert("DOM2级处理失败");
},false); //false表示在事件冒泡阶段有效
btn.removeEventListener("click",function () {
alert("delete");
},false); //这种做法无法解除事件绑定
let bander = function () {
alert("DOM2级处理成功");
};
//以下做法就可以解除事件绑定
btn.addEventListener("click",bander,false);
btn.removeEventListener("click",bander,false);
可以添加多个事件，依次触发
- IE事件处理程序
attachEvent()
detachEvent()
它们都接收两个参数：
(1)事件处理程序名称。如onclick、onmouseover，注意：这里不是事件
(2)而是事件处理程序的名称，所以有on事件处理程序函数。如function(){alert("clicked");}
//attachEvent,在IE等中都无效，但是，考虑兼容性就是这样的
let IEhandler = function () {
alert("IE处理");
};
btn.attachEvent("onclick",IEhandler);
btn.detachEvent("onclick",IEhandler);
- 跨浏览器的事件处理程序
当然，为了使每个浏览器兼容，我们可以自定义EventUtil属性
<button id="myButton" value="111" style="height: 40px;
width: 40px;background-color: rebeccapurple" onclick="changeIt()">
Click Me
</button>
<script>
let btn = document.getElementById("myButton");
//跨浏览器的事件处理,创建方法addHandler(),自定义属性EventUtil
let EventUtil = {
addHandler: function (element,type,handler) {
if(element.addEventListener){
element.addEventListener(type,handler,false) //dom0级处理
}
else if(element.attachEvent){
element.attachEvent("on"+type,handler);
}
else{
element["on"+type] = handler;
}
},
removeHandler:function (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;
}
}
}
<script>
这样定义，就可以解决兼容性的问题了，在后续的学习中，还会继续增加EventUtil属性的内容。
网友评论