JavaScript从入门到精通系列第三十六篇:详解JavaScript中的事件监听和事件响应

文章目录

一:什么叫事件

1:概念

2:处理这个事件

(一):鼠标单机按钮

(二):鼠标双机按钮

(三):鼠标移动

 3:写法弊端

 4:Dom Event

二:监听事件

1:元素事件绑定函数的方式

2:响应函数 


大神链接:作者有幸结识技术大神孙哥为好友,获益匪浅。现在把孙哥视频分享给大家。

孙哥链接:孙哥个人主页
作者简介:一个颜值99分,只比孙哥差一点的程序员
本专栏简介:话不多说,让我们一起干翻JavaScript

本文章简介:话不多说,让我们讲清楚JavaScript的事件和事件响应

一:什么叫事件

1:概念

        事件,就是文档或浏览器窗口中发生的一些特定的交互瞬间。JavaScript与HTML之间的交互是通过事件实现的。

        对于 Web应用来说,有下面这些代表性的事件:点击某个元素、将鼠标移动至某个元素上方、按下键盘上某个键。甚至打开浏览器窗口,关闭浏览器窗口,拖动浏览器窗口这些统统都是事件!

2:处理这个事件

        关键的问题是在于事件发生之后,怎么去处理这个事件。事件就是浏览器和用户之间的一些交互行为,关键的内容就是发生事件之后怎么去处理事件。

        处理事件可以在我们事件对象的属性中设置一些JS代码,这样事件被触发时,代码将会执行。

(一):鼠标单机按钮

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title></head><body><button id = "btn" onclick='alert("讨厌,你点我干嘛!")'>这是一个按钮</button><script type="text/javascript"></script></body>
</html>

        运行结果: 

(二):鼠标双机按钮

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title></head><body><button id = "btn" ondblclick='alert("讨厌,你点我干嘛!")'>这是一个按钮</button><script type="text/javascript"></script></body>
</html>

(三):鼠标移动

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title></head><body><button id = "btn" onmousemove='alert("讨厌,你点我干嘛!")'>这是一个按钮</button><script type="text/javascript">	</script></body>
</html>

 3:写法弊端

        这种写法的弊端就是Html代码和Js代码高度耦合。可以用,但是我们非常不建议使用,很不好进行维护。这种接法叫做结构和行为高度耦合的方式,我们并不推荐!

 4:Dom Event

        查看文档中的Dom Event可以查看所有的Dom相关事件。

二:监听事件

1:元素事件绑定函数的方式

        可以为按钮的对应事件绑定处理函数的方式来响应事件。要想这么玩,必须得先获取元素对象。

        为按钮对应事件绑定函数。绑定事件(就是给对象添加属性,也就是给对象属性添加函数)这样做就是当事件被触发时,其对应的函数会被触发

        证明这件事情:

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title></head><body><button id = "btn" >这是一个按钮</button><script type="text/javascript">var btn = document.getElementById("btn");console.log(btn);//为按钮对应事件绑定函数。//绑定单机事件(给对象添加属性,也就是给对象属性添加函数)//这样做就是当事件被触发时,其对应的函数会被触发btn.onclick = function(){alert("妈的,你还点!");}</script></body>
</html>

        运行结果:

2:响应函数 

         元素事件绑定函数的方式是我们推荐使用的一种方式。像这种,我们为单机事件绑定的函数被称为单机响应函数。为双击事件绑定的函数被称为双击响应函数。

        函数什么时候被执行,事件被触发的时候。

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

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

相关文章

域名反查Api接口——让您轻松查询域名相关信息

在互联网发展的今天&#xff0c;域名作为网站的唯一标识符&#xff0c;已经成为了企业和个人网络营销中不可或缺的一部分。为了方便用户查询所需的域名信息&#xff0c;API接口应运而生。本文将介绍如何使用挖数据平台《域名反查Api接口——让您轻松查询域名相关信息》进行域名…

c 实用化的摄像头生成avi视频程序(加入精确的时间控制)

I时间控制是指&#xff1a;生成了n张图片帧用了多少时间m。帧率等于n/m。对应于头文件&#xff0c;m等于scale, n等于rate.为了精确&#xff0c;采用微秒计时。 I此程序生成的视频远好于ffmpeg&#xff0c;可能是此程序没有压缩数据原因吧。 现在的帧率不高&#xff0c;是因…

Java之“数字困境”:资产管理项目中的Bug追踪与启示

目录 1 前言2 问题的发现3 调试的开始4 深入调试5 调试心得与反思6 结语 1 前言 在程序员的日常工作中&#xff0c;我们时常面对各种令人头疼的问题&#xff0c;其中最令人崩溃的瞬间之一&#xff0c;就是当我们花费大量时间追踪一个看似复杂的bug&#xff0c;最终发现问题的根…

C# PDF转HTML字符串

需要nuget安装Aspose.PDF插件&#xff0c;本文使用23.10.0版本 一、获取PDF文件&#xff0c;保存到某个路径&#xff1b;再读取返回字符串。 //html文件保存路径 string filePath dirPath "xxx.html"; if (!File.Exists(filePath)) {//获取pdf文件流Byte[] pdfBy…

windows安装composer并更换国内镜像

第一步、官网下载 下载地址 Composer安装https://getcomposer.org/Composer-Setup.exe第二步、双击安装即可 第三步选择 php安装路径并配置path 第四步、 composer -v查看安装是否成功&#xff0c;出现成功界面 第五步、查看镜像地址并更换&#xff08;composer国内可能较慢…

达梦数据库安装

