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日