计算机教程

浅谈Javascript事件处理程序的几种方式

24 8月 , 2019  

必赢娱乐棋牌 1

注意:这里我们的第三个参数都是false,是在冒泡阶段添加的。大多数情况下,都是就事件处理程序添加到事件流的冒泡阶段,这样可以最大限度的兼容各种浏览器。
三:IE事件处理程序 IE实现了与DOM中类似的两个方法:attachEvent()和detachEvent()。这两个方法接受相同的两个参数:事件处理程序名称和事件处理程序函数。由于IE只支持时间冒泡,所有通过attachEvent()添加的事件处理程序都会被添加包冒泡阶段。
如:

4.支持IE事件处理程序的浏览器不只有IE浏览器,还有Opera浏览器。

复制代码 代码如下:

解决方法:将HTML事件处理程序封装在一个try-catch块中,以便错误不会浮出水面。

事件就是用户或浏览器自身执行的某种动作。比如说click,mouseover,都是事件的名字。而相应某个事件的函数就叫事件处理程序(或事件侦听器)。为事件指定处理程序的方式有好几种。
一:HTML事件处理程序。
如:

成功移除!

三:

 第四部分:IE事件处理程序

解决办法:

必赢娱乐棋牌 2

btn.removeEventListener(“click”,hander,false); // 有效

结论:通过DOM2级事件处理程序,我们可以为同一个元素添加两个或更多的事件。事件根据顺序依次触发。且this同样指向当前元素,故函数在元素的作用域中执行。

复制代码 代码如下:

也就是说目前button中的HTML事件处理函数在作用域链的最前端,而Script在全局作用域,所以“事件处理程序中的代码在执行时,有权访问到全局作用域中的任何代码。”这句话就不难理解了。

以这种方式添加的事件处理程序会在事件流的冒泡阶段被处理。
删除DOM0级方法指定的事件处理程序:
btn.onclick=null; // 删除事件处理程序
}
(2):DOM2级事件处理程序
DOM2级事件定义了两个方法,用于处理指定和删除事件处理程序的操作:addEventListener()和removeEventListener()。所有DOM节点中都包含这两个方法,并且它们都接受3个参数:要处理的事件名,做为事件处理程序的函数和一个布尔值。最后这个参数如果是true,表示在捕获阶段调用事件处理程序;如果是fasle,表示在冒泡阶段调用事件处理程序。
如:

   2.这两个方法的第三个参数都是false,即事件处理程序添加到冒泡阶段。一般不使用true,因为低版本的IE不支持捕获阶段。

复制代码 代码如下:

this分析:和前面的DOM0级事件处理程序一样,这里的addEventListener同样也可以看作对象的方法,不同之初在于,DOM0级的方法需要另外一个函数来赋值,而这里的方法是DOM2级规范预定义的。

复制代码 代码如下:

  1. 时差问题。
    因为用户可能在HTML元素一出现就开始触发相应事件,但是有可能该事件的脚本(如例4中show()函数的函数定义在script中)还没有加载完成,此时不具备执行条件,故报错。

var btn=document.getElementById(“mybtn”);
btn.attachEvent(“onclick”,function(){
alert(“clicked”);
})

您可能感兴趣的文章:

var btn=document.getElementById(“mybtn”);
var hander=function(){
alert(this.id);
};
btn.addEventListener(“click”,hander,false);

5.跨浏览器的事件处理程序

注意:attachEvent()函数的第一个参数是”onclick”,而非DOM的addEventListener()中的”click”。
attachEvent()方法也可以用来为一个元素添加多个事件处理程序。
如:

注意:

这里调用了两次attachEvent(),为同一个按钮添加了两个不同的事件处理程序。不过,与DOM方法不同的是,这些事件处理程序不是以它们的添加顺序执行,而是以相反的顺序被触发。单击这个例子中的按钮:首先看到的是”hello
world”,然后才是”clicked”.
使用attachEvent()添加的事件可以通过detachEvent()来移除,条件是必须提供相同的参数。

注意:1.传入方法的handler没有(),是因为这里都只是定义函数,而不是调用,需要注意。

var btn=document.getElementById(“mybtn”);
btn.addEventListener(“click”,function(){
alert(this.id);
},false);
btn.addEventListener(“click”,function(){
alert(“hello world!”);
},false);

