事件和事件源

 事件监听

在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.mfbz.cn/a/264412.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

操作系统——进程管理算法和例题

1、概述 1.1 进程调度 当进程的数量往往多于处理机的个数,出现进程争用处理机的现象,处理机调度是对处理机进行分配,就是从就绪队列中,按照一定的算法(公平、髙效)选择一个进程并将处理机分配给它运行&am…

Python---搭建Python自带静态Web服务器

1. 静态Web服务器是什么? 可以为发出请求的浏览器提供静态文档的程序。 平时我们浏览百度新闻数据的时候,每天的新闻数据都会发生变化,那访问的这个页面就是动态的,而我们开发的是静态的,页面的数据不会发生变化。 …

帆软报表 - 数据显示为列表,但是数据仍全部显示在同一行上?

文章目录 1 问题截图2 解决办法3 原因分析3.1 数据设置:全是列表 1 问题截图 想要的效果:每行显示一组数据得到的效果:数据全部显示在一行,以逗号隔开 2 解决办法 修改扩展方向。将 “不扩展” 修改为 “纵向” 3 原因分析 3.1…

消除蛋蛋派

欢迎来到程序小院 消除蛋蛋派 玩法:消除游戏,三个相同形状的蛋蛋连成一条直线即可消除,点击鼠标左键移动球球进行消除, 可以使用道具,共有50关卡,快去闯关吧^^。开始游戏https://www.ormcc.com/play/gameS…

3. BlazorSignalRApp 结合使用 ASP.NET Core SignalR 和 Blazor

参考:https://learn.microsoft.com/zh-cn/aspnet/core/blazor/tutorials/signalr-blazor?viewaspnetcore-8.0&tabsvisual-studio 1.创建新项目 BlazorSignalRApp 2.添加项目依赖项 依赖项:Microsoft.AspNetCore.SignalR.Client 方式1 管理解决方案…

c语言:文件操作(2),认识各种文件操作函数

fgets 作用 fgets是C语言标准库中用于从文件中读取字符串的函数。 fgets函数从指定的文件流stream中读取最多n-1个字符,或者直到遇到换行符(包括换行符在内),并将其存储到以str指向的字符数组中。读取的字符串会以null字符\0结…

模拟电路基础知识经典 200问,收藏这些就够了!

大家总说模电知识总是学不会,IC修真院为大家整理了模电经典200问,看看你掌握了多少,文末可以获取全部哦。 文末可领全部文档 1、半导体材料制作电子器件与传统的真空电子器件相比有什么特点? 答:频率特性好、体积小、功耗小&…

信息收集 - 谷歌hack

搜索引擎 FOFA网络空间测绘:https://fofa.info/ FOFA(FOcus on Assets)是一个网络空间搜索引擎,可以帮助用户快速定位和收集特定目标的信息。 ZoomEye:https://www.zoomeye.org ZoomEye 是一个网络空间搜索引擎,可以用于发现和收集特定目标的网络设备、Web应用程序、开放…

OpenCV-Python(18):图像梯度

目录 背景介绍及应用 学习目标 原理 Sobel算子和Scharr算子 Laplacian 算子 代码示例 重要提醒 背景介绍及应用 图像的梯度是指图像中每个像素点的强度变化情况。计算图像的梯度可以帮助我们了解图像中物体的边界和纹理等信息。梯度在计算机视觉和图像处理领域有着广泛…

【Amazon 实验③】Amazon WAF功能增强之追踪 Amazon WAF RequestID,排查误杀原因

文章目录 1. 方案介绍2. 架构图3. 操作演示 本实验将介绍如何利用 Amazon LambdaEdge,在 Amazon CloudFront 自定义错误页面 上展示每个由 Amazon WAF 返回的“403 Forbidden”错误的 Request ID。通过这个唯一的 WAF Request ID,网站运维工程师能够快速…

Swift 周报 第四十一期

文章目录 前言新闻和社区2024 年 Swift Student Challenge 公布现推出超过 30 个新的开发者活动 提案正在审查的提案 Swift论坛话题讨论推荐博文关于我们 前言 本期是 Swift 编辑组整理周报的第四十一期,每个模块已初步成型。各位读者如果有好的提议,欢…

不受父容器大小约束的TextView

序言 为了实现以下效果,特意开发了一个自定义控件。主要是红色的点赞数和评论数。 问题分析 自定义控件 该控件主要是在于忽略的父容器的大小限制,这样可以展示出全部内容。注意父容器的属性中需要下列配置。 package com.trs.myrb.view.count;impor…

[JS设计模式]Flyweight Pattern

Flyweight pattern 享元模式是一种结构化的设计模式,主要用于产生大量类似对象而内存又有限的场景。享元模式能节省内存。 假设一个国际化特大城市SZ;它有5个区,分别为nanshan、futian、luohu、baoan、longgang;每个区都有多个图…

Java 基础学习(十三)集合框架、List集合

1 集合框架 1.1 Collection 1.1.1 集合框架概述 Java 集合框架是一组实现了常见数据结构(如列表、树集和哈希表等)的类和接口,用于存储一组数据。 开发者在使用Java的集合类时,不必考虑数据结构和算法的具体实现细节&#xff…

使用selenium webdriver和mitmproxy代理模拟用户点击抓包(抓华为应用商城app数据)

文章目录 安装PythonMacWindows 安装程序需要的依赖安装chorm驱动编写代码自动化程序开始抓包 问题处理 本文简单记录一下使用selenium webdriver和mitmproxy代理模拟用户点击抓包的过程。 用于模拟真实的用户访问网站,达到抓包的目的。 作者水平有限,可…

深度解析自动化测试流程(纯干货)

今天就通过这篇文章给大家深度解析一下自动化测试的流程。 自动化测试的流程和功能测试其实挺相似的,整个流程也是按照需求分析及测试计划阶段、测试设计阶段、测试执行和测试总结阶段,总结下来就是下面一张图,ppt中纯手绘,效果不…

天猫数据分析(软件工具)-2023年11月天猫保健品行业分析报告:市场需求扩容,年轻人是主流群体

近年来,随着健康经济、颜值经济的兴起,越来越多的年轻人加入养生大军,成为保健食品市场上的一股新力量,带动市场扩容。根据鲸参谋电商数据分析平台的相关数据显示,今年11月份,天猫平台上保健食品的销量为24…

怎么提取视频中的背景音乐?

当我们在刷视频的时候,有时候听到一个背景音乐很好听,但是又不知道歌名,比如英语歌,这个时候我们很难找到这首歌,相信有很多朋友会遇到这样的问题,不知道怎么弄,下面小编给大家推荐一些方法帮助…

主流数据库体系结构

MySQL 我们通常所说的 MySQL 数据库服务器由一个实例(instance)以及一个数据库(database)组成。实例包括一组后台进程/线程和许多内存结构,用于管理数据库;数据库由一组磁盘文件组成,用于存储数…

【数论】欧拉函数

前置知识&#xff1a;分解质因数 一个数可以被分解为质因数乘积 n &#xff0c;其中的pi都是质因数 欧拉函数介绍 朴素法求欧拉函数 思路&#xff1a;边分解质因数边算欧拉函数 void get_primes() {int n; cin >> n;int ans 0;int res n;for (int i 2; i < n /…
最新文章