一、事件流

1、事件流:描述的是从页面中接受事件的顺序

IE的事件流是事件冒泡流,Netscape的事件流是事件捕获流。

2、事件冒泡

IE的事件流叫做事件冒泡(event bubbing),即事件开始时由具体的元素接受,然后逐级向上传播到较为不具体的节点。如果点击div。则事件流如下

div --> body --> html --> body

事件冒泡的过程如图

3、事件捕获

Netscape提出的事件流是事件捕获(event capturing),即不太具体的节点更早的接受到事件,然后逐级向下传递,具体的节点最后接受到事件。如果点击div,则事件流如下

body--> html --> body -->div

4、DOM事件流

DOM2级规定的事件流包括三个阶段:事件捕获阶段、处于目标阶段和事件捕获阶段。

事件流传递情况如下

二、事件处理(handler)

1、事件监听器或事件处理程序,即响应某个事件的函数,名字是以"on"开头的。

2、DOM0 级的Event handler

每个元素(包括window,document)都有自己的事件处理程序属性,属性通常全部小写,将属性设置成函数即可指定处理函数。

var btn = document.getElementById('myBtn');

btn.onclick = function() {

alert(this.id); // 'myBtn'

}

注:事件中的this对象引用当前元素,即可访问元素的所有属性和方法。

3、DOM2级的Event handler

定义了2个方法用于指定和删除事件处理函数:addEventListener,removeEventListener。

btn.addEventListener(name, handler, capture);

btn.removeEventListener(name, handler, capture);

俩个方法接受三个参数:

name 事件名,

handler 事件处理函数,

capture 是否在捕获阶段调用handler; true 是, false 在冒泡阶段处调用handler

注:通过addEventListener添加的事件处理程序只能使用removeEventListener移除。

4、IE中的Event handler

IE 中实现了俩个方法:attachEvent、detachEvent。

attachEvent('on'+name, handler);

detachEvent('on'+name, handler);

当对一个元素添加多个事件时,触发的顺序是添加顺序相反的。

注:在使用DOM0级方法时,事件处理程序在其所属元素作用域运行,而使用attachEvent方法的时,事件处理程序运行在全局作用域下。即

btn.attachEvent('onclick', function(){

alert(this === window); // => true

})

5、跨浏览器事件处理程序

见代码EventUtils

三、事件对象

在触发DOM上的事件时,会产生一个包含所有与事件相关信息的对象Event。

1、DOM中的事件对象

Event都会有的属性:

bubbles

Boolean

只读

事件是否冒泡

cancelable

Boolean

只读

是否可以取消事件默认行为

currentTarget

Element

只读

处理程序现在正在处理的元素

detail

Integer

只读

事件相关的细节信息

preventDefault

Function

只读

取消事件的默认行为。cancelable为true可用。

stopPropagation

Function

只读

阻止事件捕获或冒泡。bubbles为true可用

target

Element

只读

事件的目标元素

trusted

Boolean

只读

true表示是浏览器生成的;false为开发人员创建

type

String

只读

事件类型

eventPhase

Integer

只读

事件所处阶段:1 捕获阶段;

2 处于目标; 3 冒泡阶段

2、IE中的事件对象

访问IE中的Event对象的方式有如下几种不同方式:

1)使用DOM0级方法添加的事件,event对象作为window对象的一个属性存在。使用window.event。

2)通过HTML特性指定的事件,可以通过event变量来访问event对象。

Event对象包括的属性和方法如下

cancelBubble

Boolean

只读

默认为false,为true时阻止事件冒泡

returnValue

Boolean

只读

默认为true,为false时阻止默认事件行为

srcElement

Element

只读

事件目标,与DOM中的target属性相同

type

String

只读

 

Event 第一部分暂时介绍到这里,后续有空再更新学习笔记。感谢观看!!

