JavaScript速成课—事件处理

news2024/11/27 9:57:37

目录

一.事件类型

1.窗口事件

2.表单元素事件

3.图像事件

4.键盘事件

5.鼠标事件

二.JavaScript事件处理的基本机制

三.绑定事件的方法

1.DOM元素绑定

2.JavaScript代码绑定事件

3.监听事件函数绑定

四.JavaScript事件的event对象

1.获取event对象

2.鼠标坐标获取

3.获取事件源


一.事件类型

        JavaScript事件一般应用于捕获用户的操作,事件类型有如下几类:

1.窗口事件

        窗口事件仅在body和frameset元素中有效

onload                当页面被加载时执行脚本

onunload                当页面被关闭时执行脚本

2.表单元素事件

        仅在表单中有效

onchange                当元素改变时执行脚本

onsubmit                当表单被提交时执行

onreset                当元素被选取时执行脚本

onblur                当元素失去焦点时执行脚本

onfocus                当元素获得焦点时执行

3.图像事件

        该事件在img标签中使用

onabort                当图像加载中断时执行脚本

4.键盘事件

        键盘事件在如下标签中无效:base,bdo,br,frame,frameset,head,html,iframe,meta,param,script,style和title

onkeydown                当键盘被按下时执行脚本

onkeypress                当键盘按下又松开时执行脚本

onkyeup                键盘松开时执行脚本

5.鼠标事件

        鼠标事件在如下标签中无效:base,bdo,br,frame,frameset,head,html,iframe,meta,param,script,style和title        

onclick                当鼠标被单击时执行脚本

ondblclick                当鼠标被双击时执行脚本

onmousedown                当鼠标按钮被按下时执行脚本

onmouseout                当鼠标指针移出元素时执行脚本

onmouseover                当鼠标悬停于元素上时执行脚本

onmouseup                当鼠标按钮被松开时执行脚本

onmousemover                当鼠标移动时执行脚本

二.JavaScript事件处理的基本机制

(1)对DOM元素绑定事件处理函数;

(2)监听用户的操作

(3)当用户在相应的DOM元素上进行和绑定事件对应的操作时,事件处理函数做出响应;

(4)将处理结果更新到html文档

三.绑定事件的方法

        事件一版要和DOM元素进行绑定,绑定之后才可以监听用户的操作,绑定的方式有如下三中:

1.DOM元素绑定

        所谓DOM元素绑定就是将HTML元素绑定事件,一般格式如:

onxxx=“javascript code”

其中的javascript code是一些事件进行的函数,这些函数可以是JavaScript内部的,也可以是我们自己定义的

例如原生函数绑定事件,通过绑定事件onclick实现一个alert功能

点击按钮,出现警示框

如果上面的代码也可以通过自定义的函数实现功能:

2.JavaScript代码绑定事件

        所谓JavaScript事件绑定就是通过在JavaScript中绑定事件,实现事件和HTML元素的分离,事件绑定的语法一般为:

elementobject.onxxx=function(){
//事件函数
}

例如:一个鼠标悬停改变图片的案例

鼠标没有移动到图片上时:

鼠标悬停到图片上时:

3.监听事件函数绑定

        事件监听函数有两,addEventListener()和attachEvent()函数

(1)addEventListener()函数语法:

elementobject.addEvenListener(evenName,handle,useCapture);

看参数:

evenName        事件的名称,但这里的名称不加on,例如click,dblclick事件

handle                事件句柄,事件处理的函数

useCapture        布尔值,是否使用捕获,一般为false

例如上面美女图片的例子用监听事件函数写:

(2)attachEvent()函数语法:

        注意:前面的addEventListener()函数一般的浏览都可以用,但有写IE8及其以下版本不能用,所有可以用attachEvent()函数,但这个函数太古老了,有些浏览器还真不支持addEvent()

elementobject.addEvent(evenName,handle);

参数:

evenName        事件的名称,但这里的名称不加on,例如click,dblclick事件

handle                事件句柄,事件处理的函数

四.JavaScript事件的event对象

        JavaScript事件的event对象表示当前事件,event对象的属性包含了当前对象的状态,只在事件发生的过程中才有效

1.获取event对象

        event对象参数传入,通过传入就可以得到某个DOM的当前事件:

elementobject.onxxx=function(){
var eve=e  //声明一个变量来接受event对象;
}

        对于IE8及其以下版本,event必须作为window对象的一个属性

elementobject.onxxx=function(){
var eve=window.event;
}

小例:

