JavaScript高级程序设计 阅读笔记(十七) js事件


Posted in Javascript onAugust 14, 2012

一、事件流

IE中是冒泡型事件,即从最特定的事件目标到最不特定的事件目标。

Netscape Navigator使用的是捕获型事件,这个跟IE中采用的冒泡型事件相反。

DOM事件流同时支持两种事件模型,但捕获型事件先发生。

二、事件处理函数/监听函数

事件是用户或浏览器自身进行的特定行为。这些事件都有自己的名字,如click、load、mouseover等。

事件处理函数有两种分配方式:在JavaScript中或者在HTML中。

如果在JavaScript中分配事件处理函数,则首先要获得要处理的对象的引用,然后将函数赋值给对应的事件处理函数属性,像这样(事件处理函数名称必须小写):

var oDiv=document.getElementById("div1"); 
oDiv.onclick=function(){ 
alert("I was clicked"); 
}

如果在HTML中分配事件处理函数,则只要在HTML标签中添加事件处理函数的特征,并在其中包含合适的脚本作为特性值就可以了,如下:

<div onclick="alert('I was clicked')"></div>

为了给每个可用事件分配多个事件处理函数,IE和DOM各提供了自己的方法。

IE中每个元素和window对象都有两个方法:attachEvent()和detachEvent(),顾名思义,前者用来给一个事件附加事件处理函数,后者用来将事件处理函数分离出来。每个方法都有两个参数:要分配的事件处理函数名字及一个函数。如:

var fnClick=function(){ 
alert("Clicked"); 
} 
var fnClick2=function(){ 
alert("Click2"); 
} 
var oDiv=document.getElementById("div"); 
oDiv.attachEvent("onclick",fnClick); 
oDiv.attachEvent("onclick",fnClick2) 
oDiv.detachEvent("onclick",fnClick); 
oDiv.detachEvent("onclick",fnClick2);

DOM中采用了addEventListener()和removeEventListener()来分配和移除事件处理函数。与IE不同的是这些方法有三个参数,第三个参数标识是用于冒泡阶段还是捕获阶段。用于捕获阶段为true,用于冒泡阶段则为false。移除时第三个参数要跟添加时保持一致。如:
var fnClick=function(){ 
alert("Clicked"); 
} 
var fnClick2=function(){ 
alert("Click2"); 
} 
var oDiv=document.getElementById("div"); 
oDiv.addEventListener("onclick",fnClick,false); 
oDiv.addEventListener("onclick",fnClick2,false) 
oDiv.removeEventListener("onclick",fnClick,false); 
oDiv.removeEventListener("onclick",fnClick2,false);

三、事件对象

事件对象一般包含的信息是:引起事件的对象,事件发生时鼠标的信息,事件发生时键盘的信息。
定位

IE中事件对象是window对象的一个属性event。事件处理函数必须这样访问事件对象:

oDiv.onclick = function(){ 
var oEvent=window.event; 
}

DOM标准则说,event对象必须作为唯一的参数传递给事件处理函数。所以,在DOM兼容的浏览器(如Mozilla、Safair、Opera)中访问事件对象为:
oDiv.onclick=function(){ 
var oEvent=arguments[0]; 
} 
//or 
oDiv.onclick=function(oEvent){ 
}

属性方法相似性

1、获取事件类型:oEvent.type

2、获取按键代码:oEvent.keyCode

3、检测Shift、Alt、Ctrl键:oEvent.shiftKey;oEvent.altKey;oEvent.ctrlKey;

4、获取客户端鼠标坐标:oEvent.clientX;oEvent.clientY;

5、获取屏幕坐标:oEvent.screenX;oEvent.screenY;

属性方法区别

1、获取目标:IE用srcElement,DOM用target;

2、获取按键字符代码:IE用keyCode,DOM用charCode和String.fromCharCode;

3、阻止某个事件的默认行为:IE用oEvent.returnValue=false,DOM用preventDefault()方法;

4、停止事件冒泡:IE中用oEvent.cancelBubble=true;DOM中用oEvent.stopPropagation();

四、事件的类型

1、鼠标事件

鼠标事件包含click、dblclick、mousedown、mouseout、mouseover、mouseup、mousemove。

事件顺序:dblclick事件会先后触发以下事件:mousedown、mouseup、click、mousedown、mouseup、click、dblclick。

2、键盘事件

键盘事件包括:keydown、keypress、keyup。

事件顺序:用户按一次某字符按键时,会先后触发以下事件:keydown、keypress、keyup。如果按一次某非字符按键时,会先后触发以下事件:keydown、keyup。

3、HTML事件

HTML事件包括:load、unload、abort、error、select、change、submit、reset、resize、scroll、focus、blur。

