JavaScript 事件

  本文内容学习于:后盾人 (houdunren.com)

一、事件监听绑定方式 addEventListener 操作事件


使用 addEventListener 添加事件处理程序有以下几个特点:
"transtionend /DOMContentLoaded 等事件类型只能使用 addEventListener 处理.同一事件类型设置多个事件处理程序,按设置的顺序先后执行.也可以对未来添加的元素绑定事件


参数说明:
1.参数一事件类型
2.参数二事件处理程序
3.参数三为定制的选项,可传递 object 或 boolean 类型。后面会详细介绍使用区别


二、使用 removeEventListener 删除绑定的事件处理程序

<div id="app">houdunren.com</div>

<button id="hd">删除事件</button>

<script>
const app=document.querySelector('#app’) const hd = document.querySelector('#hd') function show() {
console.log('APP我执行了')

app.addEventListener('click' show)
hd.addEventListener('click', function (() {
app.removeEventListener ('click', show)})
</script>


三、事件选项
addEventListener 的第三个参数为定制的选项,可传递 object 或 boolean 类型
下面是传递对象时的说明:


选项    可选参数    
once    true/false    只执行一次事件    
capture true/false    事件是在捕获/冒泃哪个阶段执行,true:捕获阶段 false:冒泡阶段    
passive true/false声明事件里不会调用 preventDefault)),可以减少系统默认行为的等待

如:使用 once:true 来指定事件只执行一次

<button id="app">houdunren.com</button>

