c事件和委托的区别_什么是事件,什么是事件流?标准模式与IE的区别?说说事件委托...

90280df2df94a956895f241a75578570.png

一. 什么是事件模型

1. 事件

事件是用户对浏览器的一个动作或者浏览器自身执行的某种动作,文档或浏览器窗口发生特定交互的瞬间。

2. 事件流

事件流:从页面中接收事件的顺序

IE和Netscape提出了两种相反的事件流:事件冒泡流、事件捕获流

事件冒泡流:由具体的节点逐级往上传播。

bca3671c686e6a7d9f57dc28e026e1f2.png

如果单击了div,那么click事件的传播为:div -> body -> html -> Document -> windows。

事件捕获流:由最上层的节点逐级往下传到具体节点。

如果单击了div,那么click事件的传播为:windows -> Document -> html -> body -> div

windows对象和Document对象的区别:

windows对象:指的是浏览器的窗口

Document对象:指的是显示于窗口的一个文档

Document 对象是 Window 对象的一部分,可通过 window.document 属性对其进行访问

3. DOM2级事件规定的事件流

W3C为了兼顾之前的标准,将事件发生定义成三个阶段:事件捕获阶段、处于目标阶段、事件冒泡阶段

事件捕获阶段:windows -> Document -> html -> body;

事件捕获阶段,事件到

就停止了;

处于目标阶段:事件具体目标

;

事件冒泡阶段:body -> html -> Document -> windows;

DOM2级事件明确要求捕获阶段不会涉及到事件目标,但是很多高版本的浏览器都会在捕获阶段触发事件对象上的事件。

二. W3C和IE绑定事件

一般绑定事件可以用

obj.onclick = function(){};

但如果要给同一个元素绑定多个事件,上面那种方法就行不通了

64fc5b53ff317dc7e599e2cf761dba28.png

只会alert("3"),其他的被覆盖了,可以采用下面的绑定事件的方式:

1. W3C

W3C绑定事件

obj.addEventListener(event,function,usecapture)

W3C解绑事件

obj.removeEventListener(event,function,usecapture)

usecapture可选值有false:事件在冒泡阶段执行(默认)true:事件在捕获阶段执行下面是一个冒泡阶段和捕获阶段执行事件的例子:

d3106c31fa8111cf453f078de78176a5.png

如果用addEventListener给同一个对象绑定了多个事件,执行顺序如下:

1.按照绑定的顺序执行

obj.addEventListener("click
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值