５种事件处理程序

2018-06-22 本文已影响0人 QinRenMin

什么是事件处理程序？
事件就是用户或者浏览器自身执行的某种动作，例如：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属性的内容。

５种事件处理程序

猜你喜欢

热点阅读