我一直认为Javascript的特点就是在和用户交互的过程中可以进行一些操作,那么事件作为用户交互的主要部分就显得特别重要,今天先学习了JS事件处理程序的相关内容。
首先,要明白Javascript 事件处理程序一共有三种:
1.HTML事件处理程序
2.DOM0级事件处理程序
3.DOM2级事件处理程序
1.HTML事件处理程序
<button id="btn2" onclick="show()">btn2</button>
根据它的名字就可以猜到这种方式和HTML有一定关系,上面就是它的实现方法。
使用这种实现方式要注意两个问题:
1.页面元素加载和JS加载的时差问题。具体来说就是如果页面元素先加载完毕而JS没有加载完毕,就会出错。
2.HTML和JS的耦合度太大。改动代码需要修改HTML 和 JS 两个部分,当代码量较大时,这是个很头疼的问题。
2.DOM0级事件处理程序
var btn1 = document.getElementById("btn1"); btn1.onclick = function(){
alert(this.id);
}
如上就是DOM0级事件处理的例子。相比第一种就灵活了许多,而且方便的一点就是事件处理函数(我自己起的名字)可以直接通过this访问到事件所在的元素。
3.DOM2级事件处理程序
var btn3 = document.getElementById("mybtn");
btn3.addEventListener("click",fn1,false);
btn3.addEventListener("focus",fn2,false);
btn3.addEventListener("blur",function(){
this.style.backgroundColor = "";
},false)
function fn1(e){
alert(this.id);
} function fn2(){
this.style.backgroundColor = "yellow";
}
DOM2级事件处理程序主要依靠两个方法:
addEventListener("事件类型",处理函数,false) 和 removeEventListener("事件类型",处理函数,false)
//一个添加,一个删除 第三个参数false表示在冒泡阶段调用事件处理程序
需要注意的是 addEventListener 添加的事件必须通过 removeEventListener移除,并且他们对应的参数必须相同
btn3.addEventListener("blur",function(){
this.style.backgroundColor = "";
},false)
btn3.removeEventListener("blur",function(){
this.style.backgroundColor = "";
},false)//无法移除,因为参数中有匿名函数,虽然写法一样 btn3.addEventListener("click",fn1,false);
btn3.removeEventListener("click",fn1,false); //这样才可以移除
2016年1月4日