2.鼠标坐标获取

        鼠标坐标是event对象的一个属性,鼠标坐标包括鼠标Y轴坐标,Y轴坐标,相对客户端坐标和相对屏幕坐标

W3C规范所规范的属性:

clientX                鼠标指针相对于客户端的水平坐标

clientY                鼠标指针相对于客户端的垂直坐标

screenX                鼠标指针相对于计算机屏幕的水平坐标

screenY                鼠标指针相对于计算机屏幕的垂直坐标

IE浏览器特有的属性:

offsetX                发生事件的地点在事件源元素的坐标体系中的水平坐标

offsetY                发生事件的地点在事件源元素的坐标体系中的垂直坐标

x                          事件发生的位置的水平坐标

y                           事件发生的位置的垂直坐标

例:

3.获取事件源

        顾名思义,就是看是哪一个元素属性发生的事件,这个属性是target,在IE8以下以下不支持这个属性,可以用SRCElement属性获取事件源

例:

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

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

相关文章

11、Kubernetes核心技术 - Service

目录 一、概述 二、Endpoint 三、Service资源清单 四、Service 类型 4.1、ClusterIP 4.2、NodePort 4.3、LoadBalancer 4.4、ExternalName 五、Service使用 5.1、ClusterIP 5.1.1、定义Pod资源清单 5.1.2、创建Pod 5.1.3、定义Service资源清单 5.1.4、创建Servic…

面试官:请说说flex布局_番茄出品.md

面试官:请说说flex布局_番茄出品.md start 依然记得当初学习 flex 布局时,用 flex 布局:画麻将。一筒到九筒,应有尽有。但是光和面试官说,我用 flex 布局画过麻将,并没有什么用。面试官问你一个语法&…

Hadoop:YARN、MapReduce、Hive操作

目录 分布式计算概述 YARN概述 YARN架构 核心架构 辅助架构 MapReduce 概述 配置相关文件 提交MapReduce到YARN Hive Hive架构 Hive在VMware部署 Hive的启动 数据库操作 数据表操作 内部表操作 外部表操作 数据加载和导出 数据加载LOAD 数据加载 - INSERT SEL…

生物的神经系统与机器的人工神经网络

生物的神经系统与机器的人工神经网络 文章目录 前言一、人工神经网络二、生物的神经系统三、关系四、相似与区别4.1. 相似:4.2. 区别: 总结 前言 因为本人是学生物的,并且深度学习的核心——人工神经网络与生物的神经系统息息相关,故想要在本…

单片机测量任务运行时间

前言 1.之前是直接看定时器的计数值来粗略估计,可能会存在一些差错,也不够方便;所以做一个比较通用的计算任务运行时间的小Demo。 2.用定时器的计数值查看开始的Tick和结束的Tick,然后定时器每隔1毫秒溢出一次,通过简…

QML 碰到的奇怪问题

