事件触发机制中的事件(什么是事件什么是事件流)
事件触发机制中的事件(什么是事件什么是事件流)
2024-11-22 02:35:46  作者:芐雨哋悸兯  网址:https://m.xinb2b.cn/life/jrh123978.html


一. 什么是事件模型

1. 事件

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

2. 事件流

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

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

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


如果单击了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>就停止了;

处于目标阶段:事件具体目标<div>;

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

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

二. W3C和IE绑定事件

一般绑定事件可以用

obj.onclick = function(){};

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


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

1. W3C

W3C绑定事件

obj.addEventListener(event,function,usecapture)

W3C解绑事件

obj.removeEventListener(event,function,usecapture)

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


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

1.按照绑定的顺序执行

obj.addEventListener("click",function1,false)obj.addEventListener("click",function2,false)obj.addEventListener("click",function3,false)function1->function2->function3

2. IE中绑定事件 事件冒泡流

IE中绑定事

件obj.attachEvent(event,function)

IE中解绑事件

obj.detachEvent(event,function)

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

obj.attachEvent("onclick",function1)obj.attachEvent("onclick",function2)obj.attachEvent("onclick",function3)

IE11下:function1->function2->function3

IE8下:function3->function2->function1

颠倒顺序执行。

3. W3C和IE中绑定事件的不同点

(1) 参数不同,W3C可以控制事件是在捕获阶段还是在冒泡阶段执行

(2) 绑定事件的名称不同:

W3C没有on,如:click

IE 有on ,如:onclick

(3) 绑定多个事件的执行顺序

W3C按顺序执行

IE8中是倒序执行,高一点的版本貌似是按顺序执行

注意:新版本的ie在绑定事件上有所修改经过测试:

ie10(不包括ie10)以上就只支持addEventListener绑定事件了

ie9,ie10支持addeventListener和attachEventie8及其以下都只支持attachEvent

三. 事件对象

DOM中的事件对象和IE中的事件对象也不同。

1. DOM中的事件对象

触发某个事件时,会产生一个事件对象event。

不管绑定事件处理程序的方式是什么,浏览器会将这个事件对象传入事件处理程序中,作为第一个参数event。

event.currentTarget:绑定事件的元素在事件处理程序内部:this永远等于event.currentTarget;

event.target:触发事件的元素(事件的实际目标)

event.type:事件类型

event.stopPropagation();取消事件进一步捕获或冒泡什么是事件冒泡:

<body> <input id="btn" type="submit" /></body>

给按钮绑定一个点击事件


当我们点击按钮时,会触发两个点击事件,因为按钮的点击事件冒泡到其父元素上了。使用event.stopPropagation()阻止冒泡


2. IE中的事件对象

访问ie中事件对象event的三种不同方式:

(1) 使用.onclick方式绑定时

通过window.event的方式访问

(2) 使用attachEvent的方式绑定时

通过传入event参数访问

也可以通过window.event来访问

(3) 在html里面绑定时

直接通过一个event的变量访问

eg:

<input type="submit" onClick="alert(event.type)">ie中的event对象有srcElement属性,但没有target属性.

event.srcElement = event.target

3. 兼容写法

ie中事件是全局变量window.event可以随时拿到 ,其它浏览器必须在参数中传递才能获取事件

var event = event || window.event;obj = event.srcElement ? event.srcElement : event.target;

四. 事件委托代理机制

1. 事件委托代理机制运用的场景


点击每一个li执行一个事件,让数字显示在div里.