必赢娱乐棋牌,虽然我对同一个元素设置了两个事件处理程序,但是最终的结果是:只有第二个事件有效(覆盖了第一个事件)。当然,人类是聪明的动物,DOM2级事件很好的解决了这个问题!

var btn=document.getElementById(“mybtn”);
var hander=function(){
alert(“clicked”);
}
btn.detachEvent(“onclick”,hander}); // 移除

1.attachEvent()

可见,使用addHandler和removeHandler来添加和移除事件处理程序还是很方便的。

必赢娱乐棋牌 3

复制代码 代码如下:

 例4:

var btn =document.getElementById(“mybtn”);
var hander= function(){
alert(“clicked”);
};
//这里省略了部分代码
EventUtil.addHandler(btn,”click”,hander);
//这里省略了部分代码
EventUtil.removeHandler(btn,”click”,hander);
//移除之前添加的事件处理程序

2.同样,我们可以使用attachEvent()来给同一个元素添加多个事件处理程序。但是与DOM2不同,事件触发的顺序不是添加的顺序而是添加顺序的相反顺序。

var btn=document.getElementById(“mybtn”);
btn.addEventListener(“click”,function(){
alert(this.id);
},false);
//移除
btn.removeEventListener(“click”,function(){ //这样写没有用
(因为胃第二次与第一次相比是一个完全不同的函数)
alert(this.id);
},false);

下面通过两个例子加深理解:

var btn=document.getElementById(“mybtn”);
btn.attachEvent(“onclick”,function(){
alert(“clicked”);
});
btn.attachEvent(“onclick”,function(){
alert(“hello world!”);
});

第五部分:跨浏览器的事件处理程序

您可能感兴趣的文章:

IE事件处理程序中有类似与DOM2级事件处理程序的两个方法:

var EventUtil = {
addHandler: function(element, type, handler){ //
该方法接受3个参数:要操作的元素,事件名称和事件处理程序函数
if (element.addEventListener){ //检查传入的元素是否存在DOM2级方法
element.addEventListener(type, handler, false); //
若存在,则使用该方法
} else if (element.addEvent){ // 如果存在的是IE的方法
element.attachEvent(“on” + type, handler);
//则使用IE的方法,注意,这里的事件类型必须加上”on”前缀。
} else { // 最后一种可能是使用DOM0级
element[“on” + type] = hander;
}
},

之所以没有和DOM2级事件处理程序中类似的第三个参数,是因为IE8及更早版本只支持冒泡事件流。

复制代码 代码如下:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

使用DOM2级事件处理程序的主要好处是可以添加多个事件处理程序。
如:

DOM0级事件处理程序用的也非常普遍。之所以成为DOM0级,我认为是当时还没有出DOM标准,而IE和Netscape
Navigator两者使用的时间处理程序(不知是否合理,望批评指正)。
总之,我们先看看下面的例子吧。

复制代码 代码如下:

var EventUtil={
  addHandler:function(element,type,handler){
    if(element.addEventListener){
      element.addEventListener(type,handler,false);//注意:这里默认使用了false(冒泡)
    }else if(element.attachEvent){
      element.attachEvent("on"+type,handler);
    }else{
      element["on"+type]=handler;
    }
  },
  removeHandler:function(element,type,handler){
    if(element.removeEventListener){
      element.removeEventListener(type,handler,false);//注意:这里默认使用了false(冒泡)
    }else if(element.detachEvent){
      element.detachEvent("on"+type,handler);
    }else{
      element["on"+type]=null;
    }
  }
};

相信这种方式是目前咱们大家用得比较多的一种,但是在html中指定事件处理程序有两个缺点。
(1)首先:存在一个时差问题。就本例子来说,假设show()函数是在按钮下方,页面的最底部定义的,如果用户在页面解析show()函数之前就单击了按钮,就会引发错误;
(2)第二个缺点是html与javascript代码紧密耦合。如果要更换时间处理程序,就要改动两个地方:html代码和javascript代码。
因此,许多开发人员摒弃html事件处理程序,转而使用javascript指定事件处理程序。
二:Javascript指定事件处理程序 javascript指定事件处理程序包括三种方式:
(1):DOM0级事件处理程序
如:

2.我们不能控制元素的事件流(捕获or冒泡)。

removeHandler: function(element, type, handler){ //
该方法是删除之前添加的事件处理程序
if (element.removeEventListener){ //检查传入的元素是否存在DOM2级方法
element.removeEventListener(type, handler, false); //
若存在,则使用该方法
} else if (element.detachEvent){ // 如果存在的是IE的方法
element.detachEvent(“on” + type, handler);
//则使用IE的方法,注意,这里的事件类型必须加上”on”前缀。
} else { //
最后一种可能是使用DOM0及方法(在现代浏览器中,应该不会执行这里的代码)
element[“on” + type] = null;
}
}
};

 例9:

