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 相关文章推荐
jquery tools 系列 scrollable(2)
Sep 06 Javascript
jquery下实现overlay遮罩层代码
Aug 25 Javascript
jQuery中:first选择器用法实例
Dec 30 Javascript
浅谈javascript的分号的使用
May 12 Javascript
Angularjs中ng-repeat-start与ng-repeat-end的用法实例介绍
Dec 31 Javascript
JS使用正则截取两个字符串之间的字符串实现方法详解
Jan 06 Javascript
基于VUE.JS的移动端框架Mint UI的使用
Oct 11 Javascript
vue组件发布到npm简单步骤
Nov 30 Javascript
vue导出html、word和pdf的实现代码
Jul 31 Javascript
微信小程序实现列表页的点赞和取消点赞功能
Nov 02 Javascript
Vue多环境代理配置方法思路详解
Jun 21 Javascript
ES6中let、const的区别及变量的解构赋值操作方法实例分析
Oct 15 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/10/27 PHP
Laravel构建即时应用的一种实现方法详解
2017/08/31 PHP
php实现生成带二维码图片并强制下载功能
2018/02/24 PHP
JavaScript获得选中文本内容的方法
2008/12/02 Javascript
学习ExtJS TextField常用方法
2009/10/07 Javascript
对 jQuery 中 data 方法的误解分析
2014/06/18 Javascript
jquery text()方法取标签中的文本
2014/07/25 Javascript
JavaScript实现在页面间传值的方法
2015/04/07 Javascript
星期几的不同脚本写法(推荐)
2016/06/01 Javascript
javascript汉字拼音互转的简单实例
2016/10/09 Javascript
详解nodejs中exports和module.exports的区别
2017/02/17 NodeJs
Bootstrap入门教程一Hello Bootstrap初识
2017/03/02 Javascript
JQuery判断正整数整理小结
2017/08/21 jQuery
使用vue中的v-for遍历二维数组的方法
2018/03/07 Javascript
Angular4集成ng2-file-upload的上传组件
2018/03/14 Javascript
JS实现简单获取最近7天和最近3天日期的方法
2018/04/18 Javascript
express 项目分层实践详解
2018/12/10 Javascript
python 简单的多线程链接实现代码
2016/08/28 Python
Python实现发送QQ邮件的封装
2017/07/14 Python
在matplotlib的图中设置中文标签的方法
2018/12/13 Python
详解Python读取yaml文件多层菜单
2019/03/23 Python
python简单实现AES加密和解密
2019/03/28 Python
一篇文章搞定Python操作文件与目录
2019/08/13 Python
Restful_framework视图组件代码实例解析
2020/11/17 Python
HTML5 拖放功能实现代码
2016/07/14 HTML / CSS
阿提哈德航空官方网站:Etihad Airways
2017/01/06 全球购物
Gap英国官网:Gap UK
2018/07/18 全球购物
Notino法国:购买香水和化妆品
2019/04/15 全球购物
预备党员政审材料
2014/02/04 职场文书
计算机科学系职业生涯规划书
2014/03/08 职场文书
《猴子种果树》教学反思
2014/04/26 职场文书
尊老爱亲美德少年事迹材料
2014/08/14 职场文书
群众路线剖析材料(四风)
2014/11/05 职场文书
2014年项目工作总结
2014/11/24 职场文书
Shell脚本一键安装Nginx服务自定义Nginx版本
2022/03/20 Servers
MySQL安装失败的原因及解决步骤
2022/06/14 MySQL