事件和事件源

 事件监听

在JS当中写事件监听是这个函数,写了这个函数,前面是DOM对象,当由DOM树和CSSOM树形成的渲染树也有这个监听,这个函数可以添加到DOM树,最后渲染树也有。渲染树会渲染标签当标签发生该事件就会执行这个函数。这个给DOM树和渲染树最后的结果是渲染页面使得页面标签只要一旦发生这个事件就会执行这个函数,在JS上。且事件渲染的时候可以让它触发,还有函数也可也触发它。Vue当中的事件绑定是直接写在标签上(DOM对象.οnclick=fucntion(){}一样)这种和用JS也是一样,最后都是到DOM树上。第二个参数一定是参数这个,但是Vue上可以写其他的。这个函数的作用会让渲染树渲染的标签只要点击就会调用这个函数,且传参的第一个参数是触发这个事件将触发这个事件香菇按的作为属性的对象。onclick可以写οnclick=i++会执行后面的,赋值,i++/++i是不是赋值运算符,其他看先放值还是先计算。赋值不是函数不会赋值到onclick变量上。

回调函数

一个参数作为调用另一个参数时的实参。这个函数就被称为回调函数。

JS事件监听有两种

第一种LO是在JS上写on事件,直接写到事件这个变量上。但是变量如果写两个LO第二个的数代替第一个。如变量num=1 num=2.

第二种调用函数,函数会写到DOM对象上。写到On事件这个变量上,这个变量会被渲染树渲染到标签上。有触发就会调用的效果,但是这个函数调用两次,同一个DOM不会覆盖,这个函数调用把这个事件添加到变量上去。且会把这个函数合并到一起,把内部。调用会一起执行。

事件类型

获得焦点是鼠标的|停在元素内,失去相反,鼠标经过和离开就是鼠标形状的小手或者其他形状经过元素盒子。keydown/keyup是在盒子内,将鼠标|放在元素内,且按下。input在文本输入改变value或者文本删除改变value的值的过程都会触发。事件的触发都是对于整个盒子。

display:none。有DOM对象和渲染树,但是DOM对象写了这个就不会再渲染。

事件对象

事件对象的创建,一旦创建事件对象,这个事件对象内将含有触发这个事件的信息。这个对象在会自动调用函数传参第一个参数是这个对象。自己调用,在页面上触发第一个参数是这个对象。调用。一旦点击调用这个函数。调用的时候第一个参数是事件对象,但是自己调用就不会有。

如果事件是键盘事件,键盘事件的触发调用这个函数,则对象内有键值,属性名为key,也有keycode但是不用了。key是我们按下的键的英文,在key上存储和键盘上一样,区分大小写。如果我们要对象.key==='Enter'要规范大小写。

疑问:为什么value可以.length?

不是只有对象才可以,对象也是那一类的值,1,字符串是Number和String类的值,只不过一个直接写在内存中,一个存在对象上,但是即使是写在内存里的值,也可也和其他值一样写.,也是可以的。new Number类最后得到的还是参数这个数字。New String也是一样。整体被赋了这样一个值。能创建对象的类,和我们普通的数据类型一样,只不过变量内存储的不一样。但是字面值都可以去调用类的属性。对象可以调用任何属性和方法。字符串当然可以length,对象可以,字符串也可也。字符串的length是字符的数量。

环境对象this

我们在script上写普通的函数,或者匿名函数,立即执行函数的函数都是内存最后存到window上。即使你写在script内,都是存到window对象上,这些函数都是实例函数都是,在script上也是相当于某一个方法内执行。但是window可以省略,全局对象,这个可以直接访问。在作用域上。它可以省略window,找是哪一个方法。但是里面调用时的this,还是原本外界如果调用时的对象。window。立即执行函数也是写在window上。this是代表调用者这个对象。事件执行函数时,那个函数调用是在script上执行。因此对于全局对象可以用内部。this也可也用。

事件流

