JS—事件处理程序

2014-12-14 本文已影响298人 Miss____Du

简单理解
事件是用户或浏览器自身执行的某种动作。诸如click、load
而事件处理程序则是响应某个事件的函数。诸如onclick、onload
也就是当用户与页面上某个元素进行某种交互（click）时，会执行事件处理程序内（onclick）的函数。如果没有为这个元素设立事件处理程序，那么用户与该元素进行的交互不会有反应。
事件处理程序
event、this
这个函数中有一个局部变量event、也就是事件对象，不用自己去定义，也不用从函数的参数列表中读取。
this值等于事件的目标元素。
HTML事件处理程序
<form action="">
<input onclick="alert(value)" type="button" name="btn" value="点我一下！" />
<input ondblclick="alert(value)" type="button" name="btn" value="点我两下！" />
</form>

上：单击，下：双击

- 【优点】扩展作用域，我们可以直接在onclick的属性值中使用其他属性。alert(value)
【缺点】1、存在一个时差问题，用户可能会在html元素一出现就触发相应的事件，但是该事件处理程序可能在js脚本内，还没有被解析，就会发生错误。2、扩展事件的处理程序的作用域链在不同浏览器中会导致不同的结果
3、HTML代码与JS脚本代码紧密耦合。
DOM0级事件处理程序
js指定事件处理程序，将一个函数赋值给一个元素的事件处理程序的属性。
<input type="button" name="btn" id="d1" value="点我一下！" />
//第一步:获得目标元素
var btn=document.getElementById("d1");
//第二步：为元素的事件处理程序属性赋值
btn.onclick=function(){
alert(this.value);
}
btn.onclick=null;//将对匿名函数的引用变为0，从而删除。
程序中的this引用当前元素，可以通过this访问元素的任何属性和方法。
- 【优点】
  1、简单
  2、具有跨浏览器的优势
- 【缺点】
  1、如果代码位于按钮后面，就有可能一段时间内怎么单击都没有反应。
  2、为一个元素添加多个相同事件处理程序前者会被后者覆盖。
DOM2级事件处理程序
定义了两个方法，用于处理指定和用于删除事件处理程序的操作。
addEventListener() removeEventListener()
这两个方法都接受三个参数：要处理的事件名，作为事件处理程序的函数，和一个布尔值。布尔值为true表示在捕获阶段调用时间处理程序，为false表示在冒泡阶段调用。
//第一步:获得目标元素
var btn=document.getElementById("d1");
//第二步：指定事件处理程序
btn.addEventListener('click',function(){
alert(this.value);
},false);
btn.addEventListener('click',function(){
alert(this.id);
},false);
上述代码中，为click事件制定了两个事件处理程序，结果分别按声明顺序执行。
【注意】移除时，如果只把方法名替换了，课达不到删除的效果，因为我们在指定事件处理程序时使用的是匿名函数，每次声明一个匿名函数即使代码一样，但是却是不同的对象。所以我们需要声明一个变量，让他引用这个匿名函数。然后通过这个引用来删除对原来匿名函数的删除。
var handler=function(){
alert(this.value);
};
btn.addEventListener('click',handler,false);
//移除
btn.removeEventListener('click',handler,false)

写完这段笔记后，我想可不可以在html指定事件处理程序时，使用函数的方式。后来我试了一下。
<input onclick="handler" type="button" value="点我一下！"/>
error：不能使用引用，需要一段执行代码。
<input onclick="handler()" type="button" value="点我一下！" />
error：弹出警告框，为undefined。
function handler(){
alert(this);
};
测试：[object window]说明该this并没有指向目标元素。
为什么呢？
<input onclick="alert(value)" type="button" id="d1" value="点我一下！" />
当我们这样写的时候，"alert(value)"这行代码被自动加到这样的函数内：
with(document){
with(this){
//元素属性值
}
}
知道了这个原理，我们可能会觉得那么在handler函数里面补上不就可以啦，事实上也是不行的，因为我们添加的函数的his值并不会指向元素

IE事件处理程序
在IE9以前包括IE9的浏览器都支持DOM2级事件处理程序，IE8是最后一个仍然使用其专有事件系统的主要浏览器。
而IE8及更早版本只支持事件冒泡，所以在指定事件处理程序时，就可以不指定采用怎么样的事件流机制啦。
他也是通过两个方法实现指定与移除事件处理程序的，移除时，也是需要先将处理程序函数赋值给一个变量。
//第一步:获得目标元素
var btn=document.getElementById('d1');
//第二步：指定事件处理程序
function handler(){
alert('clicked');
};
btn.attachEvent("onclick",handler);
btn.detachEvent('onclick',handler);
但总是有区别的：
区别1：事件处理程序的作用域不是在所属元素，而是全局对象。
区别2：为一个元素指定多个事件处理程序时，事件处理程序的执行函数与dom2级相反。即与声明顺序相反。

跨浏览器的事件处理程序
var EventUtil={
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.detachEvent){
              element.detachEvent("on"+type,handler);
          }else{
              element["on"+type]=null;
          }
      }
  }
  var btn=document.getElementById('d1');
  function handler(){
      alert('clicked');
  };
  EventUtil.addHandler(btn,'click',handler);
  EventUtil.removeHandler(btn,"click",handler);

因为除去网景，大多数浏览器都是支持冒泡的事件流的，所以在设计跨浏览器代码时，只需要关注冒泡阶段。
解决方法是，创建对象，并在对象内调用方法，这样可以起到一定的封装作用。
针对：DOM0级，DOM2级，IE方法。三种情况。
顺序：普遍优先。
不足：代码中没有针对this作用域的区别加以

JS—事件处理程序

猜你喜欢

热点阅读