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 相关文章推荐
Opacity.js
Jan 22 Javascript
ECMAScript 基础知识
Jun 29 Javascript
js格式化时间和js格式化时间戳示例
Feb 10 Javascript
js的touch事件的实际引用
Oct 13 Javascript
JS获取鼠标位置距浏览器窗口距离的方法示例
Apr 11 Javascript
微信小程序 本地数据存储实例详解
Apr 13 Javascript
详解vue 模版组件的三种用法
Jul 21 Javascript
inner join 内联与left join 左联的实例代码
Sep 18 Javascript
详解angular分页插件tm.pagination二次触发问题解决方案
Jul 20 Javascript
在vue项目中使用Jquery-contextmenu插件的步骤讲解
Jan 27 jQuery
基于jQuery的时间戳与日期间的转化
Jun 21 jQuery
js 图片懒加载的实现
Oct 21 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下尝试使用GraphicsMagick的缩略图功能
2011/01/01 PHP
ubuntu下编译安装xcache for php5.3 的具体操作步骤
2013/06/18 PHP
PHP快速导出百万级数据到CSV或者EXCEL文件
2020/11/27 PHP
使用JS进行目录上传(相当于批量上传)
2010/12/05 Javascript
让你的博文自动带上缩址的实现代码,方便发到微博客上
2010/12/28 Javascript
jquery和javascript的区别(常用方法比较)
2013/07/04 Javascript
Javascript中匿名函数的多种调用方式总结
2013/12/06 Javascript
编写简单的jQuery提示插件
2014/12/21 Javascript
js实现屏幕自适应局部代码分享
2015/01/30 Javascript
JavaScript 对象深入学习总结(经典)
2015/09/29 Javascript
html判断当前页面是否在iframe中的实例
2016/11/30 Javascript
教你5分钟学会用requirejs(必看篇)
2017/07/25 Javascript
理解Koa2中的async&amp;await的用法
2018/02/05 Javascript
微信小程序云开发(数据库)详解
2019/05/17 Javascript
LayUi数据表格自定义赋值方式
2019/10/26 Javascript
[45:16]完美世界DOTA2联赛循环赛 IO vs FTD BO2第二场 11.05
2020/11/06 DOTA
python通过伪装头部数据抵抗反爬虫的实例
2018/05/07 Python
实用自动化运维Python脚本分享
2018/06/04 Python
python 寻找list中最大元素对应的索引方法
2018/06/28 Python
Python3实现爬虫爬取赶集网列表功能【基于request和BeautifulSoup模块】
2018/12/05 Python
pandas如何处理缺失值
2019/07/31 Python
找Python安装目录,设置环境路径以及在命令行运行python脚本实例
2020/03/09 Python
Django用户登录与注册系统的实现示例
2020/06/03 Python
CSS Grid布局教程之浏览器开启CSS Grid Layout汇总
2014/12/30 HTML / CSS
努比亚手机官网:nubia
2016/10/06 全球购物
德国家具在线:Fashion For Home
2017/03/11 全球购物
学生自我鉴定模板
2013/12/30 职场文书
2014年会演讲稿范文
2014/01/06 职场文书
人事专员职责
2014/02/22 职场文书
公司踏青活动方案
2014/08/16 职场文书
技术入股合作协议书
2014/10/07 职场文书
2015年基层党建工作总结
2015/05/14 职场文书
少年雷锋观后感
2015/06/10 职场文书
pytorch中的numel函数用法说明
2021/05/13 Python
CSS Transition通过改变Height实现展开收起元素
2021/08/07 HTML / CSS
pd.DataFrame中的几种索引变换的实现
2022/06/16 Python