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 css样式操作代码(批量操作)
Oct 09 Javascript
JS date对象的减法处理实现代码
Dec 28 Javascript
js select option对象小结
Dec 20 Javascript
javascript匿名函数实例分析
Nov 18 Javascript
JavaScript实现的简单幂函数实例
Apr 17 Javascript
jQuery图片旋转插件jQueryRotate.js用法实例(附demo下载)
Jan 21 Javascript
AngularJs验证重复密码的方法(两种)
Nov 25 Javascript
jQuery实现可移动选项的左右下拉列表示例
Dec 26 Javascript
Vue计算属性的学习笔记
Mar 22 Javascript
vue-cli项目中怎么使用mock数据
Sep 27 Javascript
使用vue cli4.x搭建vue项目的过程详解
May 08 Javascript
vue3语法糖内的defineProps及defineEmits
Apr 14 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/12/24 PHP
学习php设计模式 php实现抽象工厂模式
2015/12/07 PHP
laravel实现分页样式替换示例代码(增加首、尾页)
2017/09/22 PHP
jQuery选择没有colspan属性的td的代码
2010/07/06 Javascript
js获取网页高度(详细整理)
2012/12/28 Javascript
window.open关于浏览器拦截问题分析及解决方法
2013/02/05 Javascript
EditPlus注册码生成器(js代码实现)
2013/03/25 Javascript
javascript实现yield的方法
2013/11/06 Javascript
jquery批量设置属性readonly和disabled的方法
2014/01/24 Javascript
js实现同一页面多个运动效果的方法
2015/04/10 Javascript
原生JS实现图片无缝滚动方法(附带封装的运动框架)
2017/10/01 Javascript
Vue 拦截器对token过期处理方法
2018/01/23 Javascript
Angular学习笔记之集成三方UI框架、控件的示例
2018/03/23 Javascript
js中apply()和call()的区别与用法实例分析
2018/08/14 Javascript
基于Angular中ng-controller父子级嵌套的相关属性详解
2018/10/08 Javascript
vue-cli 2.*中导入公共less文件的方法步骤
2018/11/22 Javascript
vue+iview 兼容IE11浏览器的实现方法
2019/01/07 Javascript
Vue使用watch监听一个对象中的属性的实现方法
2019/05/10 Javascript
vuecli项目构建SSR服务端渲染的实现
2020/10/30 Javascript
vantUI 获得piker选中值的自定义ID操作
2020/11/04 Javascript
使用PDB简单调试Python程序简明指南
2015/04/25 Python
解决Python传递中文参数的问题
2015/08/04 Python
python中requests库session对象的妙用详解
2017/10/30 Python
python绘制简单折线图代码示例
2017/12/19 Python
基于Python实现的微信好友数据分析
2018/02/26 Python
使用Numpy读取CSV文件,并进行行列删除的操作方法
2018/07/04 Python
Form表单及django的form表单的补充
2019/07/25 Python
详解Python 4.0 预计推出的新功能
2019/07/26 Python
Python获取对象属性的几种方式小结
2020/03/12 Python
Android Q之气泡弹窗的实现示例
2020/06/23 Python
基于Jquery和Css3代码制作可以缩放的搜索框
2015/11/19 HTML / CSS
授权委托书样本
2014/04/03 职场文书
2014年教研室工作总结
2014/12/06 职场文书
创业计划书之香辣虾火锅
2019/09/23 职场文书
一起来学习Python的元组和列表
2022/03/13 Python
Python实现将多张图片合成MP4视频并加入背景音乐
2022/04/28 Python