javaScript之事件处理程序

Posted 2020-09-23 花信

        事件就是用户或浏览器自身执行的某个动作，javascript与html的交互也是通过事件实现的。而相应某个事件的函数就叫做事件处理函数。包括以下几种：

1.HTML事件处理程序       

       某个元素支持的每种事件，都可以使用一个相应的事件处理程序相同的HTML特性指定。这个特性的值能执行JavaScript代码。

<input type=”button” value=”按钮” onclick=”showMessage()”>
<script>
  function showMessage(){
    alert(“Hello”)
}
</script>

       封装元素属性值的函数有一个局部变量event，也就是事件对象，通过event可以直接访问事件对象。函数内部的this值等于事件的目标元素。该函数可以使用with扩展作用域

function(){
       with(document){
       //可访问document
             with(this){
             //可访问该元素本身的属性值
             }
      }
}

缺点：

（1）存在时差，用户可能在HTML元素刚显示就触发事件，但是当前并不一定具备执行条件，比如JS代码没有下载完成。可以使用try-catch抛出错误。

（2）扩展事件处理程序的作用域链在不同浏览器中会导致不同结果。

（3）ＨＴＭＬ代码与JavaScript代码高度耦合。如果需要更换事件处理程序，需要改动两个地方。

２.ＤＯＭ０级事件处理程序    

　　　与ＨＴＭＬ事件处理程序相同的是都在元素属性上添加事件处理程序。不同的地方是ＤＯＭ０级在JavaScript代码中获取元素引用，在引用属性上添加事件处理程序。

<input type=”button” value=”按钮”　ｉｄ＝＂ｂｔｎ＂>
<script>
  var Btn = document.getElementById(“btn”);
Btn.onclick =　function(){
   alert(“Hello”)
};
</script>

 　程序中的this引用当前元素的作用域。

　　删除DOM0级事件

Btn.onclick = null;

３．DOM2级事件处理程序

　　　“DOM2级事件”定义了两个方法，用于指定和删除事件处理程序：addEventListener()和removeEventListener()。它们都接受3个参数：事件名，事件处理程序函数和一个布尔值。最后一个布尔值是true表示在捕获阶段调用事件处理程序，false表示在冒泡阶段调用事件处理程序。第三个参数可选，默认值是false。与DOM0级相同，程序中的this引用当前元素的作用域。

<input type=”button” value=”按钮”　id＝”btn”>
<script>
  var Btn = document.getElementById(“btn”);
Btn.addEventListener(“click”,function(){alert(“Hello”)},false};
</script>

可添加多个事件处理程序，不会被覆盖，从上向下执行。

通过removeEventListener()移除事件处理程序，对于添加的匿名函数无法移除。

４．IE事件处理程序

 　　“IE事件”处理程序用于指定和删除事件处理程序的方法有：attachEvent ()和detachEvent ()。这两个方法接受两个参数：事件处理程序名和事件处理程序函数名。通过attachEvent ()添加的事件默认都会添加到冒泡阶段。

<input type=”button” value=”按钮”　id＝”btn”>
<script>
  var Btn = document.getElementById(“btn”);
Btn.attachEvent(“onclick”,function(){alert(“Hello”)} };
</script>

　　与DOM0级不同的是，事件处理程序会在全局作用域中运行，即this指向window。

 　　 attachEvent ()也可以添加多个事件处理程序，但是执行顺序是自下而上。

 ５.跨浏览器的事件处理程序

　　核心视情况的分别处理ＤＯＭ０级，ＤＯＭ２级和ＩＥ事件处理程序。

Var ｅventHandler ={
　　addHandler: function(element, type, handler){
　　if(element.addEventListener){
　　　　element.addEventListener(type, handler, false);
　　}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.detach Event){
　　　　element. detach Event (“on”+type, handler);
　　}else{
   　　 element[“on”+type] = null;
　　}
　}
};

　　eventHandler接受3个参数，分别是要操作元素的引用、事件名和事件处理函数。

调用方法

var Btn = document.getElementById(“btn”);
var handler = function(){
  　 alert(“Hello”)
};
eventHandler. addHandler (Btn, “click”, handler);
removeHandler. addHandler (Btn, “click”, handler);