百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 优雅编程 > 正文

好程序员web前端培训JavaScript学习笔记之Event事件二

sinye56 2024-10-27 14:12 8 浏览 0 评论

 好程序员web前端培训分享JavaScript学习笔记之Event事件二,今天来聊一聊事件的执行机制

  什么是事件的执行机制呢?

  思考一个问题?

  当一个大盒子嵌套一个小盒子的时候,并且两个盒子都有点击事件

你点击里面的小盒子,外面的大盒子上的点击事件要不要执行

事件的传播

· 就像上面那个图片一样,我们点击在红色盒子身上的同时,也是点击在了粉色盒子上

· 这个是既定事实,那么两个盒子的点击事件都会触发

· 这个就叫做 事件的传播

· 当元素触发一个事件的时候,其父元素也会触发相同的事件,父元素的父元素也会触发相同的事件

· 就像上面的图片一样

· 点击在红色盒子上的时候,会触发红色盒子的点击事件

· 也是点击在了粉色的盒子上,也会触发粉色盒子的点击事件

· 也是点击在了 body 上,也会触发 body 的点击事件

· 也是点击在了 html 上,也会触发 html 的点击事件

· 也是点击在了 document 上,也会触发 document 的点击事件

· 也是点击在了 window 上,也会触发 window 的点击事件

· 也就是说,页面上任何一个元素触发事件,都会一层一层最终导致 window 的相同事件触发,前提是各层级元素得有注册相同的事件,不然不会触发

· 在事件传播的过程中,有一些注意的点:

00001. 只会传播同类事件

00002. 只会从点击元素开始按照 html 的结构逐层向上元素的事件会被触发

00003. 内部元素不管有没有该事件,只要上层元素有该事件,那么上层元素的事件就会被触发

· 到现在,我们已经了解了事件的传播,我们再来思考一个问题

· 事件确实会从自己开始,到 window 的所有相同事件都会触发

· 是因为我们点在自己身上,也确实逐层的点在了直至 window 的每一个元素身上

· 但是到底是先点在自己身上,还是先点在了 window 身上呢

· 先点在自己身上,就是先执行自己的事件处理函数,逐层向上最后执行 window 的事件处理函数

· 反之,则是先执行 window 的事件处理函数,逐层向下最后执行自己身上的事件处理函数

冒泡、捕获、目标

· 我们刚才聊过了,每一个事件,都是有可能从自己到 window ,有可能要执行多个同类型事件

· 那么这个执行的顺序就有一些说法了

目标

· 你是点击在哪个元素身上了,那么这个事件的 目标 就是什么

冒泡

· 就是从事件 目标 的事件处理函数开始,依次向外,直到 window 的事件处理函数触发

· 也就是从下向上的执行事件处理函数

捕获

· 就是从 window 的事件处理函数开始,依次向内,只要事件 目标 的事件处理函数执行

· 也就是从上向下的执行事件处理函数

冒泡和捕获的区别

· 就是在事件的传播中,多个同类型事件处理函数的执行顺序不同

事件委托

· 就是把我要做的事情委托给别人来做

· 因为我们的冒泡机制,点击子元素的时候,也会同步触发父元素的相同事件

· 所以我们就可以把子元素的事件委托给父元素来做

事件触发

· 点击子元素的时候,不管子元素有没有点击事件,只要父元素有点击事件,那么就可以触发父元素的点击事件

<body>

<ul>

<li>1</li>

<li>2</li>

<li>3</li>

</ul>

<script>

var oUl = docuemnt.querySelector('ul')

oUl.addEventListener('click', function (e) {

console.log('我是 ul 的点击事件,我被触发了')

})

</script></body>

· 像上面一段代码,当你点击 ul 的时候肯定会触发

· 但是当你点击 li 的时候,其实也会触发

target

· target 这个属性是事件对象里面的属性,表示你点击的目标

