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

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

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

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

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

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

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

1)HTML事件处理程序:

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

<input type="text" onclick="showmessage()" />

<script>
function showmessage(){
alert(1);
}
</script>

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

2)DOM0级事件处理程序:

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

<input type="button" id="btn_test" value="测试" />

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级方法。

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

上一篇:ArcGIS Pro学习


下一篇:CreateFile函数详解