javascript事件小结（事件处理程序方式）--javascript高级程序设计笔记

2023-01-11 07:30:46

1、事件流：描述的是从页面中接收事件的顺序。

2、事件冒泡：IE的事件流叫做事件冒泡，即事件开始从具体的元素（文档中嵌套层次最深的那个节点）接收，然后逐级向上传播到不具体的节点（文档）。

3、事件捕获：指不太具体的节点应该更早接收到事件，而具体的节点应该是最后接收到事件。

4、DOM事件流：“DOM2级事件”规定的事件流包含三个阶段：事件捕获，处于目标阶段和事件冒泡阶段。（实际的目标元素在捕获阶段接不会收到事件）

IE不支持DOM事件流，Opera、safari、chrome、firefox支持事件流。

5、事件处理程序方式有以下几种：

1）HTML事件处理程序：

<input type="text" onclick="alert(1)" />;

<script>

    function showmessage(){

        alert(1);

    }

</script>

这种方式2个缺点：一是当dom元素加载完成，底部js没加载完成时候点击input会报错（这是我理解的精简一句话总结报错）；二是js和html代码紧密耦合。若是换事件处理程序，需要改两个地方：HTML和Javascript代码。

2）DOM0级事件处理程序：

就是将一个函数赋值给一个事件的处理程序属性。至今现代为所有浏览器都支持。既简单又款浏览器的优势。属性通常全部小写，例如onclick。将这种属性的值设置为一个函数，就可以指定事件处理程序。如下所示：

var oBtn = document.getElementById("btn_test");
oBtn.onclick = function(){
　　alert(this.id); //btn_test(ps:程序中的this引用当前元素)
}

以这种方式添加的事件处理程序会在事件流的冒泡阶段被处理。

删除通过DOM0级指定的事件处理程序方法，将事件处理程序属性设置为null即可：

btn.onclick = null; //删除时间处理程序

3）DOM2级事件处理程序：

“DOM2级事件”定义了两个方法，用于处理指定和删除事件处理程序的操作：addEventListener()和removeEventListener()。所有DOM几点都包含这两个方法，并且它们接受3个参数：要处理的事件名，作为事件处理的函数和一个布尔值。最后这个布尔值为true，则代表在捕获阶段调用事件处理程序；若为false，表示在冒泡阶段调用时间处理程序。

var oBtn = document.getElementById("btn_test");

function test1(){ console.log("test1") }
oBtn.addEventListener("click",test1,false);//冒泡

移除事件处理程序方法：

oBtn.removeEventListener("click",test1,false);//可以移除，匿名函数是移除不掉的。

大多数情况下将事件处理程序都是添加到事件流的冒泡阶段，这样可以最大限度的兼容各种浏览器。

4）IE事件处理程序：

IE实现了与DOM中类似的两个方法：attachEvent()和detachEvent()。这两个方法接收相同的两个参数，事件处理程序名称和事件处理程序函数。由于IE只支持事件冒泡，所以通过attachEvent()添加的事件处理程序都会被添加到冒泡阶段。

var oBtn = document.getElementById("btn_test");

oBtn.attachEvent("onclick",function(){

　　alert(this === window); //true

});

var oBtn = document.getElementById("btn_test");

function test1(){ console.log("test1") }

oBtn.attachEvent("onclick",test1);

移除相应的事件处理程序：

oBtn.detachEvent("onclick",test1);

5）跨浏览器的事件处理：

var EventUtil = {

                addHandler:function(element, type ,handler){

                    if (element.addEventListener) { //IE 中

                        element.addEventListener(type,handler,false);//冒泡

                    }

                    else if (element.attachEvent) { //IE 中

                        element.attachEvent("on"+type,handler);

                    }

                    else{

                        element["on" + type] = handler;

                    }

                },

                removeHandler:function(element, type ,handler){

                    if (element.removeEventListener) { //IE 中

                        element.removeEventListener(type,handler,false);//冒泡

                    }

                    else if (element.detachEvent) { //IE 中

                        element.detachEvent("on"+type,handler);

                    }

                    else{

                        element["on" + type] = null;

                    }

                }

            }

            var oBtn = document.getElementById("btn_test");

            var handler = function(){

                alert(111);

            }

            EventUtil.addHandler(oBtn,"click",handler);

            EventUtil.removeHandler(oBtn,"click",handler);

无论时间处理程序是采用什么方式添加到元素中，如果其他方法无效，则默认采用DOM0级方法。

先写到这里，欢迎转载与转发，请注明出处，若是对您有帮助，麻烦帮忙点一下右下角的支持~~

码农公寓

相关文章