· 当你触发点击事件的时候,你点击在哪个元素上,target 就是哪个元素

· 这个 target 也不兼容,在 IE 下要使用 srcElement

<body>

<ul>

<li>1</li>

<li>2</li>

<li>3</li>

</ul>

<script>

var oUl = docuemnt.querySelector('ul')

oUl.addEventListener('click', function (e) {

e = e || window.event

var target = e.target || e.srcElement

console.log(target)

})

</script></body>

· 上面的代码,当你点击 ul 的时候,target 就是 ul

· 当你点击在 li 上面的时候,target 就是 li

委托

· 这个时候,当我们点击 li 的时候,也可以触发 ul 的点事件

· 并且在事件内不,我们也可以拿到你点击的到底是 ul 还是 li

· 这个时候,我们就可以把 li 的事件委托给 ul 来做

<body>

<ul>

<li>1</li>

<li>2</li>

<li>3</li>

</ul>

<script>

var oUl = docuemnt.querySelector('ul')

oUl.addEventListener('click', function (e) {

e = e || window.event

var target = e.target || e.srcElement

// 判断你点击的是 li if (target.nodeName.toUpperCase === 'LI') {

// 确定点击的是 li // 因为当你点击在 ul 上面的时候,nodeName 应该是 'UL' // 去做点击 li 的时候该做的事情了 console.log('我是 li,我被点击了')

}

})

</script></body>

· 上面的代码,我们就可以把 li 要做的事情委托给 ul 来做

总结

· 为什么要用事件委托

· 我页面上本身没有 li

· 我通过代码添加了一些 li

· 添加进来的 li 是没有点击事件的

· 我每次动态的操作完 li 以后都要从新给 li 绑定一次点击事件

· 比较麻烦

· 这个时候只要委托给 ul 就可以了

· 因为新加进来的 li 也是 ul 的子元素,点击的时候也可以触发 ul 的点击事件

· 事件委托的书写

· 元素的事件只能委托给结构父级或者再结构父级的同样的事件上

· li 的点击事件,就不能委托给 ul 的鼠标移入事件

· li 的点击事件,只能委托给 ul 或者在高父级的点击事件上

默认行为

· 默认行为,就是不用我们注册,它自己就存在的事情

· 比如我们点击鼠标右键的时候,会自动弹出一个菜单

· 比如我们点击 a 标签的时候,我们不需要注册点击事件,他自己就会跳转页面

· ...

· 这些不需要我们注册就能实现的事情,我们叫做 默认事件

阻止默认行为

· 有的时候,我们不希望浏览器执行默认事件

· 比如我给 a 标签绑定了一个点击事件,我点击你的时候希望你能告诉我你的地址是什么

· 而不是直接跳转链接

· 那么我们就要把 a 标签原先的默认事件阻止,不让他执行默认事件

· 我们有两个方法来阻止默认事件

· e.preventDefault() : 非 IE 使用

· e.returnValue = false :IE 使用

· 我们阻止默认事件的时候也要写一个兼容的写法

<a href="https://www.baidu.com">点击我试试</a><script>

var oA = document.querySelector('a')

a.addEventListener('click', function (e) {

e = e || window.event

console.log(this.href)

e.preventDefault ? e.preventDefault() : e.returnValue = false

})</script>

· 这样写完以后,你点击 a 标签的时候,就不会跳转链接了

· 而是会在控制台打印出 a 标签的 href 属性的值


相关推荐

程序员:JDK的安装与配置(完整版)_jdk的安装方法

对于Java程序员来说,jdk是必不陌生的一个词。但怎么安装配置jdk,对新手来说确实头疼的一件事情。我这里以jdk10为例,详细的说明讲解了jdk的安装和配置,如果有不明白的小伙伴可以评论区留言哦下...

Linux中安装jdk并配置环境变量_linux jdk安装教程及环境变量配置

