DOM事件-阿里云开发者社区

开发者社区> effort880829> 正文

DOM事件

简介: 主要内容: 1.事件流 2.事件注册 3.事件对象 4.事件分类 5.事件代理     什么是DOM事件? 点击一个DOM元素 键盘按下一个键 输入框输入内容 页面加载完成         1.事件流 DOM事件流经历的三个阶段(w3c标准): 1.捕获阶段(capture phase):从顶层的window到 事件触发节点的父节点。
+关注继续查看

 

主要内容:

1.事件流

2.事件注册

3.事件对象

4.事件分类

5.事件代理

 

 

什么是DOM事件?

点击一个DOM元素

键盘按下一个键

输入框输入内容

页面加载完成

 

 

 

 

1.事件流

img_e391e01265d77970d10dee1a03cb5afe.png

DOM事件流经历的三个阶段(w3c标准):

1.捕获阶段(capture phase):从顶层的window到 事件触发节点的父节点。

2.触发阶段/目标阶段(target phase):事件触发节点。

3.冒泡阶段(bubble phase):从当前时间节点的父节点 到 顶层的window对象。

 

注意:

1.w3c定义的这三个阶段,也不是所有的浏览器都实现的。比如:在IE的低版本里面就没有『捕获过程』,只有『触发』和『冒泡』过程。

2.DOM事件中也不是全部都有这三个过程,有些事件是没有冒泡的,比如: 『页面load事件』就没有冒泡。

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

关于『事件流』还可以参考(英文): https://www.w3.org/TR/uievents/#dom-event-architecture

 


2.事件的注册与触发

2.1 事件注册

2.2 取消事件注册

2.3 事件触发

主体都是一个『DOM元素』

 

2.1 事件注册

eventTarget.addEventListener(type,listener[,useCapture]);

 

addEventListener方法时w3c规定的。三个参数:

参数名 可选参数 描述
type    事件类型。
listener    事件处理函数。
useCapture  可选 是否是『捕获过程』。
默认情况下DOM事件里面处理的是『冒泡过程』,只有把 useCapture 设为 true 时,它才会处理『捕获过程

 

举个栗子:

var elem=document.getElementById('div1');
var clickHandler = function(event){
    //TODO
}

elem.addEventListener('click',clickHandler,false);

 

 

2.2 取消事件注册

eventTarget.removeEventListener(type,listener[,useCapture])

 

举个栗子:

elem.removeEventListener('click',clickHandler,false);//w3c规范
elem.onclick=null;//通常不建议用这种方式

 

 

2.3 事件触发

事件触发其实有很多方式,比如『点击元素』『按下按键』『程序代码触发 』,这里只讲 『程序代码触发』。

如何用程序代码触发呢? w3c中规定了这样的API

eventTarget.dispatchEvent(type);  //在DOM对象上,通过 dispathEvent 传入一个 事件类型 就可以触发。

 

浏览器兼容性(IE6,7,8),

我们再前面讨论的都是 w3c标准规定的,而有些厂商并没有按照 w3c标准。那么我们在平时编程中,

遇到低版本的 IE浏览器,应当怎么办呢? 实际上这些不遵循w3c标准的浏览器厂商也规定了自己的 事件注册,事件取消,事件触发的API。这就是需要我们在平时编程当中做一些兼容。

 

在 IE的低版本中(IE6、7、8)

事件注册与取消

--attchEvent/detachEvent    注册事件/取消事件

事件触发

--fireEvent(e)

no capture 在IE低版本中,是不存在『捕获阶段』的。

 

 

浏览器兼容性

注册事件

var addEvent = document.addEventListener ?
function(elem,type,listener,useCapture){
    elem.addEventListener(type,listener,useCapture);
}:
//IE 6,7,8
function(elem,type,listener,useCapture){
    elem.attachEvent('on'+type,listener);
};

 

取消事件

var delEvent = document.removeEventListener ? 
//w3c
function(elem,type,listener,useCapture) {
    elem.removeEventListener(type,listener,useCapture);
}:
//IE 6,7,8
function (elem,type,listener,useCapture){
    elem.detachEvent('on'+type,listener);
};

 

参考资料:
http://www.w3.org/TR/uievents/
https://developer.mozilla.org/zh-CN/docs/Web/API/EventTarget

 

 

 


