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库及其他库之间的$命名冲突
Sep 15 Javascript
javascript loadScript异步加载脚本示例讲解
Nov 14 Javascript
js中一个函数获取另一个函数返回值问题探讨
Nov 21 Javascript
JS实现根据出生年月计算年龄
Jan 10 Javascript
javascript移动设备Web开发中对touch事件的封装实例
Jun 05 Javascript
js的window.showModalDialog及window.open用法实例分析
Jan 29 Javascript
jQuery增加、删除及修改select option的方法
Aug 19 Javascript
详解VUE 数组更新
Dec 16 Javascript
使用ngrok+express解决本地环境中微信接口调试问题
Feb 26 Javascript
vue如何进行动画的封装
Sep 26 Javascript
Vue中通过vue-router实现命名视图的问题
Apr 23 Javascript
详解关于Vue单元测试的几个坑
Apr 26 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
MVC模式的PHP实现
2006/10/09 PHP
php curl获取网页内容(IPV6下超时)的解决办法
2013/07/16 PHP
Yaf框架封装的MySQL数据库操作示例
2019/03/06 PHP
一个简单的JavaScript 日期计算算法
2009/09/11 Javascript
容易被忽略的JS脚本特性
2011/09/13 Javascript
根据json字符串生成Html的一种方式
2013/01/09 Javascript
jquery放大镜效果超漂亮噢
2013/11/15 Javascript
JavaScript的21条基本知识点
2014/03/04 Javascript
node.js入门教程迷你书、node.js入门web应用开发完全示例
2014/04/06 Javascript
jquery实现平滑的二级下拉菜单效果
2015/08/26 Javascript
jQuery文字提示与图片提示效果实现方法
2016/07/04 Javascript
关于jQuery.ajax()的jsonp碰上post详解
2017/07/02 jQuery
Vue瀑布流插件的使用示例
2018/09/19 Javascript
15 分钟掌握vue-next响应式原理
2019/10/13 Javascript
微信小程序中的video视频实现 自定义播放按钮、封面图、视频封面上文案
2020/01/02 Javascript
JS实现横向轮播图(中级版)
2020/01/18 Javascript
webpack.DefinePlugin与cross-env区别详解
2020/02/23 Javascript
Vue 3.0 全家桶抢先体验
2020/04/28 Javascript
Python中的生成器和yield详细介绍
2015/01/09 Python
python3实现短网址和数字相互转换的方法
2015/04/28 Python
Python三级菜单的实例
2017/09/13 Python
python3.5安装python3-tk详解
2019/04/26 Python
Python在cmd上打印彩色文字实现过程详解
2019/08/07 Python
解决python中的幂函数、指数函数问题
2019/11/25 Python
python飞机大战pygame游戏之敌机出场实现方法详解
2019/12/17 Python
在Tensorflow中实现梯度下降法更新参数值
2020/01/23 Python
Python逐行读取文件内容的方法总结
2020/02/14 Python
keras实现VGG16方式(预测一张图片)
2020/07/07 Python
分享一枚pycharm激活码适用所有pycharm版本我的pycharm2020.2.3激活成功
2020/11/20 Python
如何用Django处理gzip数据流
2021/01/29 Python
CSS3实现精美横向滚动菜单按钮
2017/04/14 HTML / CSS
通过CSS3的object-fit来调整图片适配尺寸的技巧简介
2016/02/27 HTML / CSS
电子银行营销方案
2014/02/22 职场文书
体育专业求职信
2014/07/16 职场文书
我的大学四年规划书范文2014
2014/09/26 职场文书
Golang 正则匹配效率详解
2021/04/25 Golang