JavaScript DOM属性和方法之event事件对象


event对象代表事件的状态,比如事件在其中发生的元素,键盘按键的状态、鼠标的位置、鼠标按钮的状态,事件通常与函数结合使用,函数不会在事件发生前被执行,只有当事件被触发的时候才会执行函数。

一、句柄事件

HTML5的新特性之一是能够使HTML事件触发浏览器中的行为,比如:当用户点击某个HTML元素时启动一段js代码。
作为属性可以有两种使用方式:

  • 直接卸载HTML标签元素中
  • 写在js中进行事件绑定 obj.οnclick=demo()
1、onclick事件

当用户用鼠标点击某个元素的时候触发onclick事件

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>知数SEO_vx:zhishunet</title><style>.font{color:red}</style>
</head>
<body>
<button onclick="demo()">点击弹出消息</button>
</body>
<script>function demo(){alert('这是一个弹出框');}
</script>
</html>
2、onchange事件

在内容发生改变时将触发onchange事件,适用于所有的HTML标签元素,只要标签元素的内容发生改变就会触发这个事件

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>知数SEO_vx:zhishunet</title><style>.font{color:red}</style>
</head>
<body>
<input type="radio" name="sex" value="男" onchange="demo(this)"><input type="radio" name="sex" value="女" onchange="demo(this)"></body>
<script>function demo(obj){alert('您选择的性别是:' + obj.value);}
</script>
</html>
3、onresize事件

在窗口或框架调整大小时触发,这个事件在<body>中用的比较多

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>知数SEO_vx:zhishunet</title><style>.font{color:red}</style>
</head>
<body onresize="demo()">
</body>
<script>function demo(){alert('窗口大小发生了变化');}
</script>
</html>
4、onfocus事件 和 onblur事件

输入框获取和失去焦点事件

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>知数SEO_vx:zhishunet</title><style>.font{color:red}</style>
</head>
<body>
<input type="text" onfocus="f()" onblur="b(this)">
</body>
<script>function f(){console.log('获取焦点事件');}function b(obj){console.log('失去焦点,输入值为:' + obj.value);}
</script>
</html>
5、ommouseover 和 onmouseout事件

鼠标移到某个元素和从某个元素上移开时触发的事件
``javascript

知数SEO_vx:zhishunet ```` #### 6、onsubmit事件 在点击submit按钮的时候被触发,这个事件写在
#### 2、screenX 和 screenY#### 3、altKey、shiftKey、ctrlKey#### 4、button### 三、标准event属性和方法#### 1、bubbles#### 2、eventPhase#### 3、currentTarget#### 4、target#### 5、preventDefault()#### 6、stopPropagation

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

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

相关文章

【代码能力提升 | 代码阅读学习】分析 VoxelNet 的 主干

文章目录 前言代码分析VoxelNet model2.数据处理2.1单个样本处理2.2处理成batch 最后&#xff0c;附上我一步步调试代码&#xff0c;到3D-conv 前言 代码来自&#xff1a;https://github.com/skyhehe123/VoxelNet-pytorch 其中 测试数据来自&#xff1a;https://github.com/ga…

春节寄快递贵?想要便宜寄快递?那是你没找到寄快递便宜的渠道!

春节将至&#xff0c;公司会发放一大批的年货礼品给员工们&#xff0c;来聊表这一年来的勤恳工作的心意。但是想要拿走这么多的年货&#xff0c;可不是一件容易的事情啊&#xff0c;这时候我们可以通过邮寄的方式把东西邮寄走&#xff0c;是不是省了很多事呢&#xff0c;不仅回…

如何过有「松弛感」的生活?

最近网上有一个词很流行&#xff0c;叫做「松弛感」。最早的出处似乎是这么一条微博&#xff1a;博主见到一家人出门旅游&#xff0c;行李全部被退回&#xff0c;空手抵达目的地&#xff0c;竟然没人紧张和生气&#xff0c;而是重新安排好行李后继续开心聊天&#xff0c;全程非…

Redis -- 前置知识

目录 简要 分布式系统 负载均衡 引入缓存 数据库分表 微服务 小结 简要 redis是存储数据在内存中, 定义变量就是在内存中, 但是redis是在分布式系统中, 才能真正发挥威力, 如果只是单机程序, 那么直接通过变量来存储数据的方式将是最优的选择. …

Unity 解释器模式(实例详解)

文章目录 示例1&#xff1a;基础解释器结构示例2&#xff1a;小于表达式&#xff08;LessThanExpression&#xff09;示例3&#xff1a;逻辑或表达式&#xff08;OrExpression&#xff09;示例4&#xff1a;逻辑非表达式&#xff08;NotExpression&#xff09;示例5&#xff1a…

DeepLearningSystem:开启深度学习之旅的全方位指南,一款深度学习系统性开源课程项目!

在当今这个数据驱动的时代&#xff0c;深度学习技术 已经成为了科技领域的一个重要分支。 对于有志于掌握这一技术的专业人士和学生来说&#xff0c;有一个项目值得特别关注——由chenzomi12开发的“深度学习系统”课程。 Star&#xff1a;6.2k GitHub&#xff1a;https://gi…

美睫师睫毛嫁接零基础学习,日式美睫与开花嫁接实战教学

一、教程描述 大家都说女人的钱好挣&#xff0c;这是因为每个女人在每年&#xff0c;都要花很多钱来打扮自己。本套教程是关于日式美睫和开花嫁接的&#xff0c;从零基础学习到店铺经营都有涉及&#xff0c;就做美睫和睫毛嫁接这两项业务&#xff0c;月收入万元以上应该问题不…

