JavaScript速成课—事件处理

目录

一.事件类型

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.rhkb.cn/news/136531.html

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

相关文章

下载HTMLTestRunner并修改

目录 一. 下载HTMLTestRunner 二. 修改HTMLTestRunner 1. 修改内容 2. 修改原因 一. 下载HTMLTestRunner 下载报告模板地址:http://tungwaiyip.info/software/HTMLTestRunner.html 下载模块: 二. 修改HTMLTestRunner 将修改后的模块放到python安装目录下的..…

Harmony 开始支持 Flutter ,聊聊 Harmony 和 Flutter 之间的因果

相信大家都已经听说过,明年的 Harmony Next 版本将正式剥离 AOSP 支持 ,基于这个话题我已经做过一期问题汇总 ,当时在现有 App 如何兼容 Harmony Next 问题上提到过: 华为内部也主导适配目前的主流跨平台方案,主动提供…

QT在安装后添加新组件【QT基础入门 环境搭建】

一、Qt的安装目录下找到MaintenanceTool工具 二、双击该exe文件运行该工具(界面可能不相同但功能一样) 登录账号,进入以下界面,点击下一步 选择更新组件,出现以下提示 三、此时需要手动添加储存库 1.进入下面网站,选择一个国内镜像 Qt Downloads 点击后面的HTTP可进入…

info文档与man手册

man 手册 man --version# 查看版本 man 2 socket# 查看section2中的socket yum install man-pages# 更新man手册man -f socket# 列出所有章节的socket # man -f刚开始使用的时候不显示 # centos7执行mandb命令,7以下的版本执行makewhatis命令 # 之后执行man -f就生效了 [rootk…

Jmeter —— 常用的几种断言方法(基本用法)

在使用JMeter进行性能测试或者接口自动化测试工作中,经常会用到的一个功能,就是断言,断言相当于检查点,它是用来判断系统返回的响应结果是否正确,以此帮我们判断测试是否通过,本文 主要介绍几种常用的断言&…

计算机算法分析与设计(3)---循环赛日程表(含代C++码)

循环赛日程表 一、内容概述二、代码实现2.1 分治代码2.2 结果图 一、内容概述 二、代码实现 2.1 分治代码 // 循环赛日程表 #include<iostream> #include<cmath> using namespace std;void schedule(int k, int n, int** array) // 数组下标从1开始 {for (int …

数字孪生基础设施需求分析

数字孪生基础设施需求分析 “基础设施”&#xff08;infrastructure&#xff09;新型基础设施建设 “基础设施”&#xff08;infrastructure&#xff09; 一词最早于1875年在法文中出现&#xff0c;但该词汇由拉丁文构成&#xff0c;infrastructure分为infra&#xff08;拉丁文…

win10 安装 Langchain-Chatchat 避坑指南(2023年9月18日v0.2.4版本,包含全部下载内容!)

网上教程都是基于外网或者翻墙的&#xff0c;而且细节极其不清晰&#xff0c;尤其是最关键的模型下载。 另外提一句&#xff0c;我的显卡是&#xff1a;3080Ti 16GB版本&#xff0c;运行之后&#xff0c;显存占用13-14GB 1、安装Anaconda&#xff08;这个就不啰嗦了&#xff0c…

Idea创建springboot项目

1、选择file—>new –->project 2、选择“Spring Initializr”&#xff0c;点击“next”&#xff0c;进入工程信息配置界面修改配置信息. 备注&#xff1a;type类型选择“Maven(Generate a Maven based project achieve)”&#xff0c;生成工程路径。 3、点击next按钮&a…

最全测试管理岗面试题(上)

1、怎么改善团队低迷现状&#xff1f; 改善团队低迷的现状是一个重要的管理挑战。以下是一些可能有助于改善团队状态的方法&#xff1a; ① 深入了解问题&#xff1a;首先&#xff0c;需要了解低迷的原因。这可能涉及与团队成员的个人会谈&#xff0c;收集反馈&#xff0c;观…

Java微信支付集成开发