捕获阶段是从父盒子到子盒子,冒泡阶段是从子盒子到父盒子,如果同时发生在父子盒子上,执行过程有这捕获冒泡两种。事件的执行只要在盒子区域就行,不管这个区域的上是否有子盒子。不管是放到子盒子上还是如何。即使父盒子被覆盖的地方只要是父盒子的范围内都会算作事件的触发。同一块地方同时触发多个,是根据这个事件流来执行。默认情况下是冒泡阶段。如果要改,是在addEventListener的第三个参数是可以改变触发时的顺序,如果同时触发。只页面。onclick这种不行,默认时冒泡。

第三个数可以写任意类型,但是最后都会转成布尔类型,true使用捕获。

事件冒泡

        一个元素被触发,所以祖先元素依次被触发。

疑问:如果定位到某个元素上,是否有执行先后?

事件流只存在于祖先,只是不存在于兄弟。定位到元素上,不会触发其他元素的事件,只看没被覆盖的是哪一个元素。

阻止冒泡

一个元素首先触发的一定是最上面的,也就是子元素,但是需要看子元素的是什么机制,如果是冒泡是执行自己,另一个执行去看父盒子有没有对应的事件,有就触发,看它的事件流。不是冒泡需要函数内的需要事件对象的这个函数执行才能够阻止事件冒泡,但是只能是这个事件要冒泡出去,如果是捕获也能阻止,阻止这个事件流动传播。这个函数体内能阻止事件的传播。

有关多个父子元素执行顺序的研究

子元素所在元素开始,无论冒泡/捕获,把棒子给比她大/小一级的执行,如果小/大一级的把棒子给你,你就给比你大/小两级的去执行。如果一直都没人要,最小的捕获,让父盒子先执行。父亲是从小到大,冒泡,给回儿子,给爷爷,看是不是捕获。不给回,就能给。当最后一直给不了就执行棒子所在的。有函数执行,其他捕获/冒泡就不看了,没阻拦。但是按顺序给。执行的当最大/最小

事件解绑

onclick也是一个变量,这个onclick是把事件放到这,add...这个是底层实现。onclick和add如果都绑定click,都会执行。我们onclick()调用/页面点击。add页面点击/click()这个方法可以底层实现调用。解绑onclick只要不是函数调用就调用不了。但是add...是底层,需要对象绑定事件,对象另一个函数底层会实现解绑。函数解绑的时候需要找到这个函数内存,写一样的函数没用。因此,需要能拿到这个函数的名字,函数有内存,有变量名。onclick不是函数就不能调用。

mouseout  mouseleave

不是鼠标移动事件而言,在子元素上触发事件。不算做父元素的触发。但是子元素上发生事件一定是会触发父元素的相同事件。触发祖先元素有的,即使隔辈,即使子元素定位到不在一个内容区域上。对于事件而言都是会有事件源。一开始都会看事件源来。即使不是冒泡,是捕获。触发子元素,一定会使得所有的父元素被触发。但是执行哪一个看捕获还是冒泡。不是子元素一定冒泡到父盒子。移动事件mouseout是离开不是盒子显示在页面的就是。即使是父元素到子元素上。子元素即使没这个事件,也会触发所有祖先元素有这个的函数。

移动事件这个,到子盒子上对于父盒子而言是离开对于什么都没啥,只是对于事件而言。子元素在父元素内容区域。但是移动到父盒子而言对于mouseleave事件也算作离开。

这两个函数只要在盒子区域就算。

事件委托

我们如果要给所有的子元素都绑定一样事件的类似(可以事件对象的属性,你写别的i这种绑定了,也是差不多,i=多少,但是触发没顺序,输出的变量也是不会跟着这个触发对象。但是事件对象的参数可以的。)函数。可以用事件委托。事件委托不是新技术,而是一种思想。对于所有子元素你是一样的事件下触发一样的函数。需要绑定多次。即使for 也是相对麻烦。但是可以直接写在父代元素上,该事件,该函数。事件可以传给父类,即使没有,没有也会触发。子类有也会触发。当所有的都触发就看事件源。

