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 相关文章推荐
网站被黑的假象--ARP欺骗之页面中加入一段js
May 16 Javascript
纯js实现背景图片切换效果代码
Nov 14 Javascript
jquery 笔记 事件
Nov 02 Javascript
使用jQuery实现的网页版的个人简历(可换肤)
Apr 19 Javascript
Node.js实现Excel转JSON
Apr 24 Javascript
JS中的hasOwnProperty()、propertyIsEnumerable()和isPrototypeOf()
Aug 11 Javascript
AngularJS中watch监听用法分析
Nov 04 Javascript
jQuery Validate设置onkeyup验证的实例代码
Dec 09 Javascript
深入剖析Node.js cluster模块
May 23 Javascript
React Native中Mobx的使用方法详解
Dec 04 Javascript
用Vue编写抽象组件的方法
May 06 Javascript
vue实现拖拽效果
Dec 23 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
肝肠寸断了解下!盘点史上最伤心的十大动漫
2020/03/04 日漫
用PHP4访问Oracle815
2006/10/09 PHP
精通php的十大要点(上)
2009/02/04 PHP
浅析php中jsonp的跨域实例
2013/06/21 PHP
php实现文本数据导入SQL SERVER
2015/05/17 PHP
可以用来调试JavaScript错误的解决方案
2010/08/07 Javascript
jQuery实现tab选项卡效果的方法
2015/07/08 Javascript
老生常谈onBlur事件与onfocus事件(js)
2016/07/09 Javascript
详解Angular.js的$q.defer()服务异步处理
2016/11/06 Javascript
微信小程序 页面传值详解
2017/03/10 Javascript
教你用Cordova打包Vue项目的方法
2017/10/17 Javascript
解决vue this.$forceUpdate() 处理页面刷新问题(v-for循环值刷新等)
2018/07/26 Javascript
微信小程序全局变量GLOBALDATA的定义和调用过程解析
2019/09/23 Javascript
JS实现简单省市二级联动
2019/11/27 Javascript
ant design pro中可控的筛选和排序实例
2020/11/17 Javascript
[03:02]辉夜杯主赛事第二日 每日之星
2015/12/27 DOTA
[45:59]完美世界DOTA2联赛PWL S2 FTD vs GXR 第二场 11.22
2020/11/24 DOTA
在Python的Django框架上部署ORM库的教程
2015/04/20 Python
独特的python循环语句
2016/11/20 Python
Pycharm学习教程(5) Python快捷键相关设置
2017/05/03 Python
Python3实现简单可学习的手写体识别(实例讲解)
2017/10/21 Python
python实现飞机大战微信小游戏
2020/03/21 Python
Python+PyQT5的子线程更新UI界面的实例
2019/06/14 Python
python绘制已知点的坐标的直线实例
2019/07/04 Python
flask框架单元测试原理与用法实例分析
2019/07/23 Python
Python的形参和实参使用方式
2019/12/24 Python
关于matplotlib-legend 位置属性 loc 使用说明
2020/05/16 Python
使用CSS3编写类似iOS中的复选框及带开关的按钮
2016/04/11 HTML / CSS
HTML5 input placeholder 颜色修改示例
2014/05/30 HTML / CSS
JD Sports丹麦:英国领先的运动时尚零售商
2020/11/24 全球购物
临床医学系毕业生推荐信
2013/11/09 职场文书
护士在校生自荐信
2014/02/01 职场文书
节能减耗标语
2014/06/21 职场文书
巾帼志愿者活动方案
2014/08/17 职场文书
纪检干部对照检查材料
2014/08/22 职场文书
婚前财产协议书范本
2014/10/19 职场文书