JavaScript学习——事件处理程序

breakpoints

2020-05-03

关注关注

一，什么是事件？

　　事件就是用户或者浏览器自身执行的某种动作。如点击（click）,加载，鼠标经过。

二，什么是事件处理程序？

　　响应某个事件的就是事件处理程序。

三，HTML事件处理程序？

　　一个元素支持的每一个事件都可以使用一个与相应事件处理程序同名的特性来指定，这个特性的值就是能够执行的Javascript代码。如下：

<!DOCTYPE html>
<html>

<head>
    <title>
        测试
    </title>
    <script>
        function showMessage() {
            alert("hello world");
        }
    </script>
</head>

<body>
    <input type="button" value="CLick me" onclick="showMessage()" />
</body>

</html>

这样创建事件处理程序会创建一个封装着元素属性的函数，这个函数中有一个局部变量event,也就是事件对象，把上述代码改为下：

<input type="button" value="CLick me" onclick="alert(event.type)" />     //会输出这个事件的类型click通过这个event对象，可以直接访问事件对象，不用自己定义它。在函数中，this是指承受事件的Dom元素，如下：

<input type="button" value="CLick me" onclick="alert(this.value)" />      //会输出Click me在HTML中指定事件处理程序的缺点：（1）时差问题：　　用户可能在HTML元素一出现就触发了事件处理，但是当时的事件处理程序可能还没有具备执行的条件，例如上面的例子中，如果事件处理程序是在input元素下方定义的，那么用户 在解析函数之前就点击了按钮，就会引发错误，因此很多的Html处理程序都封装在一个try catch快里，如下：

<input type="button" value="CLick me" onclick="try{show();}carch(ex){};}" /> 这样，如果在函数解析前就触发了事件，用户也不会看到错误。

（2）浏览器的差异：　　这样扩展事件处理程序的作用域在不同的浏览器中会导致不同的结果。(3)HTML和JavaScript代码紧密结合：　　如果要更换事件处理函数，就要改动两个地方，一个是HTML代码，一个是Javascript代码。DOM0级事件处理程序　　使用JavaScript指定事件处理程序，首相需要获取要操作的对象的引用，每个元素（包括window和document）都有自己的事件处理程序，这些属性通常都是小写，例如onclick,将这种属性的指设置为一个函数，就可以指定事件处理程序，如下所示：　　var btn=focument.getElementBYId("myBtn");　　btn.onclick=function(){　　　　alert(this.id);             //输出myBtn　　}　　在此，我们为文档对象获取了一个按钮的引用，然后为他指定了onclick事件处理程序，但是注意，这些代码在运行前是不会指定处理程序的，因此，如果这些代码在按钮之后，可能在一段时间里点击按钮，不会有任何的反应。　　使用DOM0指定事件处理程序，被认为为是元素的方法，这个时候，程序中的this指的是当前元素。以这种方法添加的事件处理程序会在事件流的冒泡阶段被处理。　　也可以通过DOM0级方法来删除指定的事件处理程序，只要像下面这样就可以了。　　btn.onclick=null;DOM2级事件处理程序　　DOM2级事件处理程序定义了两个方法，用于处理指定和删除事件处理程序的操作:addEventListener()和removeEventListener();　　所有的DOM节点都含有这两个方法，并且他们接收三个参数：要处理的事件名，作为事件处理程序的函数，一个布尔值，这个布尔值如果是true,表示是在事件捕获阶段调用事件处理程序，如果是false，则表示在事件冒泡阶段处理事件处理程序。　　要为按钮添加事件处理程序，可以使用下面的方法，　　var btn=document.getElementById("myBtn");　　btn.addEventListener("click",function(){alert("this.id")},false);　　使用DOM2级添加事件的好处是可以添加多个事件。　　var btn=docunment.getElementById("myBtn");　　btn.addEventListener("click",function(){alert("this.id")},flase);　　btn.addEventListener("click",function(){alert("hello world")},false);　　这两个事件的触发按照顺序来，因此会先显示元素的Id，其次显示"hello world"。　　通过addEventListener添加的函数只能过通过removeEventListener()来删除。移除时候的参数和添加的参数需要一样，这意味这添加的是匿名参数的话是无法删除的.如下：　　var btn=document.getElementById("myBtn");　　btn.addEventListener("click",function(){alert("hello")},false);　　btn.removeEventListener("click",function(){alert("hello)},false);             //出错，因为传入的不算同一个函数　　传入的参数必须是同一个函数，如下：　　var btn=document.getElementById("myBtn");　　var handle=function(){　　　　alert("hello");　　}　　btn.addEventListener("click",handle,false);　　btn.removeEventListener("click",handle,false);IE事件处理程序　　IE实现了和DOM一样的两个方法来处事件，分别是attachEvent()和detachEvent(),这两个方法接收两个参数，分别是事件处理名称，事件处理程序函数。　　通过attachEvent()添加的事件都会添加到冒泡阶段。注意：　　*使用attachEvent()添加的事件，this指的是window,在编写跨浏览器代码的时候，这一点很重要。　　*使用attachEvent()也可以添加多个事件，但是与addEventListener不同的是它执行函数的顺序是按照添加顺序来的，而是反着来，最后添加的先执行。　　*attachEvent()添加的匿名函数也不可以删除。跨浏览器的事件处理函数　　要保证事件处理程序的代码能够在大多数浏览器下执行，只需关心冒泡阶段即可。　　第一个要创建的方法是addHandler()，这个方法是属于一个EventUtil对象，它的职责分别是使用DOM0级，DOM2级方法和IE方法来添加事件，它接收三参数：要操作的元素，执行的事件名称，和事件处理程序函数，与addHandler()方法对应的是removeHandler()，它也接收相同的参数。　　　var EventUtil={　　　　　　addHandle:function(element,type,hanlder){　　　　　　　　if(element.addEventListener){　　　　　　　　　　element.addEventListener(type,handler,false);　　　　　　　　}　　　　　　　　else if(element.attachEvnet){　　　　　　　　　　element.attachEvent("on"+type,handler);　　　　　　　　}　　　　　　　　else{　　　　　　　　　　element["on"+type]=hanlder　　　　　　　　}　　　　　　},　　　　　　removeHandle:function(element,type,hanlder){　　　　　　　　if(element.removeEventListener){　　　　　　　　　　element.addEventListener(type,handler,false);　　　　　　　　}　　　　　　　　else if(element.detachEvnet){　　　　　　　　　　element.detachEvent("on"+type,handler);  //在IE8及以前事件需加上"on"前缀　　　　　　　　}　　　　　　　　else{　　　　　　　　　　element["on"+type]=null;　　　　　　　　}　　　　　　}　　　　　}　注意：DOM0级事件只能添加一个事件处理程序。　　可以向下面这样使用EventUtil对象：　　var btn=document.getElementById("myBtn");　　var handle=function(){alert("hello")};　　EventUtil.addHandler(btn,"click",handle);　　EventUtil.removeHandler(btn,"click",handle);

javascript