js事件(Event)知识整理


Posted in Javascript onOctober 11, 2012

鼠标事件

鼠标移动到目标元素上的那一刻,首先触发mouseover
之后如果光标继续在元素上移动,则不断触发mousemove
如果按下鼠标上的设备(左键,右键,滚轮……),则触发mousedown
当设备弹起的时候触发mouseup
目标元素的滚动条发生移动时(滚动滚轮/拖动滚动条。。)触发scroll
滚动滚轮触发mousewheel,这个要区别于scroll
鼠标移出元素的那一刻,触发mouseout

事件注册

平常我们绑定事件的时候用dom.onxxxx=function(){}的形式
这种方式是给元素的onxxxx属性赋值,只能绑定有一个处理句柄。
但很多时候我们需要绑定多个处理句柄到一个事件上,而且还可能要动态的增删某个处理句柄
下面的事件注册方式就能解决这个需求。

先介绍一下四个方法

//IE以外 
target.addEventListener(type,listener,useCapture) 
target.removeEventListener(type,listener,useCapture); 
target :文档节点、document、window 或 XMLHttpRequest。 
type :字符串,事件名称,不含“on”,比如“click”、“mouseover”、“keydown”等。 
listener :实现了 EventListener 接口或者是 JavaScript 中的函数。 
useCapture :是否使用捕捉,一般用 false。 
//IE 
target.attachEvent(type, listener); 
target.detachEvent(type, listener); 
target :文档节点、document、window 或 XMLHttpRequest。 
type :字符串,事件名称,含“on”,比如“onclick”、“onmouseover”、“onkeydown”等。 
listener :实现了 EventListener 接口或者是 JavaScript 中的函数。 
两者使用的原理:可对执行的优先级不一样,实例讲解如下: 
ele.attachEvent("onclick",method1); 
ele.attachEvent("onclick",method2); 
ele.attachEvent("onclick",method3); 
执行顺序为method3->method2->method1 
ele.addEventListener("click",method1,false); 
ele.addEventListener("click",method2,false); 
ele.addEventListener("click",method3,false); 
执行顺序为method1->method2->method3 
兼容后的方法 
var func = function(){}; 
//例:addEvent(window,"load",func) 
function addEvent(elem, type, fn) { 
if (elem.attachEvent) { 
elem.attachEvent('on' + type, fn); 
return; 
} 
if (elem.addEventListener) { 
elem.addEventListener(type, fn, false); 
} 
} 
//例:removeEvent(window,"load",func) 
function removeEvent(elem, type, fn) { 
if (elem.detachEvent) { 
elem.detachEvent('on' + type, fn); 
return; 
} 
if (elem.removeEventListener) { 
elem.removeEventListener(type, fn, false); 
} 
}

获取事件对象和事件源(触发事件的元素)
function eventHandler(e){ 
//获取事件对象 
e = e || window.event;//IE和Chrome下是window.event FF下是e 
//获取事件源 
var target = e.target || e.srcElement;//IE和Chrome下是srcElement FF下是target 
}

取消事件默认行为(例如点击一个<a>后不跳转页面而是执行一个函数)
function eventHandler(e) { 
e = e || window.event; 
// 防止默认行为 
if (e.preventDefault) { 
e.preventDefault();//IE以外 
} else { 
e.returnValue = false;//IE 
//注意:这个地方是无法用return false代替的 
//return false只能取消元素 
} 
}

阻止事件冒泡
function myParagraphEventHandler(e) { 
e = e || window.event; 
if (e.stopPropagation) { 
e.stopPropagation();//IE以外 
} else { 
e.cancelBubble = true;//IE 
} 
}

事件委托

例如,你有一个很多行的大表格,在每个<tr>上绑定点击事件是个非常危险的想法,因为性能是个大问题。流行的做法是使用事件委托。

事件委托描述的是将事件绑定在容器元素上,然后通过判断点击的target子元素的类型来触发相应的事件。
事件委托依赖于事件冒泡,如果事件冒泡到table之前被禁用的话,那以下代码就无法工作了。

myTable.onclick = function () { 
e = e || window.event; 
var targetNode = e.target || e.srcElement; 
// 测试如果点击的是TR就触发 
if (targetNode.nodeName.toLowerCase() === 'tr') { 
alert('You clicked a table row!'); 
} 
}

事件(Event)知识整理(二)

事件流

DOM同时支持两种事件模型:捕获型事件和冒泡型事件
并且每当某一事件发生时,都会经过捕获阶段->处理阶段->冒泡阶段(有些浏览器不支持捕获)

捕获阶段是由上层元素到下层元素的顺序依次。而冒泡阶段则正相反。

如下图
js事件(Event)知识整理

当事件触发时body会先得到有事件发生的信息,然后依次往下传递,直到到达最详细的元素。这就是事件捕获阶段。
还记得事件注册方法ele.addEventListener(type,handler,flag)吧,Flag是一个Boolean值,true表示事件捕捉阶段执行,false表示事件冒泡阶段执行。
接着就是事件冒泡阶段。从下往上 依次执行事件处理函数(当然前提是当前元素为该事件注册了事件句柄)。
在这个过程中,可以阻止事件的冒泡,即停止向上的传递。
阻止冒泡有时是很有必要的,例如