text elied属性失效 elied属性就是当Text的文本文字超过Text的宽度时。文字会出现省略的效果。 import QtQuick 2.9 import QtQuick.Window 2.3Window {visible: truewidth: 640height: 480title: qsTr("Hello World")Rectangle{anchors.centerIn: parentwidth: pa…

颜色扩散类dp及其优化:0919T2

http://cplusoj.com/d/senior/p/330 此题前半部分是AGC058B 这是一个颜色扩散类dp&#xff0c;对于这类dp&#xff0c;存在一个性质。 假如一个区间被 i i i 染&#xff0c;一个被 j j j 染&#xff0c;则必然满足 i < j i<j i<j&#xff08;这是下标&#xff09…

基于SSM的智慧城市实验室主页系统的设计与实现

末尾获取源码 开发语言&#xff1a;Java Java开发工具&#xff1a;JDK1.8 后端框架&#xff1a;SSM 前端&#xff1a;采用Vue技术开发 数据库&#xff1a;MySQL5.7和Navicat管理工具结合 服务器&#xff1a;Tomcat8.5 开发软件&#xff1a;IDEA / Eclipse 是否Maven项目&#x…

e签宝,再「进化」

基于ePaaS&#xff0c;e签宝不仅打造了电子签领域的生态圈&#xff0c;也正在赋能整个SaaS行业奔向生态化的良性业态&#xff0c;这将使得SaaS厂商的边界愈发清晰&#xff0c;逐渐实现“量产”&#xff0c;奔向规模化。 作者|斗斗 出品|产业家 1957年11月&#xff0c;江苏…

文件字符输出流(FileWriter)(基础流)

1、不追加的情况 package com.csdn.d4_char_stream; import java.io.FileWriter; import java.io.IOException; import java.io.Writer; public class FileWriterDemo01 {public static void main(String[] args) throws IOException {//1、创建一个字符输出流管道与目标文件接…

Android进阶之路 - 盈利、亏损金额格式化

在金融类型的app中&#xff0c;关于金额、数字都相对敏感和常见一些&#xff0c;在此仅记录我在金融行业期间学到的皮毛&#xff0c;如后续遇到新的场景也会加入该篇 该篇大多采用 Kotlin 扩展函数的方式进行记录&#xff0c;尽可能熟悉 Kotlin 基础知识 兄弟 Blog StringUti…

Kafka为什么是高性能高并发高可用架构

目录 1 前言2 顺序写入3 页缓存4 零拷贝5 Broker 性能6 流数据并行7 总结 1 前言 我们都知道 Kafka 是基于磁盘进行存储的&#xff0c;但 Kafka 官方又称其具有高性能、高吞吐、低延时的特点&#xff0c;其吞吐量动辄几十上百万。小伙伴们是不是有点困惑了&#xff0c;一般认为…

Linux——IO

✅<1>主页&#xff1a;&#xff1a;我的代码爱吃辣 &#x1f4c3;<2>知识讲解&#xff1a;Linux——文件系统 ☂️<3>开发环境&#xff1a;Centos7 &#x1f4ac;<4>前言&#xff1a;是不是只有C/C有文件操作呢&#xff1f;python&#xff0c;java&…

Code Ocean :一个用于数据科学和科学研究的在线平台【源码+文章解析】

Code Ocean&#xff08;https://codeocean.com/&#xff09;是一个用于数据科学和科学研究的在线平台&#xff0c;旨在帮助研究人员更轻松地管理、共享和复制研究代码和数据。以下是Code Ocean的主要用途和功能&#xff1a; 代码和数据的管理&#xff1a;Code Ocean允许研究人…

辨析目录表、文件打开表、文件分配表、索引表、FCB、inode、fd等文件系统常见名词

文章目录 1 解释2 形象配图 以下内容仅供简单的辨析这些文件系统最基本的名词&#xff0c;如果需要更深入的了解&#xff0c;请查阅相关转移书籍&#xff0c;如《现代操作系统》、《操作系统概念》 、《操作系统精髓与设计原理》等书籍。 1 解释 2 形象配图 文件打开表 文件分…

工控机连接Profinet转Modbus RTU网关与水泵变频器Modbus通讯

Profinet转Modbus RTU网关是一个具有高性能的通信设备&#xff0c;它能够将工控机上的Profinet协议转换成水泵变频器可识别的Modbus RTU协议&#xff0c;实现二者之间的通信。通过这种方式&#xff0c;工控机可以直接控制水泵变频器的运行状态&#xff0c;改变其工作频率&#…

Windows10下的GTSAM因子图安装与使用

Windows10下的GTSAM因子图安装与使用 一、windows系统预安装1. windows 10安装gcc2.windows 10 安装 boost3.CMake 安装与查看4.CMake 配置boost 二、GTSAM安装与使用三、CMAKE 创建立 使用GTSAM的Visual Studio项目参考文献 一、windows系统预安装 1. windows 10安装gcc htt…

【深度学习框架格式转化】【CPU】Pytorch模型转ONNX模型格式流程详解【入门】

【深度学习框架格式转化】【GPU】Pytorch模型转ONNX模型格式流程详解【入门】 提示:博主取舍了很多大佬的博文并亲测有效,分享笔记邀大家共同学习讨论 文章目录 【深度学习框架格式转化】【GPU】Pytorch模型转ONNX模型格式流程详解【入门】前言PyTorch模型环境搭建(CPU)安装onn…

LCP 50. 宝石补给(每日一题)

欢迎各位勇者来到力扣新手村&#xff0c;在开始试炼之前&#xff0c;请各位勇者先进行「宝石补给」。 每位勇者初始都拥有一些能量宝石&#xff0c; gem[i] 表示第 i 位勇者的宝石数量。现在这些勇者们进行了一系列的赠送&#xff0c;operations[j] [x, y] 表示在第 j 次的赠送…

解决VS Code安装远程服务器插件慢的问题

解决VS Code安装远程服务器插件慢的问题 最近想在服务器上做juypter notebook的代码运行&#xff0c;发现要给服务器安装Jupyter插件&#xff0c;但是安装速度奇慢无比&#xff08;因为服务器不连外网&#xff09;&#xff0c;一开始查看从VS Code插件市场下载插件的博客&…