一、官网参考文档 达梦数据库官网&#xff1a;https://www.dameng.com/ &#xff0c;参考文档如下&#xff1a; 最后的文档地址为&#xff1a;Docker安装 | 达梦技术文档 二、dcoker安装 docker基本按照官网来就行&#xff0c;点击相应的链接下载镜像包。 复制到linux中&#x…

Linux命令——ssh

Linux命令——ssh 背景 SSH&#xff08;Secure Shell 的缩写&#xff09;是一种网络协议&#xff0c;用于加密两台计算机之间的通信&#xff0c;并且支持各种身份验证机制。 历史上&#xff0c;网络主机之间的通信是不加密的&#xff0c;属于明文通信。这使得通信很不安全&a…

万界星空科技智能管理系统低代码平台

低代码平台正成为企业数字化基础设施的重要一环&#xff0c;越来越多的企业为了可持续的数字化建设&#xff0c;开始启用低代码平台&#xff0c;其选型除了平台易用性、应用搭建能力外&#xff0c;也关注与第三方平台的集成性&#xff0c;及厂商对行业knowhow的积累、品牌口碑及…

LeetCode(9)跳跃游戏【数组/字符串】【中等】

目录 1.题目2.答案3.提交结果截图 链接&#xff1a; 55. 跳跃游戏 1.题目 给你一个非负整数数组 nums &#xff0c;你最初位于数组的 第一个下标 。数组中的每个元素代表你在该位置可以跳跃的最大长度。 判断你是否能够到达最后一个下标&#xff0c;如果可以&#xff0c;返回…

解决服务器中的mysql连接不上Navicat的问题脚本

shell标本&#xff0c;快速解决服务器中的mysql连接不上Navicat的问题 在Linux服务器开发中&#xff0c;mysql的配置文件一般是只允许本地连接 所以想用Navicat进行连接&#xff0c;就需要修改配置和mysql中用户访问表的权限 为了方便&#xff0c;写成了shell脚本 #!/bin/bas…

飞天使-django概念之urls

urls 容易搞混的概念&#xff0c;域名&#xff0c;主机名&#xff0c;路由 网站模块多主机应用 不同模块解析不同的服务器ip地址 网页模块多路径应用 urlpatterns [ path(‘admin/’, admin.site.urls), path(‘’, app01views.index), path(‘movie/’, app01views.movi…

ffmpeg命令行处理视频,学习记录

ffmpeg命令行处理视频 截取视频前5s ffmpeg -ss 00:00:00 -t 00:00:05 -i .\public\uploads\20231109\116a292eccf8315f65d7166e794d1730.mp4 .\public\uploads\20231109\116a292eccf8315f65d7166e794d1731.mp4两视频合并为1个 ffmpeg -i F:\xuejiao\code\cms.openlai.com\p…

5 新的关键字

动态内存分配 回想C语言中&#xff0c;动态内存是怎么分配的&#xff1f;通过C库里面的malloc free去进行动态内存分配。 C通过new关键字进行动态内存申请&#xff0c;动态内存申请是基于类型进行的。 delete 关键字用于内存释放。 //变量申请 type* pointer new type; dele…

友元的三种实现

友元的三种实现 全局函数做友元类做友元成员函数做友元 #include <iostream> #include <string> using namespace std;//友元的三种实现 // //* 全局函数做友元 //* 类做友元 //* 成员函数做友元class Building {//告诉编译器 goodGay全局函数 是 Building类的好…

[Socket]Unix socket 运行权限问题

Unix socket 运行权限问题 hongxi.zhu 2023-11-13 问题&#xff1a;socket只能在当前源码目录运行&#xff0c;换个路径或者换个机子运行&#xff0c;如果是服务端&#xff0c;启动则会出现无法bind, 客户端则会出现无法connect 原因&#xff1a;unix socket是基于文件的fd方式…

Mistral 7B 比Llama 2更好的开源大模型 (一)

Mistral 7B 简介 Mistral 7B Mistral 7B 是一个 7.3B 参数模型: 在所有基准测试中优于 Llama 2 13B在许多基准测试中优于 Llama 1 34B接近 CodeLlama 7B 的代码性能,同时保持擅长英语任务使用分组查询注意力 (GQA) 加快推理速度使用滑动窗口注意力 (SWA) 以更低的成本处…

K8S集群etcd 某个节点数据不一致如何修复 —— 筑梦之路

背景说明 二进制方式安装的k8s集群&#xff0c;etcd集群有3个节点&#xff0c;某天有一台机器hang住了&#xff0c;无法远程ssh登陆&#xff0c;于是被管理员直接重启了&#xff0c;重启后发现k8s集群删除一个deployment应用&#xff0c;多次刷新一会有&#xff0c;一会没有&am…

[Android]新建项目使用AppCompatActivity后运行闪退

报错 日志&#xff1a; Caused by: java.lang.IllegalStateException: You need to use a Theme.AppCompat theme (or descendant) with this activity. FATAL EXCEPTION: main Process: com.example.gatestdemol, PID: 26071 java.lang.RuntimeException: Unable to start a…

DefaultListableBeanFactory

DefaultListableBeanFactory 是一个完整的、功能成熟的 IoC 容器&#xff0c;如果你的需求很简单&#xff0c;甚至可以直接使用 DefaultListableBeanFactory&#xff0c;如果你的需求比较复杂&#xff0c;那么通过扩展 DefaultListableBeanFactory 的功能也可以达到&#xff0c…

Netty实现通信框架

一、LengthFieldBasedFrameDecoder的参数解释 1、LengthFieldBasedFrameDecoder的构造方法参数 看下最多参数的构造方法 /*** Creates a new instance.** param byteOrder* the {link ByteOrder} of the length field* param maxFrameLength* the maximum len…