4、变化事件

虽然变化事件已经是DOM标准的一部分,但是目前还没有任何主流的浏览器实现了它。因此这里只是列举出来。

变化事件包括:DOMSubtreeModified、DOMNodeInserted、DOMNodeRemoved、DOMNodeRemovedFromDocument、DOMNodeInsteredIntoDocument。

作者:Artwl
出处:http://artwl.cnblogs.com

Javascript 相关文章推荐
JavaScript面向对象编程
Mar 02 Javascript
javascript中的关于类型转换的性能优化
Dec 14 Javascript
jquery div拖动效果示例代码
Dec 08 Javascript
jquery中get,post和ajax方法的使用小结
Feb 04 Javascript
javascript实现复选框超过限制即弹出警告框的方法
Feb 25 Javascript
微信小程序 网络API 上传、下载详解
Nov 09 Javascript
JavaScript三种绑定事件方式及相互之间的区别分析
Jan 10 Javascript
js 转义字符及URI编码详解
Feb 28 Javascript
详解Vue 2.0封装axios笔记
Jun 22 Javascript
使用vue-infinite-scroll实现无限滚动效果
Jun 22 Javascript
微信小程序开发技巧汇总
Jul 15 Javascript
JavaScript this指向相关原理及实例解析
Jul 10 Javascript
JavaScript高级程序设计阅读笔记(十六) javascript检测浏览器和操作系统-detect.js
Aug 14 #Javascript
JavaScript高级程序设计 阅读笔记(十四) js继承机制的实现
Aug 14 #Javascript
JavaScript高级程序设计 阅读笔记(十三) js定义类或对象
Aug 14 #Javascript
JavaScript高级程序设计 阅读笔记(十二) js内置对象Math
Aug 14 #Javascript
jQuery 1.8 Release版本发布了
Aug 14 #Javascript
常用一些Javascript判断函数
Aug 14 #Javascript
分享精心挑选的23款美轮美奂的jQuery 图片特效插件
Aug 14 #Javascript
You might like
Youku 视频绝对地址获取的方法详解
2013/06/26 PHP
php的mkdir()函数创建文件夹比较安全的权限设置方法
2014/07/28 PHP
PHP实用函数分享之去除多余的0
2015/02/06 PHP
PHP JSON格式的中文显示问题解决方法
2015/04/09 PHP
4种PHP异步执行的常用方式
2015/12/24 PHP
在php7中MongoDB实现模糊查询的方法详解
2017/05/03 PHP
javascript 学习之旅 (2)
2009/02/05 Javascript
js 兼容多浏览器的回车和鼠标焦点事件代码(IE6/7/8,firefox,chrome)
2010/04/14 Javascript
jQuery-ui中自动完成实现方法
2010/06/10 Javascript
javascript两种function的定义介绍及区别说明
2013/05/02 Javascript
Javascript操作URL函数修改版
2013/11/07 Javascript
javascript动态添加checkbox复选框的方法
2015/12/23 Javascript
AngularJs bootstrap搭载前台框架——准备工作
2016/09/01 Javascript
JavaScript中如何判断一个值的类型
2017/09/15 Javascript
js中this对象用法分析
2018/01/05 Javascript
vue-cli项目配置多环境的详细操作过程
2018/10/30 Javascript
vue实现滑动超出指定距离回顶部功能
2019/07/31 Javascript
javascript设计模式 ? 原型模式原理与应用实例分析
2020/04/10 Javascript
python实现每次处理一个字符的三种方法
2014/10/09 Python
Python中easy_install 和 pip 的安装及使用
2017/06/05 Python
python自动发邮件库yagmail的示例代码
2018/02/23 Python
Python设计模式之代理模式实例详解
2019/01/19 Python
如何不用安装python就能在.NET里调用Python库
2019/07/12 Python
Python倒排索引之查找包含某主题或单词的文件
2019/11/13 Python
Python Websocket服务端通信的使用示例
2020/02/25 Python
浅谈keras中Dropout在预测过程中是否仍要起作用
2020/07/09 Python
Koral官方网站:女性时尚运动服
2019/04/10 全球购物
印度第一网上礼品店:IGP.com
2020/02/06 全球购物
教师实习自我鉴定
2013/12/11 职场文书
化学教学随笔感言
2014/02/19 职场文书
食品安全承诺书
2014/05/22 职场文书
学雷锋日活动总结
2015/02/06 职场文书
2015年药品销售工作总结范文
2015/05/25 职场文书
法制教育主题班会
2015/08/13 职场文书
2016年5月份红领巾广播稿
2015/12/21 职场文书
【海涛教你打DOTA】虚空假面第一视角骨弓3房29杀
2022/04/01 DOTA