但是事件委托绑定父类,可以写事件对象形参。一定传的是事件对象,事件对象是触发这个事件的相关信息,如果给ul绑定点击事件,点击某一个内的li盒子导致的,父类盒子的触发事件对象都是子类触发的相关信息。我们可以用第一个参数写。ul内些函数可以写形参。函数内可以写任何的,只是其他不会根据那个触发的输出其他语句有相应变化。事件对象的属性名是target内存了触发这个事件所在那个盒子(即使没写这个事件)的DOM地址。DOM树也是地址内存。最后就是看DOM树内存上的DOM对象内存上的各个变量值。DOM对象上有tagName是该对象原本标签名(全部单词大写)

默认行为

一些元素在某些事件绑定函数被触发时也会有默认行为的发生。底层控制执行。发生点击事件,只会触发这个我们绑定的函数。但是底层还写了,点击事件,会跳转,比如a事件,但是默认这种事件在我们函数执行后执行。阻止这种行为,事件对象的prevent Default函数会阻止默认行为的触发。即使不写绑定事件。事件对象是那一个元素触发来的。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/222524.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

conda环境下执行conda命令提示无法识别解决方案

1 问题描述 win10环境命令行执行conda命令,报命令无法识别,错误信息如下: PS D:\code\cv> conda activate pt conda : 无法将“conda”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。请检查名称的拼写,如果包括路径&a…

Transformer引领AI领域:从模型到平台,全方位探索与实践

编辑推荐 在不到4 年的时间里,Transformer 模型以其强大的性能和创新的思想,迅速在NLP 社区崭露头角,打破了过去30 年的记录。BERT、T5 和GPT 等模型现在已成为计算机视觉、语音识别、翻译、蛋白质测序、编码等各个领域中新应用的基础构件。…

pnpm :无法加载文件 D:\nodejs\node_global\pnpm.ps1,因为在此系统上禁止运行脚本

目录 一、问题描述 二、原因分析 三、解决问题 一、问题描述 pnpm : 无法加载文件 D:\learningsoftware\nodejs\node_global\pnpm.ps1,因为在此系统上禁止运行脚本。有关详细信息,请参阅 https:/go.microsoft.com/fwlink/?LinkID1351 70 中的 a…

5G+云渲染技术:将如何快速推进XR和元宇宙?

XR(扩展现实)领域正在以惊人的速度增长。目前,到 2024 年,一些专家表示这个行业的价值将达到 3000 亿美元。 这个行业发展如此迅速的部分原因是 XR 将在商业环境中的带来巨大利益。近年来,很多企业遇到了将增强现实和…

spring MVC概述和土门案例(无配置文件开发)

SpringMVC 1,SpringMVC概述2,SpringMVC入门案例2.1 需求分析2.2 案例制作步骤1:创建Maven项目步骤2:补全目录结构步骤3:导入jar包步骤4:创建配置类步骤5:创建Controller类步骤6:使用配置类替换web.xml步骤7:配置Tomcat环境步骤8:启动运行项目步骤9:浏览器…

vue 简单实现购物车:商品基础信息最终的 html 文件 + 商品计数器的组件处理,实现了购物车;

购物车实现过程: Ⅰ、商品购物车作业需求:1、商品购物车页面示例:2、具体需求: Ⅱ、html 文件的构建:商品购物车.html Ⅲ、组件文件的构建:商品购物车1.js Ⅳ、小结: Ⅰ、商品购物车作业需求&am…

【HarmonyOS开发】ArkTs关系型和非关系型数据库的存储封装

前面使用了首选项的存储方式,因此将其他的两种存储方式(键值型数据库和关系型数据库)也学习一下,简单记录一下,并进行封装,方便后续使用。 1、效果预览 2、使用条件 2.1 键值型数据库 键值型数据库实现数据…

Modbus-TCP数据帧

Modbus-TCP基于4种报文类型 MODBUS 请求是客户机在网络上发送用来启动事务处理的报文MODBUS 指示是服务端接收的请求报文MODBUS 响应是服务器发送的响应信息MODBUS 证实是在客户端接收的响应信息 Modbus-TCP报文: 报文头MBAP MBAP为报文头,长度为7字节&#xff0c…

CentOS操作学习(二)

