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 相关文章推荐
论坛里点击别人帖子下面的回复,回复标题变成“回复 24# 的帖子”
Jun 14 Javascript
再谈JavaScript异步编程
Jan 27 Javascript
js获取页面及个元素高度、宽度的代码
Apr 26 Javascript
纯js实现悬浮按钮组件
Dec 17 Javascript
angularJS模态框$modal实例代码
May 27 Javascript
vue权限路由实现的方法示例总结
Jul 29 Javascript
详解Next.js页面渲染的优化方案
Jan 27 Javascript
js getBoundingClientRect使用方法详解
Jul 17 Javascript
ng-alain的sf如何自定义部件的流程
Jun 12 Javascript
vue 清空input标签 中file的值操作
Jul 21 Javascript
详解node.js 事件循环
Jul 22 Javascript
JSON 入门教程基础篇 json入门学习笔记
Sep 22 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调用mysql存储过程
2007/02/14 PHP
php实现jQuery扩展函数
2009/10/30 PHP
php读取文件内容的三种可行方法示例介绍
2014/02/08 PHP
采用memcache在web集群中实现session的同步会话
2014/07/05 PHP
thinkPHP内置字符串截取函数用法详解
2016/11/15 PHP
微信公众平台开发教程④ ThinkPHP框架下微信支付功能图文详解
2019/04/10 PHP
laravel实现查询最后执行的一条sql语句的方法
2019/10/09 PHP
禁止刷新,回退的JS
2006/11/25 Javascript
javascript replace方法与正则表达式
2008/02/19 Javascript
js DOM的学习笔记
2011/12/22 Javascript
javascipt:filter过滤介绍及使用
2014/09/10 Javascript
Bootstrap每天必学之滚动监听
2016/03/16 Javascript
BootStrap制作导航条实例代码
2016/05/06 Javascript
javascript url几种编码方式详解
2016/06/06 Javascript
JS控制HTML元素的显示和隐藏的两种方法
2016/09/27 Javascript
JS 实现计算器详解及实例代码(一)
2017/01/08 Javascript
解决node修改后需频繁手动重启的问题
2018/05/13 Javascript
js继承的这6种方式!(上)
2019/04/23 Javascript
Taro小程序自定义顶部导航栏功能的实现
2020/12/17 Javascript
python文件比较示例分享
2014/01/10 Python
python urllib爬取百度云连接的实例代码
2017/06/19 Python
[原创]Python入门教程5. 字典基本操作【定义、运算、常用函数】
2018/11/01 Python
CSS3圆角和渐变2种常用功能详解
2016/01/06 HTML / CSS
TripAdvisor西班牙官方网站:全球领先的旅游网站
2018/01/10 全球购物
总经理文秘岗位职责
2014/02/03 职场文书
2014年情人节活动方案
2014/02/16 职场文书
矿泉水广告词
2014/03/20 职场文书
《每逢佳节倍思亲》教后反思
2014/04/19 职场文书
梅花魂教学反思
2014/04/25 职场文书
团结演讲稿范文
2014/05/23 职场文书
领导班子四风表现材料
2014/08/23 职场文书
延安红色之旅心得体会
2014/10/07 职场文书
2015大学生求职信范文
2015/03/20 职场文书
2016年国庆节宣传标语
2015/11/25 职场文书
ant design vue的form表单取值方法
2022/06/01 Vue.js
win10识别不了U盘怎么办 win10系统读取U盘失败的解决办法
2022/08/05 数码科技