<script>
const app=document.querySelector('#app’) app.addEventListener(
'click',
function () {
alert('houdunren@向军大叔')},
{ once: true }

</script>


四、冒泡捕获
1.冒泡行为:、

标签元素是嵌套的,在一个元素上触发的事件,同时也会向上执行父级元素的事件外理程序,一直到HTMI,标签元素。,大部分事件都会冒泡,但像focus事件则不会
event.target 可以在事件链中最底层的定义事件的对象 event.currentTarget== this 即当前执行事件的对象


2.阻止冒泡: event.stopPropagation()


3.事件捕获:通过设置第三个参数为 true 或{ capture:true}在捕获阶段执行事件处理程序
事件执行顺序为 捕获 >事件目标>冒泡,在向下传递到目标对象的过程即为事件捕获。事件捕获在实际使用中频率不高。

const app =document.querySelector('#app')

app.addEventListener(
'click',
(event) => {
console.log('app event')

{ capture: true }

}

4.事件代理:又叫 事件委托


借助冒泡思路,我们可以不为子元素设置事件,而将事件设置在父级。然后通过父级事件对象的event.target查找子元素,并对他做出处理。


这在为多个元素添加相同事件时很方便

会使添加事件变得非常容易

<ul id="ul">
<li id="1">l</1i><li id="2">2</1i><li id="3">3</1i></ul>
<script>
var ul = document.querySelector ('ul');
ul.addEventListener('click', function() {
var target = event.target; switch(target.id) {
case il':
console.log('target.id 1====>' + target.id); break; case '2':
console.log('target.id 2=-_=>’ + target.id); break; case '3':
console.log('target.id 3====>’ + target.id); break;
})
</script>


使用"事件委托”时,并不是说把原生事件委托的元素越靠近顶层越好。事件冒询的过程中也需要耗时,越靠近顶层,事件的“事件传播链”越长,也就越耗时。


5.未来元素:使用事件代理(事件委托)来对未来元素进行事件绑定

五、默认行为

·使用 onclick 绑定的事件处理程序,return false 可以阻止默认行为

·推荐使用event.preventDefault()阻止默认行为

六、窗口文档
1.事件类型

事件名                          说明    
window.onload             文档解析及外部资源加载后    
DOMContentLoaded    文档解析后执行,不需要等待图片/样式文件等外部资源加载,该事件只能通过 addEventListener设置    


window.beforeunload   文档刷新或关闭时
window.unload             文档卸载时    
scroll                            页面滚动时    


2-1. onload
window.onload 事件在文档解析后及图片、外部样式文件等资源加载完后执行

<script>
window.onload = function () {
alert ('houdunren.com')}
</script>


2-2. DOMContentLoaded
DOMContentLoaded 事件在文档标签解析后执行,不需要等外部图片、样式文件、Js 文件等资源加载

<script>
window.addEventListener('DOMContentLoaded',(event)=> {
console.log('houdunren.com’)})
</script>

2-3. beforeunload
当浏览器窗口关闭或者刷新时,会触发 beforeunload 事件,可以取消关闭或刷新页面。


...返回值为非空字符串时,有些浏览器会做为弹出的提示信息内容

...部分浏览器使用 addEventListener 无法绑定事件

window.onbeforeunload = function(e){ return'真的要离开吗?}

2-4. unload
window.unload 事件在文档资源被卸载时执行,在 beforeunload 后执行


...不能执行 alertconfirm 等交互指令

...发生错误也不会阻止页面关闭或刷新

window.addEventListener('unload', function (e){
        localStorage.setItem('name','houdunren')

})

3.禁止复制

<body>
houdunren.com

<script>
document.addEventListener('copy',() => {
event.preventDefault (() alert('禁止复制内容')})
</script>

</body>

4.relatedTarget
relatedTarget 是控制鼠标移动事件的来源和目标对象的

<div id="app">houdunren.com</div>

<div id="cms">hdcms.com</div>

<script>
const app = document.querySelector(`#app`) const cms = document.querySelector(`#cms`) app.addEventListener('mouseout',(() => {
console.log(event.target)
console.log(event.relatedTarget)})
</script>

5.mouseenter 与 mouseleave
事件从子元素移动到父元素时不触发父元素事件(不产生冒泡行为)
ps: mouseover mouseout 鼠标移入、鼠标移出(这一组事件会产生冒泡行为)


七、表单事件

事件类型               说明    
focus                     获取焦点事件    
blur                       失去焦点事件    
element.focus()    让元素强制获取焦点
element.blur (()    让元素失去焦点    
change                 文本框在内容发生改变并失去焦点时触发,select/checkbox/radio 选项改变时触发事件    
input                    Input、textarea 或 select 元素的 value 被修改时,会触发 input事件。而change是鼠标离开后或选择一个不同的 option时触发。    
submit                提交表单

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

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

相关文章

消息队列的使用场景以及优缺点

消息队列是一种在应用系统之间传递消息的通信模式。它允许发送者将消息发布到一个队列中&#xff0c;而接收者则从队列中获取消息进行处理。 消息队列的主要特点包括&#xff1a; 异步通信&#xff1a;消息的发送和接收是异步进行的&#xff0c;发送者无需等待接收者的即时响应…

使用ChatGPT编写技术文档

技术文档对于任何项目都是至关重要的&#xff0c;因为它确保所有利益相关者都在同一层面上&#xff0c;并允许有效的沟通和协作。创建详细而准确的技术文档可能既耗时又具有挑战性&#xff0c;特别是对于那些不熟悉主题或缺乏强大写作技巧的人来说。ChatGPT 是一个强大的人工智…

docker容器学习笔记1

docker容器是干什么用的 docker就是一个轻量级的虚拟机&#xff0c;是一个容器&#xff0c;隔离性好&#xff0c;能够确保环境的统一&#xff0c;有效利用系统资源&#xff0c;轻松迁移和拓展。简单的可以理解为容器就是一个小型功能齐全的虚拟机。 实际上是如何使用的呢&…

DNS部署与安全详解(上)

文章目录 一、DNS二、域名组成1. 域名组成概述2. 域名组成 三、监听端口四、DNS解析种类1. 按照查询方式分类&#xff1a;2. 按照查询内容分类&#xff1a; 五、DNS服务器搭建过程1. 先确保服务器的IP地址是固定的2. 安装DNS软件 一、DNS DNS全称Domain Name Service&#xff0…

Java中可以使用机器学习库来进行线性回归

Java中可以使用机器学习库来进行线性回归。下面是一个使用Java进行线性回归的示例代码&#xff1a; 首先&#xff0c;你需要导入所需的库&#xff1a; import smile.regression.OLS; import smile.regression.Regression;import java.util.Arrays;然后&#xff0c;你可以创建…

大文件裁剪阿里云oss上传 plupload

亲测有效 home/include_upload_maxfile.jsp 效果如下 <% page language"java" import"java.util.*" pageEncoding"UTF-8"%> <%String path request.getContextPath();%><%page import"com.home.base.DBRow"%> &l…

ReentrantLock中的Condition的用法

其实Condition或者说wait和notify/notifyAll,我们是在阻塞队列中经常使用。 1.例子1 生产者消费者模式嘛&#xff0c;一个线程生成数据&#xff0c;有了数据后&#xff0c;通知其它线程取。 也就是await方法&#xff0c;是位于lock之间。 lock.lock() while(queue.empty())…

一支笔,一双手,一道力扣(Leetcode)做一宿

文章目录 一、分享自己相关的经历二、分析可能存在的问题三、根据问题进行分解或建立思维导图四、分享好用的刷题网站并进行介绍 一、分享自己相关的经历 我是一名计算机专业的学生&#xff0c;之前在学习算法和数据结构时&#xff0c;对于简单题目还算能够顺利地刷过去。但是…

ChatGPT是否能够处理多模态数据和多模态对话?

ChatGPT有潜力处理多模态数据和多模态对话&#xff0c;这将进一步扩展其在各种应用领域中的实用性。多模态数据是指包含多种不同类型的信息&#xff0c;例如文本、图像、音频和视频等。多模态对话是指涉及多种媒体形式的对话交流&#xff0c;例如同时包含文本和图像的对话。 *…

漫话拥塞控制:Capacity-Seeking 与 QoE

IETF117 CCWG 大会链接&#xff1a;IETF117-CCWG-20230725-2200&#xff0c;更详细信息以及讨论&#xff1a;https://github.com/ietf-wg-ccwg/wg-materials/tree/main/ietf117。 短评&#xff1a; 传统拥塞控制算法几乎都在不断冒险上探更多带宽&#xff0c;并在过程中忍受丢…

channel通道笔记

channel通道笔记 介绍 语法 1.一般使用make创建channel(常用) c : make(chan datatype),datatype是数据类型 2.直接显示声明,创建的值为空,一般没有太大意义 var c chan datatype 三种定义写法: 既可以收数据又可以发数据:chan datatype只可以收数据:chan <- datatype只可…

求解n阶勒让德多项式的值

描述 用递归方法求n阶勒让德多项式的值&#xff0c;递归公式为&#xff1a; 在主函数中输入一个整数n和一个实数x&#xff0c;调用函数 legendre(n,x)&#xff0c;并输出其返回值。 输入 第一行输入一个整数n&#xff0c;表示阶数&#xff1b;第二行输入一个实数x。 输出 …

python学习(廖雪峰的官方网站部分,自学笔记)

python学习 廖雪峰的官方网站强烈推荐 字符串 Python提供了ord()函数获取字符的整数表示&#xff0c;chr()函数把编码转换为对应的字符 ord( )先当与把字符转成整形&#xff0c;chr( ) 把编码转化成相应的字符 有些时候&#xff0c;字符串里面的%是一个普通字符怎么办&…

java-多线程简述

目录 1.实现多线程1.1简单了解多线程【理解】1.2并发和并行【理解】1.3进程和线程【理解】1.4实现多线程方式一&#xff1a;继承Thread类【应用】1.5实现多线程方式二&#xff1a;实现Runnable接口【应用】1.6实现多线程方式三: 实现Callable接口【应用】1.7设置和获取线程名称…

Photon之如何解决Photon Server无法在局域网使用的bug

前言 先介绍一下Photon的两个服务器服务: Photon Cloud 是一个完全托管的软件即服务 (SaaS) 解决方案。我们可以完全专注于应用程序客户端,而托管、服务器操作和扩展均由光子官方负责。 Photon Server 是一个本地服务器应用程序,我们可以在本地或指定的计算机上运行和托管。…

P5960 【模板】差分约束算法

【模板】差分约束算法 题目描述 给出一组包含 m m m 个不等式&#xff0c;有 n n n 个未知数的形如&#xff1a; { x c 1 − x c 1 ′ ≤ y 1 x c 2 − x c 2 ′ ≤ y 2 ⋯ x c m − x c m ′ ≤ y m \begin{cases} x_{c_1}-x_{c_1}\leq y_1 \\x_{c_2}-x_{c_2} \leq y_2 \\…

【机器学习】 贝叶斯理论的变分推理

许志永 一、说明 贝叶斯原理&#xff0c;站在概率角度上似乎容易解释&#xff0c;但站在函数立场上就不那么容易了&#xff1b;然而&#xff0c;在高端数学模型中&#xff0c;必须要在函数和集合立场上有一套完整的概念&#xff0c;其迭代和运算才能有坚定的理论基础。 二、贝叶…

Sequence 2023牛客暑期多校训练营6 E

登录—专业IT笔试面试备考平台_牛客网 题目大意&#xff1a;有一长度为n的数组a&#xff0c;有q次询问&#xff0c;每次要求将[l,r]的区间分成k个连续区间&#xff0c;满足每个区间和都是偶数&#xff0c;能满足要求就输出YES 1<n,q<1e5;0<ai<1e10;1<l<r&l…

Gson:解析JSON为复杂对象:TypeToken

需求 通过Gson&#xff0c;将JSON字符串&#xff0c;解析为复杂类型。 比如&#xff0c;解析成如下类型&#xff1a; Map<String, List<Bean>> 依赖&#xff08;Gson&#xff09; <dependency><groupId>com.google.code.gson</groupId><art…

在CSDN学Golang场景化解决方案(EFK分布式日志系统方案)

一&#xff0c;ElasticSearch 分布式集群部署 在 Golang EFK 分布式日志系统方案中&#xff0c;ElasticSearch 是一个分布式搜索引擎和数据存储库&#xff0c;它可以用于存储和搜索大量的日志数据。以下是 ElasticSearch 分布式集群部署的步骤&#xff1a; 下载 ElasticSearc…