javascript中的事件Event的更多相关文章

  1. JavaScript -- 时光流逝(八):js中的事件Event的使用

    JavaScript -- 知识点回顾篇(八):js中的事件Event的使用 事件通常与函数配合使用,这样就可以通过发生的事件来驱动函数执行. (1) onabort : onabort 事件会在图像 ...

  2. javascript 中的事件机制

    1.javascript中的事件. 事件流 javascript中的事件是以一种流的形式存在的. 一个事件会也有多个元素同时响应. 有时候这不是我们想要的效果, 我们只是需要某个特定的元素相应我们的绑 ...

  3. JavaScript中的事件对象

    JavaScript中的事件对象 JavaScript中的事件对象是非常重要的,恐怕是我们在项目中使用的最多的了.在触发DOM上的某个事件时,会产生一个事件对象event,这个对象中包含这所有与事件有 ...

  4. JavaScript 进阶教程一 JavaScript 中的事件流 - 事件冒泡和事件捕获

    先看下面的示例代码: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Jav ...

  5. 了解javascript中的事件(二)

    本文目录如下: 零.寒暄 一.事件的分类 二.事件代理 2.1 问题引出 2.2 什么是事件代理 2.3 完整示例 二.事件代理 三.事件代理思想的用处 四.总结 零.寒暄 这篇博客本该出现在两个月以 ...

  6. js实例分析JavaScript中的事件委托和事件绑定

    我们在学习JavaScript中,难免都会去网上查一些资料.也许偶尔就会遇到“事件委托”(也有的称我“事件代理”,这里不评论谁是谁非.以下全部称为“事件委托”),尤其是在查JavaScript的事件处 ...

  7. JavaScript中的事件循环机制跟函数柯里化

    一.事件循环机制的理解 test();//按秒输出5个5 function test() { for (var i = 0; i < 5; i++) { setTimeout(() => ...

  8. javascript中onclick事件能调用多个方法吗

    Q: javascript中onclick事件能调用多个方法吗? A: 可以的,方法如下onclick="aa();bb();cc();"每个方法用“;”分号隔开就行了

  9. 深入理解javascript中的事件循环event-loop

    前面的话 本文将详细介绍javascript中的事件循环event-loop 线程 javascript是单线程的语言,也就是说,同一个时间只能做一件事.而这个单线程的特性,与它的用途有关,作为浏览器 ...

随机推荐

  1. JavaScript面向对象(收集整理)

    (1)封装 首先理解构造函数:所谓"构造函数",其实就是一个普通函数,但是内部使用了this变量.对构造函数使用new运算符,就能生成实例,并且this变量会绑定在实例对象上. f ...

  2. 通过正则表达式提取excel特定列中含有关键字的所有行数据

    在 Excel 中打开需要提取数据excel文件,使用 Alt+F11 快捷键打开 VBA 项目窗口,在左侧的工作表名称上点右键,选择查看代码,即可出现右侧的编辑代码窗口(如下图) 在代码窗口中输入以 ...

  3. elasticsearch 基础语句

    1.  doucument id 的两种生成方式 自动生成document id自动生成的id,长度为20个字符,URL安全,base64编码,GUID,分布式系统并行生成时不可能会发生冲突 POST ...

  4. c# 小小备忘录

    一.简述 备忘录,相信大家生活中都使用过,比如记笔记.手机备忘录等等,这些都是记录自己灵感时所想.定期内想做的事情,好像跑题了,说说我的备忘录吧,我的备忘录功能上也就是增删改查的操作,另加到时提醒.语 ...

  5. [转载] Netty

    转载自http://lippeng.iteye.com/blog/1907279 Netty是什么? 本质:JBoss做的一个Jar包 目的:快速开发高性能.高可靠性的网络服务器和客户端程序 优点:提 ...

  6. Liunx初学指令

    今天又讲了一下Liunx操作系统,这个感觉比较简单一点了,多积极练练就好了,今天的课堂笔记重点如下: 1. 查看当做操作目录位置 > pwd 2. 查看(当前)目录里边的文件内容 > ls ...

  7. 整合springboot(app后台框架搭建四)

    springboot可以说是为了适用SOA服务出现,一方面,极大的简便了配置,加速了开发速度:第二方面,也是一个嵌入式的web服务,通过jar包运行就是一个web服务: 还有提供了很多metric,i ...

  8. 从cdn说起

    为什么要使用cdn 雅虎军规有一条规则建议我们是用cdn.随便在网上搜索,可以找到使用的cdn的好处. 再次强调第一条黄金定律,减少网页内容的下载时间.提高下载速度还可以通过CDN(内容分发网络)来提 ...

  9. ABAP 7.52 中的Open SQL新特性

    S/4 HANA 1709 已经在几个月前发布,随之而来的是ABAP 7.52. 本文翻译了更新文档中有关Open SQL的部分 本文链接:http://www.cnblogs.com/hhelibe ...

  10. [ 面试没回答上的问题2]IOS上给body绑定click事件的bug

    面试被问到ios上的bug,自己提到绑定click事件的bug,但是并没有把问题讲的很清楚,这里再清理一下思路. 这个bug只在IOS上有,包括ihone,ipad,由于ios浏览器都用的safari ...