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(非HTML5)可编辑表格实现代码
Dec 11 Javascript
开发中可能会用到的jQuery小技巧
Mar 07 Javascript
jquery scroll()区分横向纵向滚动条的方法
Apr 04 Javascript
javascript实现五星评分功能
Nov 10 Javascript
网页中JS函数自动执行常用三种方法
Mar 30 Javascript
jQuery EasyUI API 中文帮助文档和扩展实例
Aug 01 Javascript
javascript少儿编程关于返回值的函数内容
May 27 Javascript
vue-image-crop基于Vue的移动端图片裁剪组件示例
Aug 28 Javascript
node.js实现微信开发之获取用户授权
Mar 18 Javascript
利用Vue实现一个markdown编辑器实例代码
May 19 Javascript
vue-cli基础配置及webpack配置修改的完整步骤
Oct 20 Javascript
vue3.0实现插件封装
Dec 14 Vue.js
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 根据IP地址控制访问的代码
2010/04/22 PHP
PHP 伪静态技术原理以及突破原理实现介绍
2013/07/12 PHP
CodeIgniter启用缓存和清除缓存的方法
2014/06/12 PHP
7个鲜为人知却非常实用的PHP函数
2015/07/01 PHP
怎么让脚本或里面的函数在所有图片都载入完毕的时候执行
2006/10/17 Javascript
jQuery学习基础知识小结
2010/11/25 Javascript
js借助ActiveXObject实现创建文件
2013/09/29 Javascript
jquery map方法使用示例
2014/04/23 Javascript
JavaScript Serializer序列化时间处理示例
2014/07/31 Javascript
Javascript基础教程之argument 详解
2015/01/18 Javascript
JavaScript跨平台的开源框架NativeScript
2015/03/24 Javascript
Bootstrap编写一个兼容主流浏览器的受众巨幕式风格页面
2016/07/01 Javascript
require简单实现单页应用程序(SPA)
2016/07/12 Javascript
全面了解JavaScript对象进阶
2016/07/19 Javascript
Vue原理剖析 实现双向绑定MVVM
2017/05/03 Javascript
Angular4 中内置指令的基本用法
2017/07/31 Javascript
JS脚本实现网页自动秒杀点击
2018/01/11 Javascript
详解vuex持久化插件解决浏览器刷新数据消失问题
2019/04/15 Javascript
JavaScript获取时区实现过程解析
2020/09/24 Javascript
Nuxt的动态路由和参数校验操作
2020/11/09 Javascript
ES2020让代码更优美的运算符 (?.) (??)
2021/01/04 Javascript
python自动化测试之连接几组测试包实例
2014/09/28 Python
Python使用matplotlib填充图形指定区域代码示例
2018/01/16 Python
python学生信息管理系统
2018/03/13 Python
Python数据结构之哈夫曼树定义与使用方法示例
2018/04/22 Python
Python字符串通过'+'和join函数拼接新字符串的性能测试比较
2019/03/05 Python
python频繁写入文件时提速的方法
2019/06/26 Python
tensorflow之tf.record实现存浮点数数组
2020/02/17 Python
Django Serializer HiddenField隐藏字段实例
2020/03/31 Python
仿CSDN Blog返回页面顶部功能实现原理及代码
2013/06/30 HTML / CSS
CAT鞋英国官网:坚固耐用的靴子和鞋
2016/10/21 全球购物
房屋转让协议书
2014/04/11 职场文书
奥巴马当选演讲稿
2014/09/10 职场文书
绍兴鲁迅故居导游词
2015/02/09 职场文书
2016年小学“公民道德宣传日”活动总结
2016/04/01 职场文书
ipad隐藏软件app图标方法
2022/04/19 数码科技