JavaScript事件处理程序 学习笔记

我一直认为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日


上一篇:Js 冒泡事件阻止


下一篇:自定义View视图