3.事件对象

DOM元素注册事件,取消事件注册 ,以及触发事件。那么『事件对象』是什么呢?

当事件被触发时,会调用这个事件处理函数,浏览器引擎会传入一些信息,那么这个信息就代表当前事件的一些状态,这个就是事件的对象。

我们在编程过程中,会用到事件对象中的一些属性和方法。

举个栗子(w3c):

img_3b4494473f167c31e08a606be17ff2dc.png

左图中,event 就是事件对象,当我用鼠标点击元素时,那么可能这个事件对象中包含了鼠标的位置,x,y坐标、

键盘上的shift键有没有被按下去、等等这样一些信息都可以在事件对象中找到。

 

 

 

 

 

 

IE低版本,事件对象的兼容处理

img_b938ed99ba4234fa6ae751cfe3f0b7ae.png

 

 

 

 

 

 

 

 

 

 

 

3.1 事件对象的属性和方法

事件有很多种类型,每一种不同类型的事件是在处理不同的场景,当然这些处理不同场景的事件对象中包含的信息也就不太一样。所以我们将属性和方法时,分为 『通用的』『个性的』。

事件对象通用的属性和方法

属性

属性名 描述 举个栗子
type 事件类型 click
target(srcElement) 事件触发的节点  
currentTarget 当前处理事件节点的函数。
当我们要给<a>注册一个事件的时候,我们可以不注册到<a>上面,而直接注册到<a>的父节点上面,因为当事件冒泡到<a>的父节点时,我仍然可以处理这个事件。
当我们把事件注册到<a>的父节点时,那么curreTarget就是父节点。只有当事件处于目标阶段时,target才和currentTarget的值是一样的。
 

 

 

方法

方法名 描述 举个栗子
w3c的
stopPropagation

IE低版本的
event.cancelBubble=true
阻止传播。
有时,我们不想让事件再冒泡上去了,我们就需要调用这样的一个方法。
比如我在document这个节点就处理了这个事件,如果我不想让事件传给window节点的话,这时就需要阻止传播。
w3c的
Event.preventDefault()

IE低版本的
Event.returnValue=false
阻止默认行为

默认行为:

当我打开一个连接时,连接就会被打开。

当我双击一段文字时,这段文字就会被选中。

这些都是浏览器中定义的默认行为,但是有时候我们却不想按照默认的做,而是做一些其他操作,比如:

当我点击一个连接时,这个连接不会被打开。


只要我在事件处理函数中调用了这个方法,那么他的默认行为就会被阻止。
stopImmediatePropagation 做了两个事情:
1.阻止事件向父节点传播
2.阻止当前节点的后续事件(所有在被阻止的事件 后面 注册的事件 不会被触发)
 
     

 

 

 

 


4.事件分类

 

w3c对事件做的分类,每一种分类里面都定义了一些事件。

img_18a0a30c95adc570e9b60a05fc378b3e.png

 

MouseEvent

事件类型 是否冒泡 元素 默认事件 元素例子
click YES Element focus/activation div
dbclick YES Element focus/activation div
mousedown YES Element drag/scroll
text selection
div
mousemove YES Element None div
mouseout YES Element None div
mouseover YES Element None div
mouseup YES Element context menu div
mouseenter NO Element None div
mouseleave NO Element None div

 

MouseEvent对象

属性

image

clientX--点到 浏览器 左侧的距离                    

clientY--点到 浏览器 顶部的距离

 

 

 

 

 

 

 

 

 

 

image

screenX--点到 屏幕 左侧的距离 

screenY--点到 屏幕 顶部的距离

 

 

 

 

 

 

 

 

 

 

ctrlKey,shiftKey,altKey,metaKey

当MouseEvent事件被触发的时候,如果 键盘中的 Ctrl键 是按下去的,则 ctrlKey的值为true,  否则为false。

 

button(0,1,2)

当MouseEvent事件被触发的时候,当前按下的鼠标是  左键-0  中间键-1  右键-2

 

 

MouseEvent顺序

鼠标事件是非常灵敏的,在鼠标移动的时候实际上会触发很多mousemove的事件,在移动的过程当中会有很多鼠标事件的产生。那么这些事件之间到底是怎么样的顺序?

