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 相关文章推荐
node.js实现逐行读取文件内容的代码
Jun 27 Javascript
jQuery+PHP+MySQL二级联动下拉菜单实例讲解
Oct 27 Javascript
JavaScript实现简单获取当前网页网址的方法
Nov 09 Javascript
基于JQuery实现图片上传预览与删除操作
May 24 Javascript
JavaScript和jquery获取父级元素、子级元素、兄弟元素的方法
Jun 05 Javascript
Bootstrap登陆注册页面开发教程
Jul 12 Javascript
Bootstrap模态框(Modal)实现过渡效果
Mar 17 Javascript
JS中mouseup事件丢失的原因与解决办法
Jun 14 Javascript
JSON.stringify()方法讲解
Jan 31 Javascript
JS实现的自定义map方法示例
May 17 Javascript
vue.js 解决v-model让select默认选中不生效的问题
Jul 28 Javascript
8个非常实用的Vue自定义指令
Dec 15 Vue.js
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文章内容分页并生成相应的htm静态页面代码
2010/06/07 PHP
PHP去掉从word直接粘贴过来的没有用格式的函数
2012/10/29 PHP
修改php.ini以达到屏蔽错误信息并记录日志
2013/06/16 PHP
关于JSON以及JSON在PHP中的应用技巧
2013/11/27 PHP
如何把php5.3版本升级到php5.4或者php5.5
2015/07/31 PHP
PHP二维数组去重算法
2016/12/17 PHP
PHPTree――php快速生成无限级分类
2018/03/30 PHP
jQuery提交表单ajax查询实例代码
2012/10/07 Javascript
js图片自动切换效果处理代码
2013/05/07 Javascript
nodejs事件的监听与触发的理解分析
2015/02/12 NodeJs
JQuery中模拟image的ajaxPrefilter与ajaxTransport处理
2015/06/19 Javascript
javascript性能优化之事件委托实例详解
2015/12/12 Javascript
使用Bootstrap框架制作查询页面的界面实例代码
2016/05/27 Javascript
Angularjs使用指令做表单校验的方法
2017/03/31 Javascript
JavaScript实现图片无缝滚动效果
2017/07/07 Javascript
简单实现js轮播图效果
2017/07/14 Javascript
深入理解ES6之数据解构的用法
2018/01/13 Javascript
关于Google发布的JavaScript代码规范你要知道哪些
2018/04/04 Javascript
微信小程序上传图片实例
2018/05/28 Javascript
Vue ElementUI实现:限制输入框只能输入正整数的问题
2020/07/31 Javascript
Python实现的简单万年历例子分享
2014/04/25 Python
理解Python中的With语句
2015/02/02 Python
解决Python出现_warn_unsafe_extraction问题的方法
2016/03/24 Python
浅谈python中scipy.misc.logsumexp函数的运用场景
2016/06/23 Python
Numpy之random函数使用学习
2019/01/29 Python
美国酒店控股公司:Choice Hotels
2018/06/15 全球购物
印尼购物网站:iLOTTE
2019/10/16 全球购物
Diesel美国网上商店:意大利牛仔时装品牌
2020/12/10 全球购物
物业保安员岗位职责制度
2014/01/30 职场文书
《月光启蒙》教学反思
2014/03/01 职场文书
保护环境标语
2014/06/09 职场文书
酒店圣诞节活动总结
2015/05/06 职场文书
红与黑读书笔记
2015/06/29 职场文书
运动会开幕式主持词
2015/07/01 职场文书
高三语文教学反思
2016/02/16 职场文书
工厂无线对讲系统解决方案
2022/02/18 无线电