系统引导程序 Boot Loader——学习笔记

基于嵌入式Linux 的完整系统软件由三个部分组成&#xff1a;系统引导程序、Linux 操作系统内核和文件系统。 系统引导程序 Boot Loader 是系统加电后运行的第一段软件代码&#xff0c;它的作用是加载操作系统或者其他程序到内存中&#xff0c;并将控制权交给它们。 Boot Load…

JMeter性能测试实战

&#x1f525; 交流讨论&#xff1a;欢迎加入我们一起学习&#xff01; &#x1f525; 资源分享&#xff1a;耗时200小时精选的「软件测试」资料包 &#x1f525; 教程推荐&#xff1a;火遍全网的《软件测试》教程 &#x1f4e2;欢迎点赞 &#x1f44d; 收藏 ⭐留言 &#x1…

C语言——O / 动态内存管理

一、为什么要有动态内存分配 我们已经掌握的内存开辟⽅式有&#xff1a; int val 20;//在栈空间上开辟四个字节 char arr[10] {0};//在栈空间上开辟10个字节的连续空间 但是上述的开辟空间的⽅式有两个特点&#xff1a; • 空间开辟⼤⼩是固定的。 • 数组在申明的时候&am…

RabbitMQ之死信交换机

前言 消息队列是分布式系统中常用的组件&#xff0c;用于异步通信、解耦和提高系统可靠性。然而&#xff0c;在实际应用中&#xff0c;难免会遇到一些异常情况&#xff0c;例如消息处理失败、超时等。为了更好地处理这些异常情况&#xff0c;死信交换机&#xff08;Dead Lette…

AS自治系统中的路由协议---RIP、OSPF、BGP

一、AS --- 自治系统 将网络分块管理 --- 由单一的机构或组织所管理 的一系列IP网络及其设备的集合 AS的管理&#xff1a;为了方便对AS进行管理&#xff0c;我们给AS设计了一个编号称为AS 号 --- 16位二进制构成 --- 0 - 65535 ---- 目前也存在拓展版的AS 号 --- 32位二进制构…

C++-类和对象(1)

目录 1.面向过程和面向对象初步认识 2.类的引入 3.类的定义 4.类的访问限定符及封装 4.1 访问限定符 关于C中struct和class的区别&#xff1a; 4.2 封装 1.面向过程和面向对象初步认识 C语言是面向过程的&#xff0c;关注的是过程&#xff0c;分析出求解问题的步骤&…

【论文阅读|半监督小苹果检测方法S3AD】

论文题目 &#xff1a; : Semi-supervised Small Apple Detection in Orchard Environments 项目链接&#xff1a;https://www.inf.uni-hamburg.de/en/inst/ab/cv/people/wilms/mad.html 摘要&#xff08;Abstract&#xff09; 农作物检测是自动估产或水果采摘等精准农业应用不…

代码迁移,合并双仓库

文章目录 前言一、如何对两个仓库进行合并二、具体操作步骤A仓库新分支第一步 移除controller以及接口第二步 移除service以及实现类impl第三步 移除dao层&#xff08;mapper以及xml&#xff09;第四步 移除pojo、cache、config、enum以及util等&#xff0c;并复查service第五步…

python 基础知识点(蓝桥杯python科目个人复习计划27)

今日复习内容&#xff1a;基础算法中的递归 1.介绍 递归&#xff1a;通过自我调用来解决问题的函数递归通常把一个复杂的大问题层层转化为一个与原问题相似的规模较小的问题来解决 递归要注意&#xff1a;&#xff08;1&#xff09;递归出口&#xff1b;&#xff08;2&#x…

一招搞定msvcr120.dll丢失怎样修复的问题,快速修复msvcr120.dll文件

msvcr120.dll丢失的问题时电脑中常见的几种问题&#xff0c;关于msvcr120.dll丢失的问题都有什么办法可以有效的解决文件丢失的问题&#xff0c;今天我们就来聊聊关于msvcr120.dll丢失怎样修复的方法都有哪些&#xff1f; 一.一招搞定msvcr120.dll丢失问题 为了解决msvcr120.d…

05 SB3之Spring Initializr+运行方式+自动配置原理(TBD)

1. 使用IDEA内置Spring Initializr 生成SB项目 最上方Server URL可以选择借助哪个平台生成, 可选阿里云 作为对比 , 官方可选版本最旧为3.1.18 ; 阿里云可选最新版本为3.0.2 本次选择3.1.8版本, 并且添加Spring Web依赖(包括RESTful / Spring MVC/)和Lombok依赖 生成后端项目…

野火霸道V2学习笔记

STM32F103学习笔记 STM32F103学习笔记说明基础配置配置KeilMDK配置串口下载程序美化Keil界面配置VScode 理论知识STM32命名方式例子 置位与清零GPIOGPIO简介GPIO和引脚的区别引脚的分类 GPIO 框图讲解保护二极管推挽输出推挽输出的含义推挽输出的原理推挽输出的特点推挽输出的应…

TCO AF488,AF488 反式环辛烯,可以用于各种生物实验中,如免疫荧光染色、细胞追踪、核酸检测等

AF488 TCO&#xff0c;Alexa Fluor TCO&#xff0c;TCO AF488&#xff0c;AF488 反式环辛烯&#xff0c;可以用于各种生物实验中&#xff0c;如免疫荧光染色、细胞追踪、核酸检测等 您好&#xff0c;欢迎来到新研之家 文章关键词&#xff1a;AF488 TCO&#xff0c;Alexa Fluo…