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

更新时间：2019年08月16日 11:18:06 作者：最骚的就是你

这篇文章主要介绍了JS事件流与事件处理程序,结合实例形式分析了事件流与事件处理程序相关概念、原理、用法及操作注意事项,需要的朋友可以参考下

本文实例讲述了JS事件流与事件处理程序。分享给大家供大家参考，具体如下：

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

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

2.事件处理程序

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

2.1 HTML事件处理程序

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

2.1.1包含要执行的具体动作

<input type="button" value="Click me" onclick="alert('Clicked')"/>

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

<input type="button" value="Click me" onclick="showMessage()"/>

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);

PS：这里再为大家附上javascript系统自带事件参考表供大家参考查询：

javascript事件与功能说明大全：
http://tools.jb51.net/table/javascript_event

更多关于JavaScript相关内容可查看本站专题：《JavaScript事件相关操作与技巧大全》、《JavaScript常用函数技巧汇总》、《javascript面向对象入门教程》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

您可能感兴趣的文章:

浅析BootStrap模态框的使用(经典)
Bootstrap Modals（模态框）是使用定制的 Jquery 插件创建的。本文给大家介绍BootStrap模态框的使用，感兴趣的朋友一起学习吧
2016-04-04
使用js操作css实现js改变背景图片示例
有个朋友在weibo上问我可不可以用JS和CSS让页面每次刷新随机产生一张背景图，当然是可以的。具体的方法看下面的实现代码吧
2014-03-03
js将html页面转为pdf两种方法
最近遇到的需求,把html转成pdf文件下载导出,下面这篇文章主要给大家介绍了关于js将html页面转为pdf的两种方法,文中给出了详细的代码示例,需要的朋友可以参考下
2023-08-08
JS 实现可停顿的垂直滚动实例代码
下面小编就为大家带来一篇JS 实现可停顿的垂直滚动实例代码。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-11-11
Js实现累加上漂浮动画示例
这篇文章主要为大家介绍了Js实现累加上漂浮动画示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-11-11
layui+ssm实现数据批量删除功能
本篇文章给大家介绍layui+ssm实现数据批量删除功能,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
2023-12-12
javascript cloneNode()方法的使用
控件cloneNode（）方法的使用实例代码。
2009-07-07
JavaScript实现复制文章自动添加版权
自己辛辛苦苦写的文章，轻易就被别人复制－粘贴去了，是不是很伤心呢？小编今天给大家整理了两个方法，让别人复制自己的文章时，自动在文章的结尾添加自己的版权信息。
2016-08-08
JS日期格式化之javascript Date format
这篇文章主要介绍了JS日期格式化之javascript Date format的相关资料,需要的朋友可以参考下
2015-10-10
javascript 触发HTML元素绑定的函数
只能触发函数的执行，并不能完全模拟出实际的点击。
2010-09-09