DOM事件: DOM事件级别、DOM事件流、DOM事件模型、DOM事件捕获过程、自定义事件
前端面试中只要问到事件,就肯定会有DOM事件;
如果回答出来了,就会一直向下延申,其实这些东西都很简单,但我第一次被问到的时候,也是懵的;
DOM事件级别:
DOM0 element.onclick = function() { }
DOM1 一般只有设计规范,没有设计跟事件相关的东西;所以直接跳过
DOM2 element.addEventListener(‘click’, function() { }, false)
DOM3 element.addEventLIstener(‘keyup’, function() { }, false)
DOM3在DOM2的基础上参加了很多的事件类型;
DOM2、DOM3 中的第三个参数表示:该事件在捕获阶段触发(true)、在冒泡阶段触发(false)
DOM事件模型:
就是正常的事件 冒泡 和 捕获
向上冒泡 向下捕获
DOM事件流:
事件流就是: 浏览器在为这个页面与用户做交互的过程中,(比如我点击了鼠标左键)如何将这个左键是传到页面上的,又是如何响应的;
一共分为三个阶段:捕获 -> 目标阶段 -> 冒泡
事件通过 捕获 到达目标元素,这个阶段为 目标阶段; 从目标元素再上传到window对象 即冒泡阶段
DOM事件捕获过程:
一个事件首先会被 window捕获,其捕获流程:
window -> document -> html -> body -> … -> 目标元素
<style>
#ev {
background: lightblue;
width: 200px;
height: 200px;
text-align: center;
line-height: 200px;
}
</style>
<div id="ev">
目标元素
</div>
<script>
var ev = document.getElementById('ev');
// 为了能表现出事件捕获流程,这里使用在捕获时触发事件
window.addEventListener('click', function() {
console.log('window capture');
}, true) document.addEventListener('click', function() {
console.log('document capture');
}, true) document.body.addEventListener('click', function() {
console.log('body capture');
}, true) ev.addEventListener('click', function() {
console.log('ev capture');
}, true)
</script>
Event对象的常见应用:
event.preventDefault()
阻止 元素的默认行为(如链接的跳转)
event.stopPropagaation()
阻止捕获和冒泡阶段中当前事件的进一步传播。
event.stoplmmediatePropagation()
阻止事件冒泡并且阻止相同事件的其他侦听器被调用。
备注:如果有多个相同类型事件的事件监听函数绑定到同一个元素,当该类型的事件触发时,它们会按照被添加的顺序执行。如果其中某个监听函数执行了 event.stopImmediatePropagation() 方法,则当前元素剩下的监听函数将不会被执行。
event.currentTarget(当前所绑定的事件的元素) event.target(当前被点击元素)
这两个一般都是放在一起问的:
备注: 事件代理: 把子元素的相同事件都放在父元素上,这样只要绑定一次就可以实现多个元素的使用。在这样的情况下,你就需要去判断到底是哪一个子元素被点击了;这里就要用到event.target 。
自定义事件:
这属于是进阶了,一般情况下问到这里,你就稳了; 在实际开发中也会经常用到。
var eve = new Event('custome');
ev.addEventListener('custome', function() {
console.log('custome capture');
})
ev.dispatchEvent(eve);
DOM事件: DOM事件级别、DOM事件流、DOM事件模型、DOM事件捕获过程、自定义事件的更多相关文章
- javascript和jquey的自定义事件小结
“通过事件机制,可以将类设计为独立的模块,通过事件对外通信,提高了程序的开发效率.” 可以把多个关联但逻辑复杂的操作利用自定义事件的机制灵活地控制好 对象之间通过直接方法调用来交互 1)对象A直接调用 ...
- Javascript事件模型系列(四)我所理解的javascript自定义事件
被我拖延了将近一个月的javascript事件模型系列终于迎来了第四篇,也是我计划中的最后一篇,说来太惭愧了,本来计划一到两个星期写完的,谁知中间遇到了很多事情,公司的个人的,搞的自己心烦意乱浮躁了一 ...
- 理解的javascript自定义事件
理解的javascript自定义事件 被我拖延了将近一个月的javascript事件模型系列终于迎来了第四篇,也是我计划中的最后一篇,说来太惭愧了,本来计划一到两个星期写完的,谁知中间遇到了很多事情, ...
- 详解javascript实现自定义事件
这篇文章主要为大家介绍了javascript实现自定义事件的方法,自定义事件,顾名思义,就是自己定义事件类型,自己定义事件处理函数,javascript如何实现自定义事件,需要了解的朋友可以参考下 我 ...
- 自定义事件的触发dispatchEvent
1. 对于标准浏览器,其提供了可供元素触发的方法:element.dispatchEvent(). 不过,在使用该方法之前,我们还需要做其他两件事,及创建和初始化.因此,总结说来就是: documen ...
- (转)js原生自定义事件的触发dispatchEvent
1. 对于标准浏览器,其提供了可供元素触发的方法:element.dispatchEvent(). 不过,在使用该方法之前,我们还需要做其他两件事,及创建和初始化.因此,总结说来就是: 1 2 3 d ...
- vue第八单元(组件通信 子父,父子组件通信 自定义事件 事件修饰符 v-model props验证 )
第八单元(组件通信 子父,父子组件通信 自定义事件 事件修饰符 v-model props验证 ) #课程目标 掌握使用props让父组件给子组件传参(重点) 掌握props属性的使用以及prop验证 ...
- jquery的自定义事件通过on绑定trigger触发
jquery绑定自定义事件,可以实现预先绑定好一个处理方法,当需要使用的时候利用jquery trigger来触发自定义事件,以达到方便快捷的目的.我们来假设一个这样的场景,一个textarea中的字 ...
- WPF 创建自定义控件及自定义事件
1 创建自定义控件及自定义事件 /// <summary> /// 演示用的自定义控件 /// </summary> public class ExtButton : Butt ...
- jQuery事件命名空间多事件绑定自定义事件js 命名空间 javascript命名空间
http://blog.csdn.net/pigpigpig4587/article/details/24727791 jQuery事件命名空间 jQuery支持事件命名空间,以方便事件管理.例如,在 ...
随机推荐
- [React] Fix "React Error: Rendered fewer hooks than expected"
In this lesson we'll see an interesting situation where we're actually calling a function component ...
- gtibase rpm包制作
gitbase 是一个很不错的代码分析工具,我们可以直接使用sql来分析团队的代码,以下是rpm 包的制作 简单说明 rpm 包的制作使用了fpm 一个简单,方便可以跨平台的软件包制作工具 gitba ...
- # [SDOI2019]移动金币 阶梯博弈 dp
[SDOI移动金币 链接 vijos 思路 阶梯博弈,dp统计. 参见wxyww 代码 #include <bits/stdc++.h> using namespace std; cons ...
- bzoj3073: [Pa2011]Journeys 线段树优化建图
bzoj3073: [Pa2011]Journeys 链接 BZOJ 思路 区间和区间连边.如何线段树优化建图. 和单点连区间类似的,我们新建一个点,区间->新点->区间. 又转化成了单点 ...
- js字符串连接
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> </head> ...
- HustOJ二次开发之修改相关Logo
比如将如图中的HUSTOJ进行修改: 在Linux上修改,通过关键字搜索,会获取如下两个重要文件,找到都有的文字进行修改即可: grep -rn "HUSTOJ" * cd /ho ...
- Intellij idea利用Statistic插件统计项目代码行数
1 . 插件介绍统计项目中各个文件的数量,大小,行数,平均等信息根据扩展名自定义统计详细行数信息 , 包括总行数,代码行数,代码行数占比,注释行数,注释行数占比,空白行数,空白行数占比自定义选择多个文 ...
- 禁用wordpress新编辑器,使用经典编辑器的方法
新更新的wordpress推出勒个什么古腾堡编辑器?简直太难用了,怎么屏蔽古腾堡编辑器,如何使用wordpress的经典编辑器.有人说使用插件,比如ClassicEditor或者DisableGute ...
- python gis库
apt install python3 python3-gdal gdal-bin python3-pyproj proj-bin python3-shapely fiona python3-fion ...
- Twitter雪花算法SnowFlake算法的java实现
https://juejin.im/post/5c75132f51882562276c5065 package javaDemo; /** * twitter的snowflake算法 -- java实 ...