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 相关文章推荐
25个好玩的JavaScript小游戏分享
Apr 22 Javascript
将字符串转换成gb2312或者utf-8编码的参数(js版)
Apr 10 Javascript
jQuery插件scroll实现无缝滚动效果
Apr 27 Javascript
js中遍历Map对象的方法
Jul 27 Javascript
Three.js学习之正交投影照相机
Aug 01 Javascript
jQuery层次选择器用法示例
Sep 09 Javascript
JS中Swiper的使用和轮播图效果
Aug 11 Javascript
Vue中 v-if/v-show/插值表达式导致闪现的原因及解决办法
Oct 12 Javascript
详解webpack打包第三方类库的正确姿势
Oct 20 Javascript
vuejs2.0运用原生js实现简单拖拽元素功能
Aug 21 Javascript
通过实例解析JavaScript常用排序算法
Sep 02 Javascript
vue中使用腾讯云Im的示例
Oct 23 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面向对象全攻略 (十四) php5接口技术
2009/09/30 PHP
php缓存技术详细总结
2013/08/07 PHP
Yii核心组件AssetManager原理分析
2014/12/02 PHP
PHP实现冒泡排序的简单实例
2016/05/26 PHP
微信支付开发发货通知实例
2016/07/12 PHP
PHP时间相关常用函数用法示例
2020/06/03 PHP
javascript 从if else 到 switch case 再到抽象
2010/07/17 Javascript
jQuery-onload让第一次页面加载时图片是淡入方式显示
2012/05/23 Javascript
关于jquery css的使用介绍
2013/04/18 Javascript
JavaScript清空数组元素的两种方法简单比较
2015/07/10 Javascript
jQuery遍历节点树方法分析
2016/09/08 Javascript
jQuery鼠标事件总结
2016/10/13 Javascript
js在ie下打开对话窗口的方法小结
2016/10/24 Javascript
node.js 和HTML5开发本地桌面应用程序
2016/12/13 Javascript
bootstrap配合Masonry插件实现瀑布式布局
2017/01/18 Javascript
Vue 父子组件的数据传递、修改和更新方法
2018/03/01 Javascript
JS实现导出Excel的五种方法详解【附源码下载】
2018/03/15 Javascript
vue: WebStorm设置快速编译运行的方法
2018/10/18 Javascript
jQuery实现表格的增、删、改操作示例
2019/01/27 jQuery
vue中监听路由参数的变化及方法
2019/12/06 Javascript
[01:02:25]2014 DOTA2华西杯精英邀请赛5 24 NewBee VS VG
2014/05/25 DOTA
python安装与使用redis的方法
2016/04/19 Python
判断网页编码的方法python版
2016/08/12 Python
Python正则表达式教程之三:贪婪/非贪婪特性
2017/03/02 Python
基于Python在MacOS上安装robotframework-ride
2018/12/28 Python
Python从文件中读取数据的方法讲解
2019/02/14 Python
Python3利用Dlib实现摄像头实时人脸检测和平铺显示示例
2019/02/21 Python
Python如何在main中调用函数内的函数方式
2020/06/01 Python
Python3 webservice接口测试代码详解
2020/06/23 Python
python对输出的奇数偶数排序实例代码
2020/12/04 Python
Parts Express:音频、视频和扬声器的第一来源
2017/04/25 全球购物
日本卡普空电视游戏软件公司官方购物网站:e-CAPCOM
2018/07/17 全球购物
男女钓鱼靴和甲板鞋:XTRATUF
2021/01/09 全球购物
2014的自我评价
2014/01/13 职场文书
超市员工辞职信范文
2015/05/12 职场文书
2016暑期社会实践心得体会范文
2016/01/14 职场文书