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 相关文章推荐
鼠标滑过出现预览的大图提示效果
Feb 26 Javascript
jQuery使用andSelf()来包含之前的选择集
May 19 Javascript
$(&quot;&quot;).click与onclick的区别示例介绍
Sep 25 Javascript
浅谈JavaScript事件的属性列表
Mar 01 Javascript
JavaScript 2048 游戏实例代码(简单易懂)
Mar 25 Javascript
JavaScript 数组some()和filter()的用法及区别
May 20 Javascript
微信小程序开发之视频播放器 Video 弹幕 弹幕颜色自定义实例
Dec 08 Javascript
详解js的异步编程技术的方法
Feb 09 Javascript
Angular directive递归实现目录树结构代码实例
May 05 Javascript
Javascript实现时间倒计时效果
Jul 15 Javascript
JS引用传递与值传递的区别与用法分析
Jun 01 Javascript
解决antd 下拉框 input [defaultValue] 的值的问题
Oct 31 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入门速成(2)
2006/10/09 PHP
PHP新手上路(八)
2006/10/09 PHP
destoon官方标签大全
2014/06/20 PHP
php+mysql结合Ajax实现点赞功能完整实例
2015/01/30 PHP
php提交表单发送邮件的方法
2015/03/20 PHP
Yii实现复选框批量操作实例代码
2017/03/15 PHP
php批量转换文件夹下所有文件编码的函数类
2017/08/06 PHP
JavaScript 小型打飞机游戏实现原理说明
2010/10/28 Javascript
jquery动画4.升级版遮罩效果的图片走廊--带自动运行效果
2012/08/24 Javascript
5个JavaScript经典面试题
2014/10/13 Javascript
jquery搜索框效果实现方法
2015/01/16 Javascript
详解JavaScript的Date对象(制作简易钟表)
2020/04/07 Javascript
一种基于浏览器的自动小票机打印实现方案(js版)
2016/07/26 Javascript
探索webpack模块及webpack3新特性
2017/09/18 Javascript
angularJs中$scope数据序列化的实例
2018/09/30 Javascript
element-ui 的el-button组件中添加自定义颜色和图标的实现方法
2018/10/26 Javascript
vue中解决微信html5原生ios虚拟键返回不刷新问题
2020/10/20 Javascript
[50:59]2018DOTA2亚洲邀请赛 4.7 总决赛 LGD vs Mineski第四场
2018/04/10 DOTA
Python os模块介绍
2014/11/30 Python
详解C++编程中一元运算符的重载
2016/01/19 Python
Python基于Pymssql模块实现连接SQL Server数据库的方法详解
2017/07/20 Python
Python定义二叉树及4种遍历方法实例详解
2018/07/05 Python
python之super的使用小结
2018/08/13 Python
PyCharm Anaconda配置PyQt5开发环境及创建项目的教程详解
2020/03/24 Python
Django路由层URLconf作用及原理解析
2020/09/24 Python
专注澳大利亚特产和新西兰特产的澳洲中文网:0061澳洲制造
2019/03/24 全球购物
EMU Australia澳大利亚官网:澳大利亚本土雪地靴品牌
2019/07/24 全球购物
公共汽车、火车和飞机票的通用在线预订和销售平台:INFOBUS
2019/11/30 全球购物
C#面试题
2016/05/06 面试题
校园文化标语
2014/06/18 职场文书
2014小学数学教研组工作总结
2014/12/06 职场文书
小学教师师德师风自我评价
2015/03/04 职场文书
初中家长意见
2015/06/03 职场文书
于丹讲座视频观后感
2015/06/15 职场文书
有关浪费资源的建议书
2015/09/14 职场文书
Python+Selenium实现读取网易邮箱验证码
2022/03/13 Python