你的位置:首页 > Java教程

[Java教程]JavaScript之事件处理程序


一.原生JavaScript事件处理程序

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <script src="EvenUtil.js" charset="UTF-8"></script>  <script src="demo1.js" charset="UTF-8"></script>  <!--<script src="eventDemo.js" charset="UTF-8"></script>-->  <title>example</title></head><body>  <button id="myBtn">Click</button>  <a href="http://www.baidu.com" title="跳转到百度" target="_blank" name="baiduLink">点我链接到百度首页</a>  <!-- 不添加http://的话,默认会在当前domain下查找该资源文件-->  <!--<a href="www.baidu.com" title="跳转到百度">点我链接到百度首页</a>-->  <input type="button" value="Echo Username" name="Echo Username"></body></html>

 

  //DOM 0级指定的事件处理程序,被认为是元素的方法(在元素的作用域中运行,即this引用当前元素)  document.getElementsByName("Echo Username")[0].onclick = function () {    alert(this.value);  }  document.getElementsByName("Echo Username")[0].onclick = null;//删除绑定事件  //Dom 2级事件处理程序,可以实现添加多个点击事件现,第三个参数若为true:捕获阶段调用事件处理程序,false:冒泡阶段调用事件处理程序  var Btn = document.getElementById("myBtn");  Btn.addEventListener("click",function(){    alert(this.id);  },false);  Btn.addEventListener("click",function(){    alert("My id is Btn!");  },false);  //删除绑定事件要使用removeEventListener,并传入要移除的事件处理函数引用,所以这会导致匿名函数无法移除!  //removeEventListener("click",handler,false);

二.兼容性问题

  //兼容性问题:IE的实现方式为:attachEvent和detachEvent,attachEvent("onclick",handler)/detachEvent("onclick",handler)  //而且IE更丧心病狂的是,事件处理函数在全局作用域中运行,即this == window  var Btn = document.getElementById("myBtn");  Btn.attachEvent("onclick",function(){    $this = Btn;    alert($this.id);//myBtn    alert(this.id);//undefined  });

三.封装对象解决该兼容性问题

var EvenUtil = {  addHandler:function(element,evenType,handler){    if(element.addEventListener){      element.addEventListener(evenType,handler,false);    }else if(element.attachEvent){      element.attachEvent("on"+evenType,handler);    }else{      element["on"+evenType]=handler;    }  },  removeHandler:function(element,evenType,handler){    if(element.removeEventListener){      element.removeEventListener(evenType,handler,false);    }else if(element.detachEvent){      element.detachEvent("on"+evenType,handler);    }else{      element["on"+evenType]=null;    }  }}

四.事件对象

image

image

常用的事件对象的属性/方法:

  //事件对象的currentTarget、target属性  var Btn = document.getElementById("myBtn");  EvenUtil.addHandler(document.body,"click",function(event){    console.log(this == document.body);    console.log(event.currentTarget == this);//currentTarget指代程序当前正在处理事件的那个元素.必定等同于this    console.log("target is Btn ? "+(event.target == Btn));//target指代你点击的那个元素.当你点击Btn时,该属性就是Btn  });  //事件对象的type属性  var handler = function(event){    switch (event.type){      case "click" :        alert("click");        break;      case "mouseover" :        event.target.style.backgroundColor = "red";        break;      case "mouseout" :        event.target.style.backgroundColor = "";        break;    }  };  EvenUtil.addHandler(Btn,"click",handler);  EvenUtil.addHandler(Btn,"mouseover",handler);  EvenUtil.addHandler(Btn,"mouseout",handler);};

 

  //事件对象的stopPropagation方法:阻止冒泡  var bubbleDemo = (function(element){    document.body.onclick = function(){      alert("body click!");    }    element.onclick = function(){      alert(element.id+" click!");    }    return {      stopClickBubble:function(){        EvenUtil.addHandler(element,"click",function(event){          alert("Is can use stopProgatation ? "+event.bubbles)          if(event.bubbles){            event.stopPropagation();          }        });      }    };  })(document.getElementById("myBtn"));  //阻止myBtn的onclick事件冒泡  bubbleDemo.stopClickBubble();

 

  //事件对象的preventDefault方法:阻止默认元素默认行为  var baiduLink = document.getElementsByName("baiduLink")[0];  var defaultDemo = (function(element){    element.onclick = function(){      alert("hello baidu?");    }    return{      stopDefaultAction:function(){        EvenUtil.addHandler(element,"click",function(event){          if(event.cancelable){            event.preventDefault();          }        });      }    }  })(baiduLink);    //阻止默认行为:不让其进行百度搜索首页的跳转  defaultDemo.stopDefaultAction();