<div onclick=funcA()> 
<button onclick=funcB()>Click</button> 
</div>

本意是如果点击div中按钮以外的位置时执行funcA,点击button时执行funcB。但是实际点击button时就会先后执行funcB,funcA。
而如果在button的事件句柄中阻止冒泡的话,div就不会执行事件句柄了。

Javascript 相关文章推荐
数组方法解决JS字符串连接性能问题有争议
Jan 12 Javascript
分享8款优秀的 jQuery 加载动画和进度条插件
Oct 24 Javascript
Javascript 拖拽雏形(逐行分析代码,让你轻松了拖拽的原理)
Jan 23 Javascript
Jquery数字上下滚动动态切换插件
Aug 08 Javascript
JS给Textarea文本框添加行号的方法
Aug 20 Javascript
基于javascript实现浏览器滚动条快到底部时自动加载数据
Nov 30 Javascript
xmlplus组件设计系列之文本框(TextBox)(3)
May 03 Javascript
react学习笔记之state以及setState的使用
Dec 07 Javascript
JS实现图片旋转动画效果封装与使用示例
Jul 09 Javascript
jQuery 获取除某指定对象外的其他对象 ( :not() 与.not())
Oct 10 jQuery
ES6 对象的新功能与解构赋值介绍
Feb 05 Javascript
利用JS判断元素是否为数组的方法示例
Jan 08 Javascript
JavaScript高级程序设计(第3版)学习笔记13 ECMAScript5新特性
Oct 11 #Javascript
JavaScript高级程序设计(第3版)学习笔记12 js正则表达式
Oct 11 #Javascript
JavaScript高级程序设计(第3版)学习笔记11 内建js对象
Oct 11 #Javascript
JavaScript高级程序设计(第3版)学习笔记10 再访js对象
Oct 11 #Javascript
JavaScript高级程序设计(第3版)学习笔记9 js函数(下)
Oct 11 #Javascript
JavaScript高级程序设计(第3版)学习笔记8 js函数(中)
Oct 11 #Javascript
JavaScript高级程序设计(第3版)学习笔记7 js函数(上)
Oct 11 #Javascript
You might like
PHP常用正则表达式集锦
2014/08/17 PHP
PHP实现中文圆形印章特效
2015/06/19 PHP
PHP统计目录中文件以及目录中目录大小的方法
2016/01/09 PHP
LAMP环境使用Composer安装Laravel的方法
2017/03/25 PHP
基于ThinkPHP5.0实现图片上传插件
2017/09/25 PHP
PHP token验证生成原理实例分析
2019/06/05 PHP
中止javascript执行的方法
2014/02/14 Javascript
jQuery多项选项卡的实现思路附样式及代码
2014/06/03 Javascript
jquery实现图片预加载
2015/12/25 Javascript
js中利用cookie实现记住密码功能
2020/08/20 Javascript
jquery表单验证插件validation使用方法详解
2017/01/20 Javascript
jQuery实现优雅的弹窗效果(6)
2017/02/08 Javascript
centos 上快速搭建ghost博客方法分享
2018/05/23 Javascript
对Vue beforeRouteEnter 的next执行时机详解
2018/08/25 Javascript
JS如何实现手机端输入验证码效果
2020/05/13 Javascript
[03:56]显微镜下的DOTA2第十一期——鬼畜的死亡先知播音员
2014/06/23 DOTA
python创建关联数组(字典)的方法
2015/05/04 Python
python中requests库session对象的妙用详解
2017/10/30 Python
python实现汽车管理系统
2018/11/30 Python
windows环境中利用celery实现简单任务队列过程解析
2019/11/29 Python
Tensorflow 多线程与多进程数据加载实例
2020/02/05 Python
Python如何实现在字符串里嵌入双引号或者单引号
2020/03/02 Python
Python趣味实例,实现一个简单的抽奖刮刮卡
2020/07/18 Python
详解基于python的图像Gabor变换及特征提取
2020/10/26 Python
美国男士西装打折店:Jos. A. Bank
2017/11/13 全球购物
学习党章思想汇报
2014/01/07 职场文书
电气自动化个人求职信范文
2014/02/03 职场文书
派出所所长先进事迹
2014/05/19 职场文书
企业法人代表任命书
2014/06/06 职场文书
七一党日活动总结
2014/07/08 职场文书
安全生产一岗双责责任书
2014/07/28 职场文书
2014党员四风对照检查材料思想汇报
2014/09/17 职场文书
毕业设计指导教师评语
2014/12/30 职场文书
基石观后感
2015/06/12 职场文书
一文读懂go中semaphore(信号量)源码
2021/04/03 Golang
Win10 和 Win11可以共存吗? win10/11产品生命周期/服务更新介绍
2021/11/21 数码科技