JavaScript事件用法浅析


Posted in Javascript onOctober 31, 2016

本文实例讲述了JavaScript事件用法。分享给大家供大家参考,具体如下:

JavaScript通过事件与HTML交互。

事件流

事件流规定了事件的触发规则和顺序。DOM2规定了事件流包括三个阶段:事件捕获 -> 目标触发除 -> 事件冒泡。DOM2规定在事件捕获阶段不应调用事件处理程序,不过各大浏览器都不鸟它。DOM2级的事件处理程序操作函数对:addEventListener和removeEventListener的第三个参数则把这种事变成了DIY,这是一种妥协,同时让初学者认为dom的管理一片混乱。

var btn = document.getElementById("btn");
btn.addEventListener("click",function(){alert(this.id);},false);
document.body.addEventListener("click",function(){alert("body");},false);

更新上述js中addEventListener和removeEventListener中的第三个参数为true,对比为false时的效果,便大约能理解事件流了。

事件

事件是用户或浏览器自身执行的某和动作。

事件处理程序的添加方式

响应事件的函数称为事件处理程序。

指定事件处理程序有以下方式:

HTML特性指定。

如果某个元素支持某个事件,那么就有一个对应的HTML特性,用此特性就可以给其添加事件处理程序 。

<button id="btn" onclick="alert('button click')">button</button>

DOM0级。 将一个函数赋值给一个元素的事件处理程序属性:这是使用js指定事件生理程序的传统方式,至今仍被使用。

var btn = document.getElementById("btn");
btn.onmouseover = function(){
 this.innerHTML="按钮";
};

DOM2级。

通过addEventListener和removeEventListener来管理元素的事件。所有DOM节点都包含这两个方法,它们都包含三个参数,以add为例:

addEventListener(事件名,事件处理函数,是否在事件捕获时执行事件处理程序)

var btn = document.getElementById("btn");
btn.addEventListener("click",function(){alert(this.id);},true);
//注意下面的remove,它完全没有用,这两个匿名函数实际上是不同的对象
btn.removeEventListener("click",function(){alert(this.id);},true);

在上面代码中,指向同一对象的引用被认为是相同的,同样的申明生成的是两个外表相同但是存储在堆上两个不同位置的不同对象。

事件对象

DOM上的事件被触发时,会生成一个事件对象event。无论指定了什么事件处理程序都会传入event对象:准确的地说,event对象是在调用执行函数的执行环境中创建的,根据作用域链的定义,可知它是如何传入的。

var btn = document.getElementById("btn");
var btnClick = function(){
 alert(event.type);
}
btn.onclick = btnClick;//点击btn按钮时,弹出msg:click

event包含丰富的成员,用来控制访问事件,下面是所有事件的共有成员。

target:触发事件的动作直接作用的目标元素。
currentTarget:等于this,事件处理程序作用于的元素。
eventPhase:调用事件处理程序时,所处的事件流中的阶段。1,2,3 三个值分别对应事件流三阶段。
type:事件类型。单击事件对应 String: "click"。

事件类型

事件类型分为以下几类:

UI事件。
焦点事件。
鼠标与滚轮事件。
键盘与文本事件。
复合事件。
变动事件。
HTML5事件。
设备事件。
触摸与手势事件。

PS:关于javascript事件的详细说明可参考本站在线工具:

javascript事件与功能说明大全:
http://tools.3water.com/table/javascript_event

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

Javascript 相关文章推荐
Jquery 扩展方法
May 06 Javascript
js解析与序列化json数据(三)json的解析探讨
Feb 01 Javascript
jQuery插件PageSlide实现左右侧栏导航菜单
Apr 12 Javascript
jQuery解决$符号命名冲突
Jun 18 Javascript
用AngularJS来实现监察表单按钮的禁用效果
Nov 02 Javascript
js实现倒计时及时间对象
Nov 15 Javascript
JavaScript仿支付宝6位数字密码输入框
Dec 29 Javascript
利用vueJs实现图片轮播实例代码
Jun 03 Javascript
Angular 2 利用Router事件和Title实现动态页面标题的方法
Aug 23 Javascript
微信公众号平台接口开发 菜单管理的实现
Aug 14 Javascript
Bootstrap实现前端登录页面带验证码功能完整示例
Mar 26 Javascript
Nuxt pages下不同的页面对应layout下的页面布局操作
Nov 05 Javascript
js中通过getElementsByName访问name集合对象的方法
Oct 31 #Javascript
JavaScript递归操作实例浅析
Oct 31 #Javascript
在html中引入外部js文件,并调用带参函数的方法
Oct 31 #Javascript
Validform表单验证总结篇
Oct 31 #Javascript
Javascript数组中push方法用法分析
Oct 31 #Javascript
JavaScript中的await/async的作用和用法
Oct 31 #Javascript
使用 jQuery.ajax 上传带文件的表单遇到的问题
Oct 31 #Javascript
You might like
测试您的 PHP 水平的题目
2007/05/30 PHP
php中如何判断一个网页请求是ajax请求还是普通请求
2013/08/10 PHP
一致性哈希算法以及其PHP实现详细解析
2013/08/24 PHP
PHP中如何防止外部恶意提交调用ajax接口
2016/04/11 PHP
thinkPHP中volist标签用法示例
2016/12/06 PHP
laravel5实现微信第三方登录功能
2018/12/06 PHP
Aster vs KG BO3 第一场2.19
2021/03/10 DOTA
jQuery.holdReady()方法用法实例
2014/12/27 Javascript
不用一句js代码初始化组件
2016/01/27 Javascript
AngularJS 与百度地图的结合实例
2016/10/20 Javascript
怎样判断jQuery当前元素是隐藏还是显示
2016/11/23 Javascript
vue.js指令v-model实现方法
2016/12/05 Javascript
node.js连接MongoDB数据库的2种方法教程
2017/05/17 Javascript
Es6 Generator函数详细解析
2018/02/24 Javascript
vue使用自定义指令实现拖拽
2021/01/29 Javascript
浅谈Vue为什么不能检测数组变动
2019/10/14 Javascript
vue实现两个组件之间数据共享和修改操作
2020/11/12 Javascript
Selenium定时刷新网页的实现代码
2018/10/31 Python
django开发post接口简单案例,获取参数值的方法
2018/12/11 Python
Django Rest framework权限的详细用法
2019/07/25 Python
python科学计算之scipy——optimize用法
2019/11/25 Python
tensorflow 保存模型和取出中间权重例子
2020/01/24 Python
Omio俄罗斯:一次搜索公共汽车、火车和飞机的机票
2018/11/17 全球购物
德国、奥地利和瑞士最大的旅行和度假门户网站:HolidayCheck
2019/11/14 全球购物
Quiksilver荷兰官方网站:冲浪和滑雪板
2019/11/16 全球购物
几道数据库的面试题或笔试题
2014/05/31 面试题
几个常见的消息中间件(MOM)
2014/01/08 面试题
幼师自荐信
2013/10/26 职场文书
办公室前台的岗位职责
2013/12/20 职场文书
家长对孩子的感言
2014/03/10 职场文书
英语教师岗位职责
2014/03/16 职场文书
周年庆典主持词
2014/04/02 职场文书
2014国庆节幼儿园亲子活动方案
2014/09/16 职场文书
小学教师求职信范文
2015/03/20 职场文书
解决pytorch读取自制数据集出现过的问题
2021/05/31 Python
TensorFlow中tf.batch_matmul()的用法
2021/06/02 Python