举个栗子:

         『 从元素A上方移过 』

mousemove—>mouseover(A)—>mouseenter(A)—>mousemove(A)—>mouseout(A)—>mouseleave(A)

 

          『 点击元素 』

mousedown—>[mousemove]—>mouseup—>click

注意:是在鼠标键弹起时触发的click

实例: 拖拽div

 

 

 

 

 

WheelEvent 鼠标滚轮

属性

deltaMode

deltaX

deltaY

deltaZ

 

 

 

FocusEvent 焦点事件

事件类型 是否冒泡 元素 默认事件 元素例子 描述
blur NO Window、Element None window、input 当元素失去焦点时
focus NO Window、Element None window、input 当元素获得焦点时
focusin NO Window、Element None window、input 当元素即将获得焦点时(在获得焦点之前)
focusout NO Window、Element None window、input 当元素即将失去焦点时(在失去焦点之前)

 

属性

relatedTarget    当一个元素失去焦点时,另外一个元素就会获得焦点。  relatedTarget就是  紧接着获得焦点的那个元素。

 

 

InputEvent 输入事件

当在输入框中输入内容时,会不断的触发事件

事件类型 是否冒泡 元素 默认事件 元素例子 描述
beforeinput YES Element update DOM Element input 此时输入框还没有值
input YES Element None input  

 

 

KeyboardEvent 键盘事件

事件类型 是否冒泡 元素 默认事件 元素例子
keydown YES Element beforeinput/input focus/blur div,input
keyup YES Element None div,input

 

属性

key  - 按下的功能键?数字键

code

ctrlKey、shiftKey、altKey、metaKey

repeat  持续按一个键不松开,repeat的值就是 true

keyCode

charCode

which

开始做,坚持做,重复做

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
阿里云服务器怎么设置密码?怎么停机?怎么重启服务器?
如果在创建实例时没有设置密码,或者密码丢失,您可以在控制台上重新设置实例的登录密码。本文仅描述如何在 ECS 管理控制台上修改实例登录密码。
10056 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,大概有三种登录方式:
2958 0
阿里云服务器ECS远程登录用户名密码查询方法
阿里云服务器ECS远程连接登录输入用户名和密码,阿里云没有默认密码,如果购买时没设置需要先重置实例密码,Windows用户名是administrator,Linux账号是root,阿小云来详细说下阿里云服务器远程登录连接用户名和密码查询方法
11602 0
阿里云服务器端口号设置
阿里云服务器初级使用者可能面临的问题之一. 使用tomcat或者其他服务器软件设置端口号后,比如 一些不是默认的, mysql的 3306, mssql的1433,有时候打不开网页, 原因是没有在ecs安全组去设置这个端口号. 解决: 点击ecs下网络和安全下的安全组 在弹出的安全组中,如果没有就新建安全组,然后点击配置规则 最后如上图点击添加...或快速创建.   have fun!  将编程看作是一门艺术,而不单单是个技术。
10882 0
使用SSH远程登录阿里云ECS服务器
远程连接服务器以及配置环境
2507 0
如何设置阿里云服务器安全组?阿里云安全组规则详细解说
阿里云安全组设置详细图文教程(收藏起来) 阿里云服务器安全组设置规则分享,阿里云服务器安全组如何放行端口设置教程。阿里云会要求客户设置安全组,如果不设置,阿里云会指定默认的安全组。那么,这个安全组是什么呢?顾名思义,就是为了服务器安全设置的。安全组其实就是一个虚拟的防火墙,可以让用户从端口、IP的维度来筛选对应服务器的访问者,从而形成一个云上的安全域。
7468 0
阿里云ECS云服务器初始化设置教程方法
阿里云ECS云服务器初始化是指将云服务器系统恢复到最初状态的过程,阿里云的服务器初始化是通过更换系统盘来实现的,是免费的,阿里云百科网分享服务器初始化教程: 服务器初始化教程方法 本文的服务器初始化是指将ECS云服务器系统恢复到最初状态,服务器中的数据也会被清空,所以初始化之前一定要先备份好。
7359 0
阿里云服务器ECS登录用户名是什么?系统不同默认账号也不同
阿里云服务器Windows系统默认用户名administrator,Linux镜像服务器用户名root
4498 0
+关注
319
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载