一、事件

二、事件流

以上内容见:javaScript事件(一)事件流

三、事件处理程序

四、IE事件处理程序

以上内容见javaScript事件(二)事件处理程序

五、事件对象

以上内容见javaScript事件(三)事件对象

六、事件对象的公共成员

1、DOM中的event的公共成员

event对象包含与创建它的特定事件有关的属性和方法。触发的事件类型不一样,可用的属性和方法不一样。但是,DOM中所有事件都有以下公共成员。【注意bubbles属性和cancelable属性】

属性/方法 类型 读/写 说明
bubbles Boolean 只读    表明事件是否冒泡
stopPropagation() Function 只读 取消事件的进一步捕获或冒泡。如果bubbles为true,则可以使用这个方法
stopImmediatePropagation()  Function 只读 取消事件的进一步捕获或冒泡,同时阻止任何事件处理程序被调用(DOM3级事件中新增)
cancelable Boolean 只读 表明是否可以取消事件的默认行为
preventDefault() Function 只读 取消事件的默认行为。如果cancelable是true,则可以使用这个方法
defaultPrevented Boolean 只读 为true表示已经调用了preventDefault()(DOM3级事件中新增)
currentTarget Element 只读 其事件处理程序当前正在处理事件的那个元素(currentTarget始终===this,即处理事件的元素
target Element 只读 直接事件目标,真正触发事件的目标
detail Integer  只读 与事件相关的细节信息
eventPhase Integer 只读 调用事件处理程序的阶段:1表示捕获阶段,2表示处于目标阶段,3表示冒泡阶段
trusted Boolean 只读 为true表示事件是由浏览器生成的。为false表示事件是由开发人员通过JavaScript创建的(DOM3级事件中新增)
type String 只读 被触发的事件的类型
view AbstractView 只读 与事件关联的抽象视图。等同于发生事件的window对象

1、对比currentTarget和target

在事件处理程序内部,对象this始终等于currentTarget的值,而target则只是包含事件的实际目标。

举例:页面有个按钮,在body(按钮的父节点)中注册click事件,点按钮时click事件会冒泡到body进行处理。

<body>
<input id="btn" type="button" value="click"/>
<script>
document.body.onclick=function(event){
console.log("body中注册的click事件");
console.log("this===event.currentTarget? "+(this===event.currentTarget)); //true
console.log("currentTarget===document.body?"+(event.currentTarget===document.body)); //true
console.log('event.target===document.getElementById("btn")? '+(event.target===document.getElementById("btn"))); //true
}
</script>
</body>

运行结果为:

2、通过type属性,可以在一个函数中处理多个事件。

原理:通过检测event.type属性,对不同事件进行不同处理。

举例:定义一个handler函数用来处理3种事件:click,mouseover,mouseout。

<body>
<input id="btn" type="button" value="click"/>
<script>
var handler=function(event){
switch (event.type){
case "click":
alert("clicked");
break;
case "mouseover":
event.target.style.backgroundColor="pink";
break;
case "mouseout":
event.target.style.backgroundColor="";
}
};
var btn=document.getElementById("btn");
btn.onclick=handler;
btn.onmouseover=handler;
btn.onmouseout=handler;
</script>
</body>

运行效果:点击按钮,弹出框。鼠标经过按钮,按钮背景色变为粉色;鼠标离开按钮,背景色恢复默认。

3、stopPropagation()和stopImmediatePropagation()对比

同:stopPropagation()和 stopImmediatePropagation()都可以用来取消事件的进一步捕获或冒泡。

异:二者的区别在于当一个事件有多个事件处理程序时,stopImmediatePropagation()可以阻止之后事件处理程序被调用。

举例:

<body>
<input id="btn" type="button" value="click"/>
<script>
var btn=document.getElementById("btn");
btn.addEventListener("click",function(event){
console.log("buttn click listened once");
// event.stopPropagation();//取消注释查看效果
// event.stopImmediatePropagation();//取消注释查看效果
},false);
btn.addEventListener("click",function(){
console.log("button click listened twice");
},false);
document.body.onclick= function (event) {
console.log("body clicked");
}
</script>
</body>

运行效果:

4、eventPhase

eventPhase值在捕获阶段为1,处于目标阶段为2,冒泡阶段为3。

常量
Event.CAPTURING_PHASE 1
Event.AT_TARGET 2
Event.BUBBLING_PHASE 3

可以通过下面代码查看:

var btn=document.getElementById("btn");
btn.onclick= function (event) {
console.log(event.CAPTURING_PHASE); //
console.log(event.AT_TARGET); //
console.log(event.BUBBLING_PHASE); //
}

例子:

<body>
<input id="btn" type="button" value="click"/>
<script>
var btn=document.getElementById("btn");
btn.onclick= function (event) {
console.log("按钮DOM0级方法添加事件处理程序eventPhase值为?"+event.eventPhase);
}
btn.addEventListener("click",function(event){
console.log("按钮DOM2级方法添加事件处理程序,且addEventListener第三个参数为true时eventPhase值为?"+event.eventPhase);
},true);
btn.addEventListener("click",function(event){
console.log("按钮DOM2级方法添加事件处理程序,且addEventListener第三个参数为false时eventPhase值为?"+event.eventPhase);
},false);
document.body.addEventListener("click", function (event) {
console.log("body上添加事件处理程序,且在捕获阶段eventPhase值为?"+event.eventPhase);
},true);
document.body.addEventListener("click", function (event) {
console.log("body上添加事件处理程序,且在冒泡阶段eventPhase值为?"+event.eventPhase);
},false);
</script>

运行效果:

2、IE中event的公共成员

IE中的event的属性和方法和DOM一样会随着事件类型的不同而不同,但是也有一些是所有对象都有的公共成员,且这些成员大部分有对应的DOM属性或方法。

属性/方法 类型 读/写 说明
cancelBubble Boolean 读/写 默认为false,但将其设置为true就可以取消事件冒泡(与DOM中stopPropagation()方法的作用相同
returnValue Boolean 读/写 默认为true,但将其设置为false就可以取消事件的默认行为(与DOM中的preventDefault()方法的作用相同
srcElement Element 只读 事件的目标(与DOM中的target属性相同
type String 只读 被触发的事件的类型

七、鼠标事件

这部分内容见javaScript事件(五)事件类型之鼠标事件

本文作者starof,因知识本身在变化,作者也在不断学习成长,文章内容也不定时更新,为避免误导读者,方便追根溯源,请诸位转载注明出处:http://www.cnblogs.com/starof/p/4096198.html有问题欢迎与我讨论,共同进步。

javaScript事件(四)event的公共成员(属性和方法)的更多相关文章

  1. event代表事件的状态,专门负责对事件的处理,它的属性和方法能帮助我们完成很多和用户交互的操作;

    IE的event和其他的标准DOM的Event是不一样的,不同的浏览器事件的冒泡机制也是有区别 IE:window.event.cancelBubble = true;//停止冒泡window.eve ...

  2. JavaScript基础对象创建模式之私有属性和方法(024)

    JavaScript没有特殊的语法来表示对象的私有属性和方法,默认的情况下,所有的属性和方法都是公有的.如下面用字面声明的对象: var myobj = { myprop: 1, getProp: f ...

  3. javascript事件与event对象的属性

    javascript事件列表解说 事件 浏览器支持 解说 一般事件 onclick IE3.N2 鼠标点击时触发此事件 ondblclick IE4.N4 鼠标双击时触发此事件 onmousedown ...

  4. javascript 事件委托 event delegation

    事件委托 event delegation 一.概念: 假设我们有很多个子元素,每个元素被点击时都会触发相应事件,普通的做法是给每个子元素添加一个事件监听. 而,事件委托则是给它们的父元素添加一个事件 ...

  5. JavaScript事件循环(Event Loop)机制

    JavaScript 是单线程单并发语言 什么是单线程 主程序只有一个线程,即同一时间片断内其只能执行单个任务. 为什么选择单线程? JavaScript的主要用途是与用户互动,以及操作DOM.这决定 ...

  6. Java开发笔记(四十五)成员属性与成员方法

    前面介绍了许多数据类型,除了基本类型如整型int.双精度型double.布尔型boolean之外,还有高级一些的如包装整型Integer.字符串类型String.本地日期类型LocalDate等等,那 ...

  7. JavaScript 事件之event.preventDefault()与event.stopPropagation()简单介绍

    event.preventDefault()用法介绍: 该方法将通知 Web 浏览器不要执行与事件关联的默认动作(如果存在这样的动作). 例如,如果 type 属性是 “submit”,在事件传播的任 ...

  8. 我的Python学习笔记(四):动态添加属性和方法

    一.动态语言与静态语言 1.1 动态语言 在运行时代码可以根据某些条件改变自身结构 可以在运行时引进新的函数.对象.甚至代码,可以删除已有的函数等其他结构上的变化 常见的动态语言:Object-C.C ...

  9. 1.4(JavaScript学习笔记) window对象的属性及方法

    一.window对象 window对象代表当前窗口,所有全局对象都是windows的属性, 例如document是window的属性,window.document.writer("&quo ...

随机推荐

  1. Titanium开发环境搭建第三个坑

    Nodejs版本的问题 首先,如下引用:http://docs.appcelerator.com/titanium/latest/#!/guide/Installing_Node To run all ...

  2. 在phpwind内容页使用百度分享进行图片分享

    在phpwind内容页使用百度分享进行图片分享时,百度分享默认提取到的图片不一定是主题正文内容中的图片,需要使用百度提供的配置机制自行调整. 整个代码添加的位置在此不论,主要原理是在主题正文区域提取图 ...

  3. 【poj 3167】Cow Patterns(字符串--KMP匹配+数据结构--树状数组)

    题意:给2个数字序列 a 和 b ,问按从小到达排序后,a中的哪些子串与b的名次匹配. a 的长度 N≤100,000,b的长度 M≤25,000,数字的大小 K≤25. 解法:[思考]1.X 暴力. ...

  4. Orchard中文版源码下载

    本版本基于Orchard1.7.2修改: 新增Bootstrap主题 新增中文语言包 增加了对Sqlite.Orchard数据库的支持 优化工程,减少临时符号生成,增加工程效率 和一些BUG的修正 默 ...

  5. 为什么不推崇复杂的ORM

    上一篇文章写完,回复的人很多,有的说的很中肯,有的貌似只是看到文章的标题就进来写评论的!还有人问为什么我要屏蔽掉[反对]按钮,因为谁写文章都是为了分享,都在说出自己的心得体会.不过由于大家遇到的项目, ...

  6. Android数据的四种存储方式SharedPreferences、SQLite、Content Provider和File (一) —— 总览

    Android数据的四种存储方式SharedPreferences.SQLite.Content Provider和File (一) —— 总览   作为一个完成的应用程序,数据存储操作是必不可少的. ...

  7. [Azure] Notification Hubs注册模式

    [Azure] Notification Hubs注册模式 关于Azure Notification Hubs的注册模式,可以参考下列连结的文件内容. Notification Hubs Featur ...

  8. 关于谷歌浏览器不能播放背景音乐的问题(与IE的不同之处)

    第一篇博文 忍受寂寞,抵制诱惑,持之以恒. 开发时,以下代码在IE浏览器上能顺利播放背景音乐,可在谷歌浏览器上却没有动静. <html> <body> <bgsound ...

  9. VisualStudio中解决方案

    在VS中创建一个项目通常会生成一个解决方案文件(.sln)和一个隐藏的解决方案用户选项文件(.suo). 解决方案文件是一个文本文件,包含以下信息: 将被加载的所有项目以构成完整解决方案的项目清单 解 ...

  10. 微信CRM六大模块的详解

    微信团队一直强调企业微信的主要功能是服务而非营销工具,微信5.0将公众号区分为服务号和订阅号,10月底平台为服务号开放高级接口,包括客服接口.网页授权等,可见服务是微信公众号的核心价值和方向.前一阵很 ...