事件高级部分

news2024/11/15 1:35:22

一,注册事件

即给元素添加事件

1.传统注册方式

2.方法监听注册方式

事件类型:字符串形式,不用带on

可以给一个元素添加多个程序

二.删除事件

1.方式

参数见上文

三.DOM事件流

事件的传播过程叫做事件流

js代码只能获取一个阶段:捕获或冒泡

 onclick或attachEvent只能得到冒泡阶段

捕获阶段:先从父级到子级,监听注册:第三个参数为true。会先弹出父级在弹出子级

冒泡阶段:监听注册:第三个参数为false或省略,从子级到父级,会先弹出子级的再弹出父级的

比起捕获我们更关心冒泡

四,事件对象

event就是事件,写在侦听事件的小括号里面

div.οnclick=function(event){}

常见的属性和方法

2,阻止默认行为

让链接不跳转,或按提交按钮不提交

除了上图的那一个,用return false也可以,缺点是:return后面的代码就不执行了

五,阻止冒泡

1,阻止冒泡的两种方式

兼容性的解决方案:
 

六,事件委托

1,原理

不是每个子节点单独设置事件监听器,而是监听器设置在其父节点上,然后利用冒泡原理影响设置每个子节点。

好处:只用操作一次DOM,提高了性能

七,常见的鼠标事件

1.禁止鼠标右键菜单

2.禁止鼠标选中

3.鼠标事件对象

可视页面:就可看见的那一部分,控制面板上面

文档页面:是整体的部分,是有滚动条的

八,常见的键盘事件

同时写先执行down-press-up

1.键盘事件对象

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Istio 使用 Apache SkyWalking 进行服务链路追踪、链路监控告警

一、Istio 使用 Apache SkyWalking 链路追踪和告警 SkyWalking是一个开源的观测平台,用于从服务和云原生等基础设施中收集、分析、聚合以及可视化数据,SkyWalking 提供了一种简便的方式来清晰地观测分布式系统,甚至可以观测横跨不同云的系统…

Linux修炼之路之基础指令(2)+shell命令及运行原理

目录 一:基础指令 7.rm指令 和 rmdir指令 8.*通配符 9.man指令 10.echo指令 11.cat 指令 12.cp 指令 13.mv指令 14.alias 指令 15.less more head tail wc-l 指令 16.date 时间相关的指令 17.cal指令 18. find which whereis 三个查找文件指令…

Android内核之解决报错:error: ISO C90 forbids mixing declarations and code(七十四)

简介: CSDN博客专家,专注Android/Linux系统,分享多mic语音方案、音视频、编解码等技术,与大家一起成长! 优质专栏:Audio工程师进阶系列【原创干货持续更新中……】🚀 优质专栏:多媒…

两个手机在一起ip地址一样吗?两个手机是不是两个ip地址

在数字时代的浩瀚海洋中,手机已经成为我们生活中不可或缺的一部分。随着移动互联网的飞速发展,IP地址成为了连接手机与互联网的桥梁。那么,两个手机在一起IP地址一样吗?两个手机是不是两个IP地址?本文将带您一探究竟&a…

Python实战开发及案例分析(18)—— 逻辑回归

逻辑回归是一种广泛用于分类任务的统计模型,尤其是用于二分类问题。在逻辑回归中,我们预测的是观测值属于某个类别的概率,这通过逻辑函数(或称sigmoid函数)来实现,该函数能将任意值压缩到0和1之间。 逻辑回…

docker安装向量数据库milvus

Miluvs Milvus 向量数据库能够帮助用户轻松应对海量非结构化数据(图片 / 视频 / 语音 / 文本)检索。 单节点 Milvus 可以在秒内完成十亿级的向量搜索,分布式架构亦能满足用户的水平扩展需求。 Milvus 向量数据库的应用场景包括:互联网娱乐(图片搜索 / 视频搜索)、新零售…

数据结构与算法===贪心算法

文章目录 定义适用场景柠檬水找零3.代码 小结 定义 还是先看下定义吧,如下: 贪心算法是一种在每一步选择中都采取在当前状态下最好或最优(即最有利)的选择,从而希望导致结果是全局最好或最优的算法。 适用场景 由于…

基于gin框架的文件上传(逐行解析)

