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 相关文章推荐
Hutia 的 JS 代码集
Oct 24 Javascript
Javascript 键盘keyCode键码值表
Dec 24 Javascript
ExtJS 设置级联菜单的默认值
Jun 13 Javascript
Kibo 用于处理键盘事件的Javascript工具库
Oct 28 Javascript
jQuery判断div随滚动条滚动到一定位置后停止
Apr 02 Javascript
JavaScript的各种常见函数定义方法
Sep 16 Javascript
使用jquery动态加载Js文件和Css文件
Oct 24 Javascript
详解jQuery中的empty、remove和detach
Apr 11 Javascript
解析利用javascript如何判断一个数为素数
Dec 08 Javascript
微信小程序wx.previewImage预览图片实例详解
Dec 07 Javascript
微信小程序按顺序同步执行的两种方式
Dec 20 Javascript
详解Vue的组件中data选项为什么必须是函数
Aug 17 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
一段php加密解密的代码
2007/07/16 PHP
Codeigniter实现多文件上传并创建多个缩略图
2014/06/12 PHP
php中count获取多维数组长度的方法
2014/11/03 PHP
smarty中常用方法实例总结
2015/08/07 PHP
Laravel5.1 框架Middleware中间件基本用法实例分析
2020/01/04 PHP
NiftyCube——轻松实现圆角边框
2007/02/20 Javascript
统计出现最多的字符次数的js代码
2010/12/03 Javascript
JQuery中html()方法使用不当带来的陷阱
2011/04/07 Javascript
Jquery 获取checkbox的checked问题
2011/11/16 Javascript
基于jquery的时间段实现代码
2012/08/02 Javascript
jQuery的cookie插件实现保存用户登陆信息
2014/04/15 Javascript
简介JavaScript中的getUTCFullYear()方法的使用
2015/06/10 Javascript
JavaScript实现点击单选按钮改变输入框中文本域内容的方法
2015/08/12 Javascript
javascript获取本机操作系统类型的方法
2015/08/13 Javascript
JS+CSS实现的经典tab选项卡效果代码
2015/09/16 Javascript
直接拿来用的15个jQuery代码片段
2015/09/23 Javascript
js如何改变文章的字体大小
2016/01/08 Javascript
Angularjs实现mvvm式的选项卡示例代码
2016/09/08 Javascript
8 行 Node.js 代码实现代理服务器
2016/12/05 Javascript
jQuery完成表单验证的实例代码(纯代码)
2017/09/30 jQuery
JS计算距当前时间的时间差实例
2017/12/29 Javascript
微信小程序实现收货地址左滑删除
2020/11/18 Javascript
python 把数据 json格式输出的实例代码
2016/10/31 Python
Python下实现的RSA加密/解密及签名/验证功能示例
2017/07/17 Python
Python 多核并行计算的示例代码
2017/11/07 Python
Python将一个CSV文件里的数据追加到另一个CSV文件的方法
2018/07/04 Python
python openpyxl模块的使用详解
2021/02/25 Python
3D动画《斗罗大陆》上线当日播放过亿
2021/03/16 国漫
团工委书记自荐书范文
2013/12/17 职场文书
ktv总经理岗位职责
2014/02/17 职场文书
小区物业门卫岗位职责
2014/04/10 职场文书
四风问题个人自查剖析材料思想汇报
2014/09/21 职场文书
群众路线问题查摆对照检查材料
2014/10/04 职场文书
家庭贫困证明
2015/06/16 职场文书
用Python制作灯光秀短视频的思路详解
2021/04/13 Python
Pandas-DataFrame知识点汇总
2022/03/16 Python