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


Posted in Javascript onAugust 16, 2019

本文实例讲述了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.3water.com/table/javascript_event

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

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

Javascript 相关文章推荐
prototype 源码中文说明之 prototype.js
Sep 22 Javascript
javascript模拟的Ping效果代码 (Web Ping)
Mar 13 Javascript
读jQuery之一(对象的组成)
Jun 11 Javascript
jQuery动画animate方法使用介绍
May 06 Javascript
javaScript面向对象继承方法经典实现
Aug 20 Javascript
JavaScript代码简单实现求杨辉三角给定行的最大值
Oct 29 Javascript
Jquery中offset()和position()的区别分析
Feb 05 Javascript
简单谈谈javascript中this的隐式绑定
Feb 22 Javascript
javascript html5摇一摇功能的实现
Apr 19 Javascript
js构造函数创建对象是否加new问题
Jan 22 Javascript
微信小程序如何再次获取用户授权的方法
May 10 Javascript
JS实现放烟花效果
Mar 10 Javascript
javascript事件监听与事件委托实例详解
Aug 16 #Javascript
使用Vue-Awesome-Swiper实现旋转叠加轮播效果&amp;平移轮播效果
Aug 16 #Javascript
详解Vue中组件传值的多重实现方式
Aug 16 #Javascript
详解vue+axios给开发环境和生产环境配置不同的接口地址
Aug 16 #Javascript
JavaScript JSON数据处理全集(小结)
Aug 15 #Javascript
JointJS JavaScript流程图绘制框架解析
Aug 15 #Javascript
基于vue写一个全局Message组件的实现
Aug 15 #Javascript
You might like
PHP中文件上传的一个问题
2010/09/04 PHP
php入门学习知识点二 PHP简单的分页过程与原理
2011/07/14 PHP
解析php中call_user_func_array的作用
2013/06/07 PHP
Yii2框架控制器、路由、Url生成操作示例
2019/05/27 PHP
Add a Table to a Word Document
2007/06/15 Javascript
十个迅速提升JQuery性能让你的JQuery跑得更快
2012/12/10 Javascript
jQuery1.9.1针对checkbox的调整方法(prop)
2014/05/01 Javascript
javascript实现随时变化着的背景颜色
2015/04/02 Javascript
js+css实现上下翻页相册代码分享
2015/08/18 Javascript
js运动应用实例解析
2015/12/28 Javascript
js html css实现复选框全选与反选
2016/10/09 Javascript
Vue2.0实现购物车功能
2017/06/05 Javascript
基于js中document.cookie全面解析
2017/09/14 Javascript
详解在React里使用&quot;Vuex&quot;
2018/04/02 Javascript
你不知道的Vue技巧之--开发一个可以通过方法调用的组件(推荐)
2019/04/15 Javascript
vue项目强制清除页面缓存的例子
2019/11/06 Javascript
bootstrap-closable-tab可实现关闭的tab标签页插件
2020/08/09 Javascript
JavaScript TAB栏切换效果的示例
2020/11/05 Javascript
JavaScript中的Proxy对象
2020/11/27 Javascript
[02:48]DOTA2英雄基础教程 拉席克
2013/12/12 DOTA
深入理解python函数递归和生成器
2016/06/06 Python
Python之日期与时间处理模块(date和datetime)
2017/02/16 Python
Python实现自动发送邮件功能
2021/03/02 Python
Python中py文件引用另一个py文件变量的方法
2018/04/29 Python
python实现扫描ip地址的小程序
2019/04/16 Python
django 模型中的计算字段实例
2020/05/19 Python
英国安全产品购物网站:The Safe Shop
2017/03/20 全球购物
SQL Server笔试题
2012/01/10 面试题
小组合作学习反思
2014/02/18 职场文书
外语系毕业生求职自荐信
2014/04/12 职场文书
咖啡厅商业计划书
2014/09/15 职场文书
2016重阳节红领巾广播稿
2015/12/18 职场文书
创业计划书之餐饮
2019/09/02 职场文书
动画「进击的巨人」第86话播出感谢绘公开
2022/03/21 日漫
详解Golang如何优雅的终止一个服务
2022/03/21 Golang
Redis安装使用RedisJSON模块的方法
2022/03/23 Redis