上一篇学习了CentOS的常用指令CentOS指令学习-CSDN博客 现在我们接着学习 一、Vi编辑器 这是CentOS中自带的编辑器 三种模式 进入编辑模式后 i:在光标所在字符前开始插入a:在光标所在字符串后开始插入o:在光标所在行的下面另起一新行插入…

【排序算法】C语言实现选择排序与冒泡排序

文章目录 🚀前言🚀冒泡排序✈️冒泡排序的逻辑✈️冒泡排序coding 🚀选择排序✈️选择排序的逻辑✈️选择排序coding 🚀前言 这里是阿辉算法与数据结构专栏的第一篇文章,咱们就从排序算法开始讲起,排序算法…

freeswitch on debian docker

概述 freeswitch是一款简单好用的VOIP开源软交换平台。 因为centos系统期限的原因,尝试在debian的docker上使用fs。 环境 docker engine:Version 24.0.6 debian docker:bullseye 11.8 freeswitch:v1.10.7 Debian准备 目前…

C语言之初识C语言

文章目录 前言一、什么是C语言二、第一个C语言程序三、数据类型四、变量,常量1、变量1.1 变量的命名1.2 变量的分类1.3 变量的使用1.4 变量的作用域和生命周期2、变量 五、字符串1. 概念2. 求解字符串的长度【strlen】3. 转义字符【含笔试题】 六、注释七、选择语句…

Docker 文件和卷 权限拒绝

一 创作背景 再复制Docker影像文件或访问Docker容器内已安装卷上的文件时我们常常会遇到:“权限被拒绝”的错误,在此,您将了解到为什么会出现“权限被拒绝”的错误以及如何解决这个问题。 二 目的 在深入探讨 Docker 容器中的 Permission De…

互操作性(Interoperability)如何影响着机器学习的发展?

互操作性(Interoperability),也称为互用性,即两个系统之间有效沟通的能力,是机器学习未来发展中的关键因素。对于银行业、医疗和其他生活服务行业,我们期望那些用于信息交换的平台可以在我们需要时无缝沟通…

springboot+vue前后端分离的社区养老服务管理管理系统(有文档)

springbootvue前后端分离的社区养老服务管理管理系统。系统功能齐全,配置完成可运行,有文档,演示视频,配置说明,数据库文件,虚拟产品下单不退不换! 技术:springbootmybatisplusmysql…

STM32的以太网外设+PHY(LAN8720)使用详解(6):以太网数据接收及发送

0 工具准备 1.野火 stm32f407霸天虎开发板 2.LAN8720数据手册 3.STM32F4xx中文参考手册1 以太网数据接收及发送 1.1 以太网数据接收(轮询) 1.1.1 检查是否接收到一帧完整报文 使用轮询的方式接收以太网数据是一种简单但是效率低下的方法,…

【Seata源码学习 】 篇二 TM与RM初始化过程

【Seata源码学习 】 篇二 TM与RM初始化过程 1.GlobalTransactionScanner 初始化 GlobalTransactionScanner 实现了InitializingBean 接口,在初始化后将执行自定义的初始化方法 io.seata.spring.annotation.GlobalTransactionScanner#afterPropertiesSet Override…

环境搭建及源码运行_java环境搭建_idea版本下载及安装

1、介绍 Idea是一款被广泛使用的Java集成开发环境,它提供了丰富的功能和工具来帮助开发人员更高效地编写和调试代码。作为一款开源软件,Idea不仅提供了基本的代码编辑、自动完成和调试功能,还支持大量的插件和扩展,可为开发人员提…

文件传输软件SecureFX mac支持多种协议

SecureFX mac是一款文件传输客户端,可在 Mac 操作系统上使用。它由 VanDyke Software 公司开发,旨在为用户提供安全、可靠、高效的文件传输服务。 SecureFX 支持多种协议,包括 SFTP、SCP、FTP、FTP over SSL/TLS 和 HTTP/S。它使用强大的加密…

Python代码示例 | 时间序列数据的组成

时间序列数据是以固定的时间间隔记录或收集的数据点序列。它是一种跟踪变量随时间演变的数据,如销售,股票价格,温度等。定期的时间间隔可以是每天,每周,每月,每季度或每年,数据通常表示为线图或…