javascript中的事件Event
一、事件流
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的更多相关文章
- JavaScript -- 时光流逝(八):js中的事件Event的使用
JavaScript -- 知识点回顾篇(八):js中的事件Event的使用 事件通常与函数配合使用,这样就可以通过发生的事件来驱动函数执行. (1) onabort : onabort 事件会在图像 ...
- javascript 中的事件机制
1.javascript中的事件. 事件流 javascript中的事件是以一种流的形式存在的. 一个事件会也有多个元素同时响应. 有时候这不是我们想要的效果, 我们只是需要某个特定的元素相应我们的绑 ...
- JavaScript中的事件对象
JavaScript中的事件对象 JavaScript中的事件对象是非常重要的,恐怕是我们在项目中使用的最多的了.在触发DOM上的某个事件时,会产生一个事件对象event,这个对象中包含这所有与事件有 ...
- JavaScript 进阶教程一 JavaScript 中的事件流 - 事件冒泡和事件捕获
先看下面的示例代码: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Jav ...
- 了解javascript中的事件(二)
本文目录如下: 零.寒暄 一.事件的分类 二.事件代理 2.1 问题引出 2.2 什么是事件代理 2.3 完整示例 二.事件代理 三.事件代理思想的用处 四.总结 零.寒暄 这篇博客本该出现在两个月以 ...
- js实例分析JavaScript中的事件委托和事件绑定
我们在学习JavaScript中,难免都会去网上查一些资料.也许偶尔就会遇到“事件委托”(也有的称我“事件代理”,这里不评论谁是谁非.以下全部称为“事件委托”),尤其是在查JavaScript的事件处 ...
- JavaScript中的事件循环机制跟函数柯里化
一.事件循环机制的理解 test();//按秒输出5个5 function test() { for (var i = 0; i < 5; i++) { setTimeout(() => ...
- javascript中onclick事件能调用多个方法吗
Q: javascript中onclick事件能调用多个方法吗? A: 可以的,方法如下onclick="aa();bb();cc();"每个方法用“;”分号隔开就行了
- 深入理解javascript中的事件循环event-loop
前面的话 本文将详细介绍javascript中的事件循环event-loop 线程 javascript是单线程的语言,也就是说,同一个时间只能做一件事.而这个单线程的特性,与它的用途有关,作为浏览器 ...
随机推荐
- NFS服务器的安装与配置
由于实验室的项目需要实现在CephFS之上建立NFS之上,所以记录一下NFS服务器的安装与配置流程. 1.NFS服务的简介: NFS 是 Network File System 的缩写,是Sun公司于 ...
- unity下跨平台excel读写
这是以前写的跨windows和ios读写excel的工具,因为原来导表工具引用的第三方读写excel的dll只能在windos下使用,造成要在mac机器上跑PC端或者打包的时候,每次都要先在windo ...
- 在vi按了ctrl+s后
习惯了在windows下写程序,也习惯了按ctrl+s 保存代码,在用vi的时候,也习惯性的按ctrl+s 结果就是如同终端死掉了一样. 原来: ctrl+s 终止屏幕输出(即停止回显),你敲的依然有 ...
- [转载] 从Hadoop到Spark的架构实践
转载自http://www.csdn.net/article/2015-06-08/2824889 http://www.zhihu.com/question/26568496 当下,Spark已经在 ...
- [转载] 使用Redis的Java客户端Jedis
转载自http://aofengblog.blog.163.com/blog/static/631702120147298317919/ 在实际的项目开发中,各种语言是使用Redis的客户端库来与Re ...
- 基于 HTML5 WebGL 的 3D “弹力”布局
分子力(molecular force),又称分子间作用力.范得瓦耳斯力,是指分子间的相互作用.当二分子相距较远时,主要表现为吸引力,这种力主要来源于一个分子被另一个分子随时间迅速变化的电偶极矩所极化 ...
- SparkStreaming动态读取配置文件
SparkStreaming动态读取配置文件 标签: SparkStreaming HDFS 配置文件 MySql 需求 要实现SparkStreaming在流处理过程中能动态的获取到配置文件的改变 ...
- open_basedir restriction in effect.文件访问没有权限异常
本次搭建公司web开发环境遇到了不少坑首先认为可能是设置的目录写入权限问题,后面解决了发现不是 问题在于nginx配置文件进行了网站目录的保护 配置文件/usr/local/nginx/conf/fa ...
- openGL光源概念
1. 光照模型 环境光——经过多次反射而来的光称为环境光,无法确定其最初的方向,但当特定的光源关闭后,它们将消失. 全局环境光——每个光源都能对场景提供环境光.此外,还有一个环境光,它不来自 ...
- day01_HTML
今日任务 网站信息页面案例 网站图片信息页面案例 网站友情链接页面案例 网站首页案例 网站后台页面案例 教学目标 了解什么是标记语言 了解HTML的框架标签 掌握HTML的主要标签(字体,图片,列表, ...