思路:若给列表的每一项分别绑定点击事件,这样做的弊端在于,增加了内存,因为$(’#data-list li’)里有1000个li对象。同时降低了代码性能,因为$(’#data-list li’)会搜索ul#data-list下所有的li元素

这时,可以使用事件委托代理机制

思路:将li的点击事件委托给其父元素ul,当内层元素的某个事件被触发,事件会一级一级地冒泡到外层元素。给父元素绑定事件,当被触发时,判断当前触发事件的对象是否是目标元素li,如果是,则执行回调函数。

event.target 当前触发事件的对象,即用户真正单击到的对象event.currentTarget 当前绑定事件的对象 UL.data-list

手写原生js实现事件代理,并要求兼容浏览器考察对事件对象e的了解程度,以及在IE下对应的属性名


五. 不支持冒泡的事件

focusblurmouseentermouseleave

focus和blur如何实现事件代理:

由于事件代理是基于事件的冒泡机制,但是focus和blur不支持冒泡。

在IE中可以使用focusein和focusout来实现

在非IE浏览器中可以在捕获阶段绑定事件 (true).

.addEventListener(“click”,function(event){},true);

六. js中如何自定义事件


欢迎关注。

  • 那年我们青春正好剧情(主演是谁)
  • 2024-11-22主演是谁该剧讲述了四个出生于80年代的充满朝气的可爱年轻人,肖小军、刘婷、郭海兵、韩露,高中毕业后怀着各自的人生理想进入象牙塔苦读或步入社会拼搏的故事青年肖小军高中毕业后走上社会,面对时代的变迁和社会的高速发。
  • 太原哪个公园有樱花了(太原一樱花公园)
  • 2024-11-22太原一樱花公园文/全球旅行官(欢迎个人转载与分享)人生就是一场未知目得地的旅行很多时候,我们并不知道自己接下来会遇见怎样的未来只不过有时候,我们只是一味地狂奔,却忘记了旅行的意义太原玉泉山城郊森林公园是人们在早春欣。
  • 鲁菜美食做法家常菜(鲁菜西派济南菜)
  • 2024-11-22鲁菜西派济南菜中国八大菜系之首——鲁菜中国的饮食文化博大精深,源远流长,在世界上享有盛誉按照传统的划分,中国菜划分为八大菜系:鲁、川、粤、苏、浙、湘、闽、徽鲁菜又是八大菜系之首,而且是唯一的北方菜系据专家研究:“一。
  • 情侣空间怎么看被挡访客(如何查看情侣空间被挡访客)
  • 2024-11-22如何查看情侣空间被挡访客在我们的手机上打开qq,点击好友动态进去好友动态页之后,进去个人空间,点击情侣空间进去情侣空间之后,点击访客进去我的访客界面,可以看到谁看过我,需要注意的是如果设置了情侣空间仅彼此可见,一般这个为0点。
  • 鞋可以用洗衣机洗吗(鞋可不可以用洗衣机洗吗)
  • 2024-11-22鞋可不可以用洗衣机洗吗是可以的首先解开鞋带,鞋带和球鞋务必要分开来洗,清除鞋子表面容易刷除的污垢,把鞋子和鞋带放进洗衣机里,加一些洗涤剂设定用冷水洗涤,开始清洗,冷水洗,鞋子是不会缩水的,可以防止鞋子褪色洗完之后拿出鞋子,。
  • 有趣的宅家无聊(宅家带娃一定要备上这些实用又好玩的大神级网站)
  • 2024-11-22宅家带娃一定要备上这些实用又好玩的大神级网站本该是最适合出门走走的五月天,偏偏被疫情拦在了家里,就算有“绿马”护身,出门也是小心翼翼,生怕跑个步都会被弹窗索性好好配合疫情工作,减少出门,宅家不添乱宅家并不意味着躺到发霉,柴米油盐一日三餐,到点打。
  • 污水处理的三个重要步骤(污水处理知识)
  • 2024-11-22污水处理知识氧垂曲线定义:在河流受到大量有机物污染时,由于有机物这种氧化分解作用,水体溶解氧发生变化,随着污染源到河流下游一定距离的溶解氧由高到低,再到原来溶解氧水平,可绘制成一条溶解氧下降曲线,称之为氧垂曲线氨。
  • 一天中需要补充哪些营养物质(早点补充这几种营养元素)
  • 2024-11-22早点补充这几种营养元素80多岁的奶奶不小心摔倒,在床上躺了一个多月还没有好,其实就是跌倒而已,如果是年轻人,一点事儿都没有,可奶奶患有严重的骨质疏松,换过髋关节,医生说她的骨头就好像是糠了的木头一样,稍微给点外力,可能就骨。
  • 内双肿眼泡长啥样(内双肿泡眼大眼术)
  • 2024-11-22内双肿泡眼大眼术Hello,美女们上午好~有没有内双肿眼泡的姐妹,画眼妆遇到这样的问题?对着镜子画的时候可美了,但是一睁开眼睛啥也没有了而且显得眼睛很脏,不好看今天教大家如何画出自然不显脏的眼影思路就是凸显眼睛的纯净。
  • 尤靖茹白宇(尤靖茹绅探杀青)
  • 2024-11-22尤靖茹绅探杀青由邓科执导的超级剧集《绅探》在经历了三个多月的拍摄,辗转江苏、上海两地之后,于近日圆满杀青该剧以民国时期的上海为背景,讲述了罗非(白宇饰演)、秦小曼(尤靖茹饰演)、本杰明(季晨饰演)组成的破案铁三角抽。
  • 怎样让充电器线不容易坏(充电器数据线快报废了还不知道)
  • 2024-11-22充电器数据线快报废了还不知道在这个手机不离手的时代,给手机充电已经是我们的家常便饭,充电器自然就成了一种易耗品虽然一部手机使用三四年都没什么问题,但在日常使用中,充电头和充电线却是很容易提前“罢工”的有时候,我们手头的充电器已经。
  • 男孩考试没考好画奖状(男生自己没考好)
  • 2024-11-22男生自己没考好文/艾小贝爱教育学生想得到奖状,但没有拿到应该怎么办?进入7月中旬,中小学生这学期的学习也到了要结束的时候了,然后学生就要离开学校,进入到期待已久的暑假了想到快乐的暑假时光在想自己招手,中小学生在放假。