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 js cookie的存储,获取和删除
Dec 29 Javascript
js面向对象 多种创建对象方法小结
May 21 Javascript
Jquery倒数计时按钮setTimeout的实例代码
Jul 04 Javascript
浅析JS刷新框架中的其他页面 &amp;&amp; JS刷新窗口方法汇总
Jul 08 Javascript
基于jquery实现一张图片点击鼠标放大再点缩小
Sep 29 Javascript
jQuery中each()方法用法实例
Dec 27 Javascript
基于js中的存储键值对以及注意事项介绍
Mar 30 Javascript
讲解vue-router之命名路由和命名视图
May 28 Javascript
浅谈Vue.use的使用
Aug 29 Javascript
基于vue框架手写一个notify插件实现通知功能的方法
Mar 31 Javascript
javascript判断一个变量是数组还是对象
Apr 10 Javascript
微信小程序之几种常见的弹框提示信息实现详解
Jul 11 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
使用网络地址转换实现多服务器负载均衡
2006/10/09 PHP
/etc/php-fpm.d/www.conf 配置注意事项
2017/02/04 PHP
PHP 中TP5 Request 请求对象的实例详解
2017/07/31 PHP
php5.3/5.4/5.5/5.6/7常见新增特性汇总整理
2020/02/27 PHP
PHP中SESSION过期设置
2021/03/09 PHP
Juqery Html(),append()等方法的Bug解决方法
2010/12/13 Javascript
基于Jquery的表格隔行换色,移动换色,点击换色插件
2010/12/22 Javascript
javascript动画浅析
2012/08/30 Javascript
实现web打印的各种方法介绍及实现代码
2013/01/09 Javascript
不同Jquery版本引发的问题解决
2013/10/14 Javascript
jQuery简单实现两级下拉菜单效果代码
2015/09/15 Javascript
学习JavaScript鼠标响应事件
2015/12/25 Javascript
jquery 遍历数组 each 方法详解
2016/05/25 Javascript
jQuery插件扩展测试实例
2016/06/21 Javascript
node+express制作爬虫教程
2016/11/11 Javascript
浅析Angular2子模块以及异步加载
2017/04/24 Javascript
详解如何理解vue的key属性
2019/04/14 Javascript
vue请求本地自己编写的json文件的方法
2019/04/25 Javascript
微信小程序清空输入框信息与实现屏幕往上滚动的示例代码
2020/06/23 Javascript
Python中函数的用法实例教程
2014/09/08 Python
python使用win32com库播放mp3文件的方法
2015/05/30 Python
python实现识别手写数字 python图像识别算法
2020/03/23 Python
Python 使用PIL numpy 实现拼接图片的示例
2018/05/08 Python
Python实现使用卷积提取图片轮廓功能示例
2018/05/12 Python
python bluetooth蓝牙信息获取蓝牙设备类型的方法
2019/11/29 Python
基于TensorFlow中自定义梯度的2种方式
2020/02/04 Python
python字符串判断密码强弱
2020/03/18 Python
Python Matplotlib绘图基础知识代码解析
2020/08/31 Python
extern在函数声明中是什么意思
2014/01/19 面试题
工地安全生产标语
2014/06/06 职场文书
励志演讲稿大全
2014/08/21 职场文书
小学教学工作总结2015
2015/05/13 职场文书
2015年乡镇安全生产工作总结
2015/05/19 职场文书
2015年安全生产管理工作总结
2015/05/25 职场文书
整脏治乱工作简报
2015/07/21 职场文书
python数字图像处理之对比度与亮度调整示例
2022/06/28 Python