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 相关文章推荐
js 绑定带参数的事件以及手动触发事件
Apr 27 Javascript
jquery及原生js获取select下拉框选中的值示例
Oct 25 Javascript
JS简单的图片放大缩小的两种方法
Nov 11 Javascript
不使用ajax实现无刷新提交表单
Dec 21 Javascript
45个JavaScript编程注意事项、技巧大全
Feb 11 Javascript
js实现抽奖效果
Mar 27 Javascript
深入理解Angular4中的依赖注入
Jun 07 Javascript
JS实现的简单标签点击切换功能示例
Sep 21 Javascript
HTML5+JS+JQuery+ECharts实现异步加载问题
Dec 16 jQuery
JavaScript函数定义方法实例详解
Mar 05 Javascript
Javascript如何实现双指控制图片功能
Feb 25 Javascript
Vue.js桌面端自定义滚动条组件之美化滚动条VScroll
Dec 01 Vue.js
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通过字符串调用函数示例
2014/03/02 PHP
thinkphp项目如何自定义微信分享描述内容
2017/02/20 PHP
javascript 面向对象编程基础:封装
2009/08/21 Javascript
Extjs入门之动态加载树代码
2010/04/09 Javascript
如何确保JavaScript的执行顺序 之jQuery.html并非万能钥匙
2011/03/03 Javascript
JS正则中的RegExp对象对象
2012/11/07 Javascript
JS命名空间的另一种实现
2013/08/09 Javascript
JS生成不重复随机数组的函数代码
2014/06/10 Javascript
node+express+jade制作简单网站指南
2014/11/26 Javascript
jQuery移动页面开发中的触摸事件与虚拟鼠标事件简介
2015/12/03 Javascript
使用jQuery调用XML实现无刷新即时聊天
2016/08/07 Javascript
AngularJs  Using $location详解及示例代码
2016/09/02 Javascript
javascript 利用arguments实现可变长参数
2016/11/21 Javascript
Javascript基于jQuery UI实现选中区域拖拽效果
2016/11/25 Javascript
浅谈jQuery中事情的动态绑定
2017/02/12 Javascript
JavaScript数组迭代方法
2017/03/03 Javascript
Vue如何实现组件的源码解析
2017/06/08 Javascript
jQuery插件实现的日历功能示例【附源码下载】
2018/09/07 jQuery
Vue中CSS动画原理的实现
2019/02/13 Javascript
在element-ui的select下拉框加上滚动加载
2019/04/18 Javascript
webpack中如何加载静态文件的方法步骤
2019/05/18 Javascript
解决Angularjs异步操作后台请求用$q.all排列先后顺序问题
2019/11/29 Javascript
详解ES6 CLASS在微信小程序中的应用实例
2020/04/24 Javascript
探寻python多线程ctrl+c退出问题解决方案
2014/10/23 Python
django数据库migrate失败的解决方法解析
2018/02/08 Python
在Django中输出matplotlib生成的图片方法
2018/05/24 Python
幼儿园教师培训方案
2014/02/04 职场文书
口才训练演讲稿范文
2014/09/16 职场文书
机关中层领导干部群众路线教育实践活动个人对照检查材料
2014/09/24 职场文书
检讨书范文大全
2015/05/07 职场文书
教师学习心得体会范文
2016/01/21 职场文书
go语言中GOPATH GOROOT的作用和设置方式
2021/05/05 Golang
使用Vue3+Vant组件实现App搜索历史记录功能(示例代码)
2021/06/09 Vue.js
总结Python变量的相关知识
2021/06/28 Python
Pandas搭配lambda组合使用详解
2022/01/22 Python
Spring Boot实战解决高并发数据入库之 Redis 缓存+MySQL 批量入库问题
2022/02/12 Redis