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 validate 验证注册表单实例演示
Mar 25 Javascript
js简单实现让文本框内容逐个字的显示出来
Oct 22 Javascript
浅析Cookie中的Path与domain
Dec 18 Javascript
jquery 图片缩放拖动的简单实例
Jan 08 Javascript
ExtJS中设置下拉列表框不可编辑的方法
May 07 Javascript
详解JavaScript对象和数组
Dec 03 Javascript
基于angularJS的表单验证指令介绍
Oct 21 Javascript
JavaScript代码执行的先后顺序问题
Oct 29 Javascript
使用ef6创建oracle数据库的实体模型遇到的问题及解决方案
Nov 09 Javascript
详解如何使用router-link对象方式传递参数?
May 02 Javascript
Vue实现浏览器打印功能的代码
Apr 17 Javascript
js+html+css实现手动轮播和自动轮播
Dec 30 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冒泡排序算法代码详细解读
2011/07/17 PHP
php 阴历-农历-转换类代码
2012/01/16 PHP
Symfony2联合查询实现方法
2016/03/18 PHP
thinkPHP5.0框架引入Traits功能实例分析
2017/03/18 PHP
tp5递归 无限级分类详解
2019/10/18 PHP
日期函数扩展类Ver0.1.1
2006/09/07 Javascript
jquery中eq和get的区别与使用方法
2011/04/14 Javascript
浅析return false的正确使用
2013/11/04 Javascript
用nodejs实现PHP的print_r函数代码
2014/03/14 NodeJs
jQuery表格插件datatables用法汇总
2016/03/29 Javascript
JavaScript 消息框效果【实现代码】
2016/04/27 Javascript
jQuery遍历json的方法(推荐)
2016/06/12 Javascript
js浏览器html5表单验证
2016/10/17 Javascript
canvas滤镜效果实现代码
2017/02/06 Javascript
基于jQuery实现简单人工智能聊天室
2017/02/10 Javascript
ES6学习教程之块级作用域详解
2017/10/09 Javascript
js实现rem自动匹配计算font-size的示例
2017/11/18 Javascript
详解如何在Vue里建立长按指令
2018/08/20 Javascript
[27:28]Ti4 冒泡赛第二天 iG vs NEWBEE 1
2014/07/15 DOTA
Centos5.x下升级python到python2.7版本教程
2015/02/14 Python
老生常谈Python进阶之装饰器
2017/05/11 Python
python实现单线程多任务非阻塞TCP服务端
2017/06/13 Python
Python 存储字符串时节省空间的方法
2019/04/23 Python
python实现得到当前登录用户信息的方法
2019/06/21 Python
Spring http服务远程调用实现过程解析
2020/06/11 Python
python 高阶函数简单介绍
2021/02/19 Python
html5 Web SQL Database 之事务处理函数transaction与executeSQL解析
2013/11/07 HTML / CSS
澳大利亚领先的在线机械五金、园艺和存储专家:Edisons
2018/03/24 全球购物
Rossignol金鸡美国官网:始于1907年法国百年雪具品牌
2019/03/06 全球购物
英国户外服装、鞋类和设备的领先零售商:Millets
2020/10/12 全球购物
2014年测量员工作总结
2014/12/12 职场文书
三年级上册科学教学计划
2015/01/21 职场文书
接收函
2019/04/22 职场文书
高中语文教材(文学文化常识大全一)
2019/08/13 职场文书
7个关于Python的经典基础案例
2021/11/07 Python
Python列表的索引与切片
2022/04/07 Python