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 相关文章推荐
javascript编程起步(第七课)
Feb 27 Javascript
jquery.validate使用攻略 第五步 正则验证
Jul 01 Javascript
jquery阻止冒泡事件使用模拟事件
Sep 06 Javascript
用jquery模仿的a的title属性的例子
Oct 22 Javascript
js实现百度联盟中一款不错的图片切换效果完整实例
Mar 04 Javascript
JavaScript中的原型prototype属性使用详解
Jun 05 Javascript
探究Javascript模板引擎mustache.js使用方法
Jan 26 Javascript
AngularJS通过$location获取及改变当前页面的URL
Sep 23 Javascript
JS实现字符串转驼峰格式的方法
Dec 16 Javascript
layui框架table 数据表格的方法级渲染详解
Aug 19 Javascript
关于element-ui的隐藏组件el-scrollbar的使用
May 29 Javascript
微信小程序中wxs文件的一些妙用分享
Feb 18 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
Erlang的运算符(比较运算符,数值运算符,移位运算符,逻辑运算符)
2012/07/23 PHP
PHP ? EasyUI DataGrid 资料存的方式介绍
2012/11/07 PHP
PHP字符串word末字符实现大小写互换的方法
2014/11/10 PHP
解读PHP中的垃圾回收机制
2015/08/10 PHP
php读取qqwry.dat ip地址定位文件的类实例代码
2016/11/15 PHP
在Javascript中定义对象类别
2006/12/22 Javascript
Javascript与flash交互通信基础教程
2008/08/07 Javascript
检测input每次的输入是否合法遇到汉字输入就有问题
2012/05/23 Javascript
js判断选择的时间是否大于今天的代码
2013/08/20 Javascript
php+ajax+jquery实现点击加载更多内容
2015/05/03 Javascript
详解JavaScript的AngularJS框架中的作用域与数据绑定
2016/03/04 Javascript
Javascript如何判断数据类型和数组类型
2016/06/22 Javascript
详解handlebars+require基本使用方法
2016/12/21 Javascript
Bootstrap模态框(Modal)实现过渡效果
2017/03/17 Javascript
微信小程序promsie.all和promise顺序执行
2017/10/27 Javascript
element 结合vue 在表单验证时有值却提示错误的解决办法
2018/01/22 Javascript
浅谈Webpack下多环境配置的思路
2018/06/27 Javascript
在Vue mounted方法中使用data变量详解
2019/11/05 Javascript
javascript数组元素删除方法delete和splice解析
2019/12/09 Javascript
jQuery操作动画完整实例分析
2020/01/10 jQuery
在vue中created、mounted等方法使用小结
2020/07/21 Javascript
vue 动态添加的路由页面刷新时失效的原因及解决方案
2021/02/26 Vue.js
Python字符串的encode与decode研究心得乱码问题解决方法
2009/03/23 Python
基于python中pygame模块的Linux下安装过程(详解)
2017/11/09 Python
python 产生token及token验证的方法
2018/12/26 Python
matplotlib bar()实现百分比堆积柱状图
2021/02/24 Python
Expedia韩国官网:亚洲发展最快的在线旅游门户网站
2018/02/26 全球购物
《夏夜多美》教学反思
2014/02/17 职场文书
2014年小学生教师节演讲稿范文
2014/09/10 职场文书
介绍信的格式
2015/01/30 职场文书
2015年七夕爱情寄语
2015/03/24 职场文书
主持稿开场白
2015/06/01 职场文书
党小组推荐意见
2015/06/02 职场文书
郭明义观后感
2015/06/08 职场文书
Redis延迟队列和分布式延迟队列的简答实现
2021/05/13 Redis
MySQL数据库配置信息查看与修改方法详解
2022/06/25 MySQL