基于gin框架的文件上传(逐行解析)记录一下使用gin框架完成一个文件上传的功能,一下是实现该功能的代码,适合小白,代码都有逐行解释! app.go: package routerimport ("chat/service""github.com/gin-gonic/gin&qu…

【matlab】matlab实现倒谱法基音频率检测和共振峰检测(源码+音频文件)【独一无二】

👉博__主👈:米码收割机 👉技__能👈:C/Python语言 👉公众号👈:测试开发自动化【获取源码商业合作】 👉荣__誉👈:阿里云博客专家博主、5…

校园卡没到期可以换套餐吗

校园卡没到期可以换套餐吗 校园卡是可以更换套餐的,但具体问题还是要具体分析,根据实际情况来进行选择。 校园卡改套餐分为两种情况,一种是没有签订任何协议的校园卡套餐,这种情况用户是可以随时更换通信资费套餐的;另…

【PHP【实战版】系统性学习】——登录注册页面的教程,让编写PHP注册变成一个简单的事情

👨‍💻个人主页:开发者-曼亿点 👨‍💻 hallo 欢迎 点赞👍 收藏⭐ 留言📝 加关注✅! 👨‍💻 本文由 曼亿点 原创 👨‍💻 收录于专栏&#xff1a…

Oracle SQL优化案例-查询Null值走索引

网友发来一个SQL&#xff0c;说他们公司的一个SQL要优化帮忙看一下&#xff0c;执行计划如下&#xff1a; -------------------------------------SELECT * FROM (SELECT * FROM TXS C WHERE C.A ISNULL OR C.A ORDER BY ID_TXS DESC) WHERE ROWNUM<100​---------------…

集成平台建设方案(大数据中台技术方案)—Word原件

基础支撑平台主要承担系统总体架构与各个应用子系统的交互&#xff0c;第三方系统与总体架构的交互。需要满足内部业务在该平台的基础上&#xff0c;实现平台对于子系统的可扩展性。基于以上分析对基础支撑平台&#xff0c;提出了以下要求&#xff1a; 基于平台的基础架构&…

arm架构下安装conda

一、参考文章&#xff1a;感谢这位网友的分享&#xff0c;搬过来以备过几天使用&#xff0c;这种小众系统真的有些麻烦解决方案&#xff1a;ARM架构下安装Miniconda 离线配置Conda环境的全流程及踩坑避坑指南 - 技术栈 二、步骤 2.1 确认系统架构 uname -m 2.2 根据架构下载…

云贝教育 |【直播课】5月19日Oracle 19c OCM认证大师课 即将上课了!(附课件预览)

贝教育独家认证课OCM全网价格最低&#xff0c;性价比最高&#xff01;&#xff01;&#xff01; Oracle 19c OCM认证大师培训 - 课程体系 - 云贝教育 (yunbee.net) OCM部分课件预览 Oracle Database 19c Certified Master Exam (OCM) 认证大师 25 天 / 150课时 什么是Oracle 1…

浅析vue3自定义指令

vue3中可以像下面这样使用自定义指令。 这里我们只是定义了一个vFoucs变量&#xff0c;vue怎么知道这是一个指令呢&#xff1f; 这是因为约定大于配置&#xff0c;vue3中有这样一个约定&#xff08;截图来自官方文档&#xff09;&#xff1a; 注意这里说的是驼峰命令&#x…

插入法(直接/二分/希尔)

//稳定耗时&#xff1a; 双向冒泡&#xff0c;可指定最大最小值个数MaxMinNum<nsizeof(Arr)/sizeof(Arr[0]), void BiBubbleSort(int Arr[],int n&#xff0c;int MaxMinNum){int left0,rightn-1;int i;bool notDone true;int temp;int minPos;while(left<right&&am…

《Linux运维总结:ARM64架构CPU基于docker-compose一离线部署rabbitmq 3.10.25容器版镜像模式集群》

总结&#xff1a;整理不易&#xff0c;如果对你有帮助&#xff0c;可否点赞关注一下&#xff1f; 更多详细内容请参考&#xff1a;《Linux运维篇&#xff1a;Linux系统运维指南》 一、部署背景 由于业务系统的特殊性&#xff0c;我们需要面向不通的客户安装我们的业务系统&…

情感感知OCR:整合深度学习技术提升文字识别系统的情感理解能力

摘要&#xff1a;随着深度学习技术的发展&#xff0c;文字识别&#xff08;OCR&#xff09;系统在识别准确率和速度上取得了长足的进步。然而&#xff0c;在处理文本时&#xff0c;仅仅依靠字符和词语的识别并不足以满足用户对信息的全面理解需求。本文提出了一种新颖的方法&am…

Navicat 17:先睹为快

官方声明&#xff1a;Navicat 17&#xff08;英文版&#xff09;目前处于测试阶段中&#xff0c;并计划 5 月 13 日发布&#xff01; 如果你觉得 Navicat 16 已经推出很多令人兴奋的新功能&#xff0c;那么这次你可能要好好看看 Navicat 17&#xff0c;本次升级涵盖了更多的内容…