文章目录 [toc] 1.接入前准备1.1 微信商户平台注册商户号1.1.1 微信支付商户接入指引1.1.2 微信支付服务商接入指引 1.2 微信开放平台注册小程序和公众号1.3 微信开放平台注册开发者账号1.4 微信商户平台绑定小程序和公众号的appId账号1.4.1 微信公众平台扫码登录微信公众号账号…

C++:初始化列表,static成员,友元,内部类

个人主页 &#xff1a; 个人主页 个人专栏 &#xff1a; 《数据结构》 《C语言》《C》 文章目录 前言一、初始化列表二、static成员三、友元四、内部类总结 前言 本篇博客作为C&#xff1a;初始化列表&#xff0c;static成员&#xff0c;友元&#xff0c;内部类的知识总结。 一…

Git学习笔记7

github上多人协助开发演示过程&#xff1a; 张三是项目作者。 李四是一个协同的用户。觉得项目不错&#xff0c;想增加一些功能。 clone与fork的区别&#xff1a; clone&#xff1a;任何人都可以下载作者的整个项目&#xff0c;但是非作者不能push到作者的项目里。&#xff…

MDPI模板报错的问题---提示缺少sty文件

MDPI模板报错的问题—提示缺少sty文件 平时大多数提交IEEE trans模板时大多使用CTEX编译&#xff0c;然而&#xff0c;MDPI模板需要用texlive&#xff0c;二者之间如果先安装CTEX后安装texlive将会导致库文件的冲突。结果将会报缺少sty的文件错。网上提供了很多解决方案&#…

CKA 真题练习(十六)备份还原etcd

题目&#xff1a; 首先&#xff0c;为运行在 https://11.0.1.111:2379 上的现有 etcd 实例创建快照并将快照保存到 /var/lib/backup/etcd-snapshot.db (注意&#xff0c;真实考试中&#xff0c;这里写的是 https://127.0.0.1:2379) 为给定实例创建快照预计能在几秒钟内完成。 …

Linux学习-Redis主从和哨兵

主从复制 一主一从结构 # 配置host61为主服务器 [roothost61 ~]# yum -y install redis [roothost61 ~]# vim /etc/redis.conf bind 192.168.88.61 #设置服务使用的Ip地址 port 6379 #设置服务使用的端口号 使用默认端口即可 [roothost61 ~]# systemctl start redis [rooth…

Discuz论坛网站标题栏Powered by Discuz!版权信息如何去除或是修改?

当我们搭建好DZ论坛网站后&#xff0c;为了美化网站&#xff0c;想把标题栏的Powered by Discuz&#xff01;去除或是修改&#xff0c;应该如何操作呢&#xff1f;今天飞飞和你分享&#xff0c;在操作前务必把网站源码和数据库都备份到本地或是网盘。 Discuz的版权信息存在两处…

一个Qt鼠标透传场景与事件过滤器的用法

一个Qt鼠标透传场景与事件过滤器的用法 最近工作中遇到一个开发场景&#xff0c;将一个QWidget控件&#xff08;称为控件A&#xff09;放入QScrollArea&#xff0c;该控件A重写了QWidget::wheelEvent&#xff0c;根据鼠标滚轮事件缩放内部的绘制视图。当控件过大时&#xff0c…

Python py文件打包成 exe文件

文章目录 安装 pyinstaller 模块pyinstaller 的使用pyinstaller 常用参数多文件打包 安装 pyinstaller 模块 pip install pyinstaller -i https://pypi.tuna.tsinghua.edu.cn/simple在 pyinstaller 模块安装成功之后&#xff0c;在 Python 的安装目录下的 Scripts 目录下会增加…

Python类练习

文章目录 题目要求步骤 题目要求 1)创建一个 Kid 类&#xff0c;包含姓名&#xff0c;性别&#xff0c;年龄属性和 play 方法 2) 创建一个 Stu 类&#xff0c;继承 Kid 类&#xff0c;同时包含成绩属性&#xff0c;获取成绩方法&#xff0c;努力学习方法&#xff0c;play方法&…