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 相关文章推荐
js实现的网页颜色代码表全集
Jul 17 Javascript
一段批量给页面上的控件赋值js
Jun 19 Javascript
使用隐藏的new来创建对象
Mar 29 Javascript
open 动态修改img的onclick事件示例代码
Nov 13 Javascript
JavaScript动态提示输入框输入字数的方法
Jul 27 Javascript
详解javascript事件冒泡
Jan 09 Javascript
JavaScript+html5 canvas绘制渐变区域完整实例
Jan 26 Javascript
纯js实现倒计时功能
Jan 06 Javascript
微信小程序 详解Page中data数据操作和函数调用
Jan 12 Javascript
JavaScript实现水平进度条拖拽效果
Jan 18 Javascript
详解JavaScript栈内存与堆内存
Apr 04 Javascript
vue打开其他项目页面并传入数据详解
Nov 25 Vue.js
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中使用curl_init函数的说明
2010/11/02 PHP
PHP判断是否为空的几个函数对比
2015/04/21 PHP
php实现中文转数字
2016/02/18 PHP
Prototype Hash对象 学习
2009/07/19 Javascript
让jQuery Mobile不显示讨厌loading界面的方法
2014/02/19 Javascript
jquery队列函数用法实例
2014/12/16 Javascript
NodeJS学习笔记之Connect中间件模块(二)
2015/01/27 NodeJs
深入理解JavaScript系列(34):设计模式之命令模式详解
2015/03/03 Javascript
JavaScript中Math对象的方法介绍
2017/01/05 Javascript
jQuery菜单实例(全选,反选,取消)
2017/08/28 jQuery
three.js实现3D影院的原理的代码分析
2017/12/18 Javascript
使用javascript函数编写简单银行取钱存钱流程
2018/05/26 Javascript
微信小程序使用gitee进行版本管理
2018/09/20 Javascript
利用JS动态生成隔行换色HTML表格的两种方法
2018/10/09 Javascript
如何在Vue.js中实现标签页组件详解
2019/01/02 Javascript
React 全自动数据表格组件——BodeGrid的实现思路
2019/06/12 Javascript
利用JavaScript模拟京东按键输入功能
2020/12/01 Javascript
Python使用pandas处理CSV文件的实例讲解
2018/06/22 Python
解决python中的幂函数、指数函数问题
2019/11/25 Python
PyTorch的SoftMax交叉熵损失和梯度用法
2020/01/15 Python
关于Tensorflow分布式并行策略
2020/02/03 Python
Python基础类继承重写实现原理解析
2020/04/03 Python
TensorFlow中如何确定张量的形状实例
2020/06/23 Python
Python 使用 PyQt5 开发的关机小工具分享
2020/07/16 Python
检测用户浏览器是否支持CSS3的方法
2009/08/29 HTML / CSS
如何查询Oracle数据库中已经创建的索引
2013/10/11 面试题
95%的面试官都会问到的50道Java线程题,附答案
2012/08/03 面试题
九年级历史教学反思
2014/01/27 职场文书
志愿者服务感言
2014/02/27 职场文书
实习会计求职自荐信范文
2014/03/10 职场文书
小学三八妇女节活动总结
2015/02/06 职场文书
2015年为民办实事工作总结
2015/05/26 职场文书
刘胡兰观后感
2015/06/16 职场文书
总经理2015中秋节致辞
2015/07/29 职场文书
详解Vue的sync修饰符
2021/05/15 Vue.js
gojs实现蚂蚁线动画效果
2022/02/18 Javascript