一、事件流

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. 逆向知识第八讲,if语句在汇编中表达的方式

    逆向知识第八讲,if语句在汇编中表达的方式 一丶if else的最简单情况还原(无分支情况) 高级代码: #include "stdafx.h" int main(int argc ...

  2. SQL中锁表语句简单理解(针对于一个表)

    锁定数据库的一个表 复制代码代码如下: SELECT * FROM table WITH (HOLDLOCK) 注意: 锁定数据库的一个表的区别 复制代码代码如下: SELECT * FROM tab ...

  3. Getting Started With setuptools and setup.py

    https://pythonhosted.org/an_example_pypi_project/setuptools.html http://www.ianbicking.org/docs/setu ...

  4. 社群公会GangSDK:程序员入行AI领域需要哪些技能?

    作为一名Android开发工程师,身边总有些同行很焦虑,看着人工智能越来越火,总是担心Android要不行了,所以,我们需要转行么?Android还能走多久?其实,无论是对于Android还是iOS开 ...

  5. react-router 3 中的 useRouterHistory(createHistory) 到了 react-router 4 变成了什么?

    react-router 3 文档: https://github.com/ReactTraining/react-router/blob/v3/docs/API.md react-router 4 ...

  6. Ionic3学习笔记(十一)实现省市区三级联动

    本文为原创文章,转载请标明出处 目录 安装 ion-multi-picker 导入 app.module.ts 创建 provider 创建 page 一个坑 更多 效果图 1. 安装 ion-mul ...

  7. windows下安装和redis主从配置(通过哨兵控制主从切换)

    首先自己先得了解什么是redis,这里就不详做介绍什么是redis了,这篇文章主要讲的是怎么样配置 redis怎样配置主从关系和哨兵控制主从服务器的配置以及应用,就当是给自己记笔记吧! 1.下载red ...

  8. ExceptionLess 本地部署小结

    ExceptionLess 是一个免费开源分布式系统日志收集框架,地址:https://github.com/exceptionless/Exceptionless 运行环境: .NET 4.6.1 ...

  9. virtualbox下centos实现主宿互访

    1.网络连接方式 NAT 桥接 Host-Only NAT: 网络地址转换,virtualbox默认采用这种连接方式,特点: 1.虚拟机配置稍作修改就能连上外网 2.虚拟机可以ping通主机,主机不能 ...

  10. Mybatis(三)返回值

    Mybatis返回值 MyBatis中在查询进行select映射的时候,返回类型可以用resultType,也可以用resultMap,resultType是直接表示返回类型的,而resultMap则 ...