一、通过连接工具登录到Linux(我这里使用的Centos7.6版本)服务器连接工具有很多我就不一一介绍了今天使用比较常用的XShell工具登录成功如下:二、上传jdk安装包到Linux服务器jdk...

麒麟系统安装JAVA JDK教程_麒麟系统配置jdk

检查检查系统是否自带java在麒麟系统桌面空白处,右键“在终端打开”,打开shell对话框输入:java–version查看是否自带java及版本如图所示,系统自带OpenJDK,要先卸载自带JDK...

学习笔记-Linux JDK - 安装&amp;配置

前提条件#检查是否存在JDKrpm-qa|grepjava#删除现存JDKyum-yremovejava*安装OracleJDK不分系统#进入安装文件目...

Linux新手入门系列:Linux下jdk安装配置

本系列文章是把作者刚接触和学习Linux时候的实操记录分享出来,内容主要包括Linux入门的一些理论概念知识、Web程序、mysql数据库的简单安装部署,希望能够帮到一些初学者,少走一些弯路。注意:L...

测试员必备:Linux下安装JDK 1.8你必须知道的那些事

1.简介在Oracle收购Sun后,Java的一系列产品就被整合到Oracle官网中,打开官网乍眼一看也不知道去哪里下载,还得一个一个的摸索尝试,而且网上大多数都是一些Oracle收购Sun前,或者就...

Linux 下安装JDK17_linux 安装jdk1.8 yum

一、安装环境操作系统:JDK版本:17二、安装步骤第一步:下载安装包下载Linux环境下的jdk1.8,请去官网(https://www.oracle.com/java/technologies/do...

在Ubuntu系统中安装JDK 17并配置环境变量教程

在Ubuntu系统上安装JDK17并配置环境变量是Java开发环境搭建的重要步骤。JDK17是Oracle提供的长期支持版本,广泛用于开发Java应用程序。以下是详细的步骤,帮助你在Ubuntu系...

如何在 Linux 上安装 Java_linux安装java的步骤

在桌面上拥抱Java应用程序,然后在所有桌面上运行它们。--SethKenlon(作者)无论你运行的是哪种操作系统,通常都有几种安装应用程序的方法。有时你可能会在应用程序商店中找到一个应用程序...

Windows和Linux环境下的JDK安装教程

JavaDevelopmentKit(简称JDK),是Java开发的核心工具包,提供了Java应用程序的编译、运行和开发所需的各类工具和类库。它包括了JRE(JavaRuntimeEnviro...

linux安装jdk_linux安装jdk软连接

JDK是啥就不用多介绍了哈,外行的人也不会进来看我的博文。依然记得读大学那会,第一次实验课就是在机房安装jdk,编写HelloWorld程序。时光飞逝啊,一下过了十多年了,挣了不少钱,买了跑车,娶了富...

linux安装jdk,全局配置,不同用户不同jdk

jdk1.8安装包链接:https://pan.baidu.com/s/14qBrh6ZpLK04QS8ogCepwg提取码:09zs上传文件解压tar-zxvfjdk-8u152-linux-...

运维大神教你在linux下安装jdk8_linux安装jdk1.7

1.到官网下载适合自己机器的版本。楼主下载的是jdk-8u66-linux-i586.tar.gzhttp://www.oracle.com/technetwork/java/javase/downl...

window和linux安装JDK1.8_linux 安装jdk1.8.tar

Windows安装JDK1.8的步骤:步骤1:下载JDK打开浏览器,找到JDK下载页面https://d.injdk.cn/download/oraclejdk/8在页面中找到并点击“下载...

最全的linux下安装JavaJDK的教程(图文详解)不会安装你来打我?

默认已经有了linux服务器,且有root账号首先检查一下是否已经安装过java的jdk任意位置输入命令:whichjava像我这个已经安装过了,就会提示在哪个位置,你的肯定是找不到。一般我们在...

取消回复欢迎 发表评论: