JS事件流与事件处理程序的示例分析

这篇文章主要介绍JS事件流与事件处理程序的示例分析,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!

“专业、务实、高效、创新、把客户的事当成自己的事”是我们每一个人一直以来坚持追求的企业文化。 创新互联是您可以信赖的网站建设服务商、专业的互联网服务提供商! 专注于网站制作、成都网站建设、软件开发、设计服务业务。我们始终坚持以客户需求为导向,结合用户体验与视觉传达,提供有针对性的项目解决方案,提供专业性的建议,创新互联建站将不断地超越自我,追逐市场,引领市场!

1.事件流:从页面中接收事件的顺序

1.1 IE :事件冒泡流
1.2 Netscape :事件捕获
1.3 DOM事件流 :事件捕获阶段——事件目标阶段——事件冒泡阶段
DOM2级事件规定 :捕获阶段不会涉及目标事件。

2.事件处理程序

事件 :用户或者浏览器自身执行的 某种动作
事件处理程序 :响应某个事件的 函数 。

2.1 HTML事件处理程序

用一个与该事件处理程序同名的HTML特性来指定。

2.1.1包含要执行的具体动作

2.1.2 调用其他地方定义的脚本

2.1.3 缺点

  • 1.时差问题:使用try-catch块捕捉错误。onclick="try { showMessage() ;} catch(ex) {} "
     

  • 2.程序的作用域链在不同浏览器中会导致不同结果

  • 3.HTML和JS代码耦合紧密

2.2 DOM0级事件处理程序

将一个函数赋值给一个事件处理程序属性,例如:onclick。

为事件处理程序赋值。

btn.onclick = function() {
  alert( this.id );
};

事件处理程序在元素的作用域中运行,this指向当前元素。

删除事件处理程序:

btn.onclick = null;

2.3 DOM2级事件处理程序

addEventListener(处理的事件名,事件处理程序函数,布尔值);

removeEventListener(处理的事件名,事件处理程序函数,布尔值);

布尔值:捕获阶段调用事件处理程序:true。冒泡阶段调用:false。大多数情况下用false。

btn.addEventListener("click" , function() {
  alert(this.id);
}, false);

好处:可以添加多个事件处理程序。事件按照添加先后顺序执行。

问题:匿名函数无法移除。

最好写成

var handler = function(){
  alert(this.id);
};
btn.addEventListener("click", handler, false);
btn.removeEventListener("click", handler, false);

2.4 IE事件处理程序

attachEvent(事件处理程序名称,事件处理程序函数);
detachEvent(事件处理程序名称,事件处理程序函数);

通过该方法添加的事件处理程序,都会被添加到冒泡阶段。

btn.attachEvent("onclick",function(){
  alert("clicked");
});

注意:使用DOM级方法时,事件会在所属元素的作用域内运行;使用attachEvent()方法,事件处理程序会在全局作用域运行,this==window。

好处:可以添加多个事件处理程序。后添加先执行。

问题:匿名函数无法移除。

var handler = function(){
  alert(this.id);
};
btn.attachEvent ("onclick", handler);
btn.detachEvent ("onclick", handler);

2.5跨浏览器事件处理程序

  • 1.创建一个方法addHandler():区分使用哪种方法来添加事件;

  • 2.创建一个对象EventUtil。拥有两个方法。

  • 3.addHandler(要操作的元素,事件名称,事件处理函数)。

  • 4.removeHandler(要操作的元素,事件名称,事件处理函数)。

var EventUtil = {
  addHandler: function(element,type,handler){
    if(element.addEventLister) {
      element.addEventListener(type,handler,false);
    } else if(element.attachEvent) {
      element.attachEvent("on"+type, handler);
    }else {
      element.["on"+type] =handler;
    }
  },
  removeHandler: function(element,type,handler){
    if(element.addEventLister) {
      element.removeEventListener(type,handler,false);
    } else if(element.attachEvent) {
      element.detachEvent("on"+type, handler);
    }else {
      element.["on"+type] = null;
    }
  }
};

使用:

EventUtil.addHandler(btn ,"click",handler);
EventUtil.removeHandler(btn ,"click",handler);

以上是“JS事件流与事件处理程序的示例分析”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注创新互联行业资讯频道!


当前题目:JS事件流与事件处理程序的示例分析
文章地址:http://scyanting.com/article/jhojei.html