这里为按钮添加了两个事件处理程序。这两个事件处理程序会按照它们的顺序触发。
通过addEventListener()添加的时间处理程序只能使用removeEventListener()来移除,移除时传入的参数与添加时使用的参数相同。这也意味着通过addEventListener()添加的匿名函数将无法移除。
如:

1.我们不能给一个元素同时添加两个事件。

var btn=document.getElementById(“mybtn”); //取得该按钮的引用
btn.onclick=function(){
alert(‘clicked’);
alert(this.id); // mybtn

例8:

复制代码 代码如下:

 那么怎么解决上面的问题呢? DOM0级事件处理程序是一个不错的选择!

复制代码 代码如下:

<button id="button">点我</button>

<script>
  var button=document.getElementById("button");
  function handler(){
    alert(this.id);
  }
  button.addEventListener("click",handler,false);
  button.removeEventListener("click",handler,false);
</script>

var btn=document.getElementById(“mybtn”);
btn.addEventListener(“click”,function(){
alert(this.id);
},false);

2.事件处理程序函数。如function(){alert(“clicked”);}

<script type=”text/javascript”>
function show(){
alert(‘hello world!’);
}
</script>
<input type=”button” value=”click me” onclick=”show()”/>

这条代码即为事件处理程序,点击button后,会弹出弹框,显示success。

以上三种方式为目前的主要的事件处理程序方式,那看到这里你肯定会想到,既然不同的浏览器会有不同的差异,那怎么保证跨浏览器的事件处理程序呢?
为了以跨浏览器的方式处理事件,不少的开发人员是使用能够隔离浏览器差异性的Javascript库,还有一些开发人员会自己开发最合适的事件处理方法。
这里提供一个EventUtil对象,可以用这个对象来处理浏览期间的差异:

例10:通过这个例子来使用上面构造的方法。

可以像下面这样使用EventUtil对象:

<button id="button">点我</button>

<script>
  var button=document.getElementById("button");
  button.onclick=function(){
    alert("clicked");
  }
</script>

复制代码 代码如下:

 HTML事件处理程序的三个缺点(重点):

复制代码 代码如下:

<button id="button">点我</button>

<script>
  var button=document.getElementById("button");
  button.onclick=function(){
    alert("clicked");
  }
  button.onclick=function(){
    alert("again");
  }

3.DOM2级事件处理程序

<button id="button">点我</button>

<script>
  var button=document.getElementById("button");
  button.addEventListener("click",function(){
    alert(this.id);
  },false);
  button.removeEventListener("click",function(){
    alert("another event");
  },false);

2.事件名称–注意:没有on,如click、mouseover
3.事件处理程序函数–即handler函数

最后浏览器成功弹出“clicked”。

2.作为事件处理程序的函数,如function(){alert(“clicked”);}

 DOM2级事件处理程序成功地解决了前面所有事件处理程序的问题,堪称perfect!!!! 
然而总是特立独行的IE浏览器又有新花样,它也有自己的一套事件处理程序,下面我们就来看看吧。

第二部分:DOM0级事件处理程序

1.要处理的事件名(注意:是时间名,所以没有on!),如click、mouseover等。

在博文的开头我就提到了事件处理程序即事件侦听器。这两个方法都接收三个参数:

什么使HTML事件处理程序呢?显然,通过名字就可以猜到,它是卸载HTML中的函数(事件处理程序)。初学者大多用到的事件处理程序即为HTML事件处理程序。下面举例:

实际上,这一部分视为了跨浏览器使用,将前面的几部分结合起来就可以了。

<button onclick="show()">点我</button>

<!-- 正常弹出窗口--> 

<script>

  function show(){

    alert("success");

  }

</script> 

3.HTML和JavaScript代码紧密耦合。
结果是:如果要更换事件处理程序,就必须改动两个地方–HTML代码和JavaScript代码。


相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图