DOM事件模型

codergarden 发布于2019-08-22 18:03 / 1087人阅读

摘要：事件模型历史标准没有对事件进行修订所以事件模型的标准就是制定的标准规定了事件捕获事件冒泡事件取消和知识点在的属性中使用时要加括号在的中给点击事件赋值不加括号写在里相当于字符串里的代码是执行意思是执行这个这个代码意思是执行在里为一个函数返回类

DOM事件模型 1.历史

2.DOM level2 标准

DOM level3没有对事件进行修订,所以DOM事件模型的标准就是DOM level2 制定的标准
规定了
事件捕获event capture
事件冒泡event bubbling
事件取消event cancelation

3.DOM level 0和1知识点

在html的onclick属性中,使用时要加括号,
在js的onclick中,给点击事件赋值,不加括号.

写在html里,相当于eval()字符串里的代码(eval是执行),eval("print")意思是执行这个print这个代码,eval("print()")意思是执行print().

在js里,print 为一个函数,返回类型也为函数,赋值的时候,就是把函数这个类型赋给onclick,而print()返回类型为undefined.

4.DOM level 2知识点 4.1在L1中,事件属性

在DOM level1中,onclick只是一个属性,可以被覆盖,所以一个元素只能有一个onclick时事件

4.2在L2中,事件监听队列

事件监听队列,xxx有用一个队列,是eventListeners事件监听队列,先添加的先触发

先进先出,先绑定的先触发,可以绑定多个相同的事件
每一个事件都有一个自己的队列,click有click的队列mouseenter有他自己的队列

也可以移出队列

也可以只触发一次

相当于jQuery中的one

总结:

4.3DOM level 2中的两个阶段

总结:

如果不传送参数()默认,或者传输false,那么就从内到外.

如果传true,从外到内
跟代码顺序没有关系,如果坚挺的是同一个元素,才跟代码顺序有关系

4.4 触发顺序总结:捕获与冒泡阶段

执行顺序就是先从左,往下,再从底,往右上,如果不写第三个参数或者第三个参数为false,那么函数就只在右边,执行顺序就是fn3,fn2,fn1.

如果把参数改为true,那么函数会跑到左边,执行顺序发生改变:
如下图

所以分为两个阶段

从上到下,捕获阶段

从下到上,冒泡阶段

事件模型就是先捕获,再冒泡.
执行顺序就是先捕获再冒泡,看他在不活的路上还是冒泡的路上

4.5考点,如果一个元素同时有捕获和冒泡,即第三个参数有事false,又是true

特例:

如果这个元素是最底层的元素(是嵌套的里面嘴内部的元素),那么不管是捕获还是冒泡,先写的先执行.如图:

(一般没人会选用两个阶段来用),
要么左边要么右边

例子:popover(浮层)点击别的地方,浮层消失

GPU云服务器云服务器 DOM事件 dom事件管理 dom事件冒泡 DOM元素事件

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/95447.html

前端面试（知识点）整理（一）

摘要：接受个参数事件类型，是否冒泡，是否阻止浏览器的默认行为触发上绑定的自定义事件触发元素上绑定事件事件的委托代理的原理以及优缺点。委托代理事件是那些被绑定到父级元素的事件，但是只有当满足一定匹配条件时才会被挪。一、页面布局 1.问题：假设高度已知，请写出三栏布局，其中左栏、右栏宽度各为300px，中间自适应。解决方案一：使用浮动布局` Document ...

zhichangterry 2019-08-22 11:06 评论0 收藏0
前端面试（知识点）整理（一）

摘要：接受个参数事件类型，是否冒泡，是否阻止浏览器的默认行为触发上绑定的自定义事件触发元素上绑定事件事件的委托代理的原理以及优缺点。委托代理事件是那些被绑定到父级元素的事件，但是只有当满足一定匹配条件时才会被挪。一、页面布局 1.问题：假设高度已知，请写出三栏布局，其中左栏、右栏宽度各为300px，中间自适应。解决方案一：使用浮动布局` Document ...

Songlcy 2019-08-01 17:36 评论0 收藏0
前端面试（知识点）整理（一）

摘要：接受个参数事件类型，是否冒泡，是否阻止浏览器的默认行为触发上绑定的自定义事件触发元素上绑定事件事件的委托代理的原理以及优缺点。委托代理事件是那些被绑定到父级元素的事件，但是只有当满足一定匹配条件时才会被挪。一、页面布局 1.问题：假设高度已知，请写出三栏布局，其中左栏、右栏宽度各为300px，中间自适应。解决方案一：使用浮动布局` Document ...

ThreeWords 2019-08-29 13:26 评论0 收藏0
温故js系列（10）-事件event

摘要：当用户选择文本框或中的一个或多个字符触发。当文本框或内容改变且失去焦点后触发。事件对象事件对象就是对象，通过处理函数传递。比如右击文本框输入区域，会弹出系统菜单点击超链接会跳转到指定页面点击提交按钮会提交数据。前端学习：教程&开发模块化/规范化/工程化/优化&工具/调试&值得关注的博客/Git&面试-前端资源汇总欢迎提issues斧正：Event JavaScript-事件even...

Freelander 2019-08-20 10:24 评论0 收藏0
原生JavaScript事件详解

摘要：事件通过和管理，当然，这是标准。最后一个参数是布尔型，代表捕获事件，代表冒泡事件。事件类型，布尔值，这个必须和注册事件时的类型一致。也就是说，名称回调类型，三者共同决定解除哪个事件，缺一不可。 JQuery这种Write Less Do More的框架，用多了难免会对原生js眼高手低。小菜其实不想写这篇博客，貌似很初级的样子，但是看到网络上连原生js事件绑定和解除都说不明白，还是决...

_ang 2019-08-21 12:37 评论0 收藏0