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程序设计有所帮助。

相关文章

  • JS实现的五级联动菜单效果完整实例

    JS实现的五级联动菜单效果完整实例

    这篇文章主要介绍了JS实现的五级联动菜单效果,结合完整实例形式分析了js多级联动菜单的完整实现步骤,涉及JS数组遍历、扩展及元素节点操作相关技巧,需要的朋友可以参考下
    2017-02-02
  • js+audio实现音乐播放器

    js+audio实现音乐播放器

    这篇文章主要为大家详细介绍了js+audio实现音乐播放器,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-09-09
  • javascript canvas实现简易时钟例子

    javascript canvas实现简易时钟例子

    这篇文章主要为大家详细介绍了javascript canvas实现简易时钟例子,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-09-09
  • 简单实用的js调试logger组件实现代码

    简单实用的js调试logger组件实现代码

    开发js组件的时间调试总是麻烦的,最常用的就是用alert或者debugger来测试js的运行状态。
    2010-11-11
  • JavaScript数组去重的几种方法效率测试

    JavaScript数组去重的几种方法效率测试

    JavaScript数组去重是前端面试酷爱的问题,问题简单而又能看出程序员对计算机程序执行过程的理解如何。数组去重的方法有很多,到底哪种是最理想的我不清楚。于是我测试了下数组去重的效率。测试二十万个数据,随着数据越多效率很明显的就体验了出来。下面来一起看看吧。
    2016-10-10
  • javascript trim 去空格函数实现代码

    javascript trim 去空格函数实现代码

    去除字符串左右两端的空格,在vbscript里面可以轻松地使用 trim、ltrim 或 rtrim,但在js中却没有这3个内置方法,需要手工编写。下面的实现方法是用到了正则表达式,效率不错,并把这三个方法加入String对象的内置方法中去。
    2008-10-10
  • JS实现点击按钮获取页面高度的方法

    JS实现点击按钮获取页面高度的方法

    这篇文章主要介绍了JS实现点击按钮获取页面高度的方法,涉及JavaScript针对页面元素高度的各种常见运算,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-11-11
  • javascript使用正则表达式实现注册登入校验

    javascript使用正则表达式实现注册登入校验

    这篇文章主要为大家详细介绍了javascript使用正则表达式实现注册登入校验,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-09-09
  • JS 通过系统时间限定动态添加 select option的实例代码

    JS 通过系统时间限定动态添加 select option的实例代码

    这篇文章主要介绍了JS 通过系统时间限定 动态添加 select option的实例代码,非常不错具有参考借鉴价值,需要的朋友可以参考下
    2016-06-06
  • fullPage.js和CSS3实现全屏滚动效果

    fullPage.js和CSS3实现全屏滚动效果

    这篇文章主要为大家详细介绍了fullPage.js和CSS3实现全屏滚动效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-05-05

最新评论