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 相关文章推荐
jquery radio 操作代码
Mar 16 Javascript
jQuery 菜单随滚条改为以定位方式(固定要浏览器顶部)
May 24 Javascript
node.js回调函数之阻塞调用与非阻塞调用
Nov 13 Javascript
超漂亮的Bootstrap 富文本编辑器summernote
Apr 05 Javascript
原生JavaScript实现Tooltip浮动提示框特效
Mar 07 Javascript
深入理解ES6的迭代器与生成器
Aug 19 Javascript
Bootstrap实现翻页效果
Nov 27 Javascript
原生JavaScript实现的简单放大镜效果示例
Feb 07 Javascript
react实现点击选中的li高亮的示例代码
May 24 Javascript
小程序实现带年月选取效果的日历
Jun 27 Javascript
vue中使用axios post上传头像/图片并实时显示到页面的方法
Sep 27 Javascript
Emberjs 通过 axios 下载文件的方法
Sep 03 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
不用GD库生成当前时间的PNG格式图象的程序
2006/10/09 PHP
用Zend Encode编写开发PHP程序
2006/10/09 PHP
使用纯php代码实现页面伪静态的方法
2015/07/25 PHP
使用PHP+AJAX让WordPress动态加载文章的教程
2015/12/11 PHP
php获取给定日期相差天数的方法分析
2017/02/20 PHP
基于JQuery的asp.net树实现代码
2010/11/30 Javascript
jQuery Ajax 实例全解析
2011/04/20 Javascript
jquery插件validate验证的小例子
2013/05/08 Javascript
用Js实现的动态增加表格示例自己写的
2013/10/21 Javascript
Jquery使用css方法改变样式实例
2015/05/18 Javascript
基于jQuery Circlr插件实现产品图片360度旋转
2015/09/20 Javascript
基于JavaScript代码实现兼容各浏览器的设为首页和加入收藏
2016/01/07 Javascript
BootStrap下jQuery自动完成的样式调整
2016/05/30 Javascript
jQuery实现产品对比功能附源码下载
2016/08/09 Javascript
jQuery实现select模糊查询(反射机制)
2017/01/14 Javascript
jQuery Pagination分页插件使用方法详解
2017/02/28 Javascript
利用Vue v-model实现一个自定义的表单组件
2017/04/27 Javascript
vue-cli项目优化方法- 缩短首屏加载时间
2018/04/01 Javascript
从零开始封装自己的自定义Vue组件
2018/10/09 Javascript
使用vue-router在Vue页面之间传递数据的方法
2019/07/15 Javascript
Vue数据绑定实例写法
2019/08/06 Javascript
[03:52]DOTA2英雄基础教程 酒仙
2013/12/23 DOTA
Django实现支付宝付款和微信支付的示例代码
2018/07/25 Python
在python里面运用多继承方法详解
2019/07/01 Python
Python实现个人微信号自动监控告警的示例
2019/07/03 Python
在python中使用nohup命令说明
2020/04/16 Python
Django之全局使用request.user.username的实例详解
2020/05/14 Python
解决TensorFlow调用Keras库函数存在的问题
2020/07/06 Python
创新型城市实施方案
2014/03/06 职场文书
节约用水倡议书
2014/04/16 职场文书
煤矿安全知识竞赛活动总结
2014/07/07 职场文书
学习保证书
2015/01/17 职场文书
2015年公司国庆放假通知
2015/07/30 职场文书
我的生日感言
2015/08/03 职场文书
2019年教师节祝福语精选,给老师送上真诚的祝福
2019/09/09 职场文书
导游词之寿县报恩寺
2020/01/19 职场文书