【JS】事件基础

news2024/12/23 22:47:04

JavaScript事件基础

  • 事件的概述
    • 事件三要素
    • 常见的事件
  • 事件的调用
    • 在script标签中调用
    • 在元素中调用
  • 鼠标事件
    • onclick事件
    • onmouseover和onmouseout
    • onmousedown和onmouseup
  • 页面事件
    • onload
    • onbeforeunload
  • this
  • 其他事件

事件的概述

事件操作是JavaScript的核心。

用户进行操作时,触发了JavaScript的事件,然后会产生相对应的效果;例如:点击按钮会弹出对话框,这个点击操作就是一个事件,弹出对话框就是那个效果(事件过程)。

事件三要素

  1. 事件主角:按钮,div元素…等;
  2. 事件类型:点击,移动…等;
  3. 事件过程:事件发生的事情。

常见的事件

  1. 鼠标事件
  2. 键盘事件
  3. 表单事件
  4. 编辑事件
  5. 页面事件

事件的调用

JavaScript中,事件的调用方式有两种:

  1. 在元素中调用
  2. 在script标签中调用

注意:使用在script标签中调用事件比较多,因为这样可以使得HTMLJavaScript代码分离。

在script标签中调用

<script></script>标签中调用。

语法

obj.事件名 = function(){
	....
};

这里的obj指的是DOM(Document Object Model)对象,指的是对应的元素节点document.body等等.

注意:语法最后面的分号需要加上,因为这是一个赋值语句,不加不会报错,但是为了规范最好加上

举例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>text</title>
</head>
<body>

    <input id="btn" type="button" value="按钮" />

    <script type="text/javascript">
    // 事件调用
        window.onload = function(){
            var btn = document.getElementById('btn');
            btn.onclick = function(){
                alert(this.value)
            }
        }
    </script>

</body>
</html>

在这里插入图片描述

在元素中调用

在元素中调用即存在事件属性,对该事件属性赋值即可。

举例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>text</title>
</head>
<body>
	
	<!--元素中调用click点击事件-->
    <input id="btn" type="button" value="按钮" onclick="xxx()"/>

    <script type="text/javascript">
        xxx = function(){
            alert("出错")
        }
    </script>

</body>
</html>

在这里插入图片描述

鼠标事件

顾名思义,就是和鼠标有关的事件。点击鼠标会有什么效果,鼠标移动到那会有什么效果,离开那又有什么效果…等。

常见的鼠标事件:

在这里插入图片描述

可以根据英文来记忆(上述事件都是以on开头的):
click:点击
mouse:鼠标

😒注意:平日里鼠标单击事件经常和按钮挂钩,但并不是只能用在按钮上,任何元素都是可以添加鼠标事件的。

onclick事件

下面用div标签模拟一下onclick事件,说明一下不是只使用于按钮

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>text</title>

    <style type="text/css">
        #text{
            text-align:center;
        }

        #text:hover{
            color:pink;
            cursor:pointer;
            text-decoration:underline;
        }
    </style>
    <script type="text/javascript">
        window.onload = function(){
            var text = document.getElementById('text');
            text.onclick = function(){
                alert("傻逼");
            }
        }
    </script>

</head>
<body>

<div id="text">哈哈哈</div>

</body>
</html>

在这里插入图片描述
在这里插入图片描述

onmouseover和onmouseout

可以从字面上发现其怎么用,on后面指出事件,mouse鼠标,over覆盖,也就是鼠标移动到这个元素时进行的事件过程;反之onmouseout就是鼠标移出该元素进行的事件过程。

注意:是碰到元素,不是元素中的文本内容;

测试:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>text</title>

<!--    <style type="text/css">-->
<!--        #text{-->
<!--            text-align:center;-->
<!--        }-->

<!--        #text:hover{-->
<!--            color:pink;-->
<!--            cursor:pointer;-->
<!--            text-decoration:underline;-->
<!--        }-->
<!--    </style>-->
    <script type="text/javascript">
        window.onload = function(){
            var text = document.getElementById('text');
            text.onmouseover = function (){
                this.style.color = "pink"
                this.style.textAlign = "center"
            }
            text.onmouseout = function (){
                this.style.color = "black"
            }
        }
    </script>

</head>
<body>

<div id="text">哈哈哈</div>

</body>
</html>

这是div元素这个“默认盒子”:
在这里插入图片描述

当鼠标移动到该元素上时(不移动到文本内容上也可以),也就是该“盒子”上:
在这里插入图片描述

onmousedown和onmouseup

和上面差不多;只不过这是对应着鼠标点击后和鼠标松开对应的事件过程。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>text</title>

<!--    <style type="text/css">-->
<!--        #text{-->
<!--            text-align:center;-->
<!--        }-->

<!--        #text:hover{-->
<!--            color:pink;-->
<!--            cursor:pointer;-->
<!--            text-decoration:underline;-->
<!--        }-->
<!--    </style>-->
    <script type="text/javascript">
        window.onload = function(){
            var text = document.getElementById('text');
            text.onmousedown = function (){
                this.style.color = "pink"
                this.style.textAlign = "center"
            }
            text.onmouseup = function (){
                this.style.color = "black"
                this.style.textAlign = "left"
            }
        }
    </script>

</head>
<body>

<div id="text">哈哈哈</div>

</body>
</html>

测试效果:点的时候哈哈哈在中间,不点在左边。

页面事件

一般来说,想要获取某个节点,然后又想要HTML代码和JavaScript代码分开。这个时候就应该要想到页面事件。在JavaScript中,常用页面事件只有两个,一个是onload,一个是onbeforeunload

onload

首先代码是从上向下执行的,如果想要等代码执行完再执行一段代码,这个时候onload就派上用场了。如果节点还未加载,就直接加载函数,然后函数里面调用了该节点那肯定会出问题的,onload可以让代码加载完再去执行该函数。

其实前面的代码都用了这个页面事件,所以这里就不举例了。语法就是:

window.onload = function(){}

onbeforeunload

该事件在关闭该页面时会发生事件过程。

<!DOCTYPE html> 
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script>
        window.onload = function () 
        {
            alert("欢迎!");
        }
        window.onbeforeunload = function (e) 
        {
            e.returnValue = "记得下来再来喔!";
        }
    </script>
</head>
<body>
</body>
</html>

this

根据事件的语法:

obj.事件名 = function(){}

function()大括号中用的this就和obj是等价的。(例如obj.valuethis.value等价)

其他事件

可以看Javascript基础进行更多事件的了解。

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

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

相关文章

疫情在家用Python搞副业,也能月入10000+

下班副业实现经济自由的时候&#xff0c;你还在床上躺着&#xff0c;天天摆烂吗&#xff1f;这样的生活真的是你想要的吗&#xff1f; 疫情在家接一些Python相关的小单子&#xff0c;既能给自己练手&#xff0c;还能赚是真香 从零基础开始真的一台电脑和一部手机就可以✅ 一…

NC65 计算人员离退休的天数和日期(数据库 sql server)

最近公司需要人力资源部需要写一张报表&#xff0c;计算人员距离退休的天数和日期&#xff0c;现附上自己写是sql脚本&#xff08;仅供参考&#xff09;&#xff0c;如下&#xff1a; select a.pk_psndoc,--员工信息主键a.code …

程序员快速成长的核心原则

如何快速成长、持续成长、提升技术&#xff0c;是每一个程序员都绕不开的话题。 当你还在困惑职业发展方向时&#xff0c;别人已经找好了接单平台开始兼职&#xff1b;当你还在苦恼bug修不好时&#xff0c;别人已经可以承接整个软件外包项目了&#xff1b;当你还在思考怎么让技…

MongoDB 命令行操作

通过 MongoDB 数据库安装详细教程 安装完成了MongoDB&#xff0c;MySQL数据库是通过sql命令操作数据&#xff0c;而MongoDB是通过类Javascript函数的查询方式进行数据库的操作&#xff0c;在使用MongoDB来操作数据库之前先来简单的了解MongoDB操作注意&#xff1a; MongoDB数据…

使用线性光耦合器的模拟隔离

介绍 模拟隔离仍然广泛应用于电机驱动、功率监测等&#xff0c;其中应用通常使用廉价的模拟电压控制来进行速度、强度或其他调整。 HCNR201/200模拟光耦合器通常被添加到&#xff0c;用于隔离应用电路的前端模块中的模拟信号。光耦合器将放置在模拟输入和A/D转换器之间&#…

C++list

1. list的介绍及使用 1.1 list的介绍 1. list是可以在常数范围内在任意位置进行插入和删除的序列式容器&#xff0c;并且该容器可以前后双向迭代。 2. list的底层是双向链表结构&#xff0c;双向链表中每个元素存储在互不相关的独立节点中&#xff0c;在节点中通过指针指向其…

外包出去找工作被歧视,投几个简历都说介意外包,不考虑外包。

说起外包这个话题&#xff0c;一直是职场的热门话题。 关于外包&#xff0c;最多被人讨论的就是歧视方面的。比如&#xff0c;关于门禁权限方面的歧视、关于语言交流上的歧视、关于福利上的歧视等等。 01 外包被歧视的情况确实存在 网传有一腾讯外包员工在脉脉上吐槽自己遭受…

python--内置高阶函数、异常处理;模块与包以及python基础部分的总结

文章目录一、内置高阶函数二、异常处理异常处理机制抛出异常三、模块与包python基础部分的总结一、sort()与sorted()函数的区别二、深拷贝和浅拷贝、is与四、基础部分的脑图总括一、内置高阶函数 map()函数 reduce()函数 filter()函数 sorted()函数 #排序 二、异常处理 Indent…

java基础巩固-宇宙第一AiYWM:为了维持生计,测试篇预热【单元测试、性能测试、灰度发布与回滚】~整起

单元测试【就像买保险&#xff0c;希望自己不要用上】是重构的保护网&#xff1a;单元测试可以为重构提供信心&#xff0c;降低重构的成本。我们要像重视生产代码那样&#xff0c;重视单元测试【元测试&#xff08;Unit Testing&#xff09;是针对程序模块&#xff08;软件设计…

协同过滤CF

算法提出 如果让推荐系统领域的从业者选出业界影响力最大、应用最广泛的模型&#xff0c;那么笔者认为90%的从业者会首选协同过滤。1992年, Xerox的研究中心开发了一种基于协同过滤的邮件筛选系统&#xff0c;用以过滤一些用户不感兴趣的无用邮件。2003 年&#xff0c;Amazon …

MySQL数据表的基础知识

目录 一、增 二、查 a、全列查询 b、指定列查询 c、查询字段为表达式 d、别名查询 e、对查询结果进行去重 f、排序 ​g、条件查询 三、改 四、删 以下操作均以student表为基础&#xff1a; 一、增 insert into 表名 values(...); 例如&#xff1a;新增张三同学的…

举个栗子!Tableau 技巧(247):用震波图(Seismogram)查看数据变化

震波图&#xff08;Seismogram&#xff09;是一种像地震波或声波的图表&#xff0c;通常用于表达数据的变化。乍一看&#xff0c;它有点像 蝴蝶图&#xff08;旋风图&#xff09;&#xff0c;数据都分布在轴的零点两侧&#xff0c;但其实两者完全不同。 如下震波图&#xff0c…

Stm32旧版库函数6——ov2640 串口显示图像 串口中断 使用旧版库 模拟IIC

/******************************************************************************* // // 使用单片机STM32F100C8T6 8 // 晶振&#xff1a;8.00M // 编译环境 Keil uVision4 // 在3.3V的供电环境下&#xff0c;就能运行 // 波特率 115200 // 使用&#xff1a;STM32F100C…

SpringCloud Config 分布式配置中心

分步式系统面临配置问题&#xff1a; 微服务意味着要将单体应用中的业务拆分成一个个子服务&#xff0c;每个服务的粒度相对较小&#xff0c;因此系统中会出现大量的服务。由于每个服务都需要必要的配置信息才能运行&#xff0c;所以一套集中式的、动态的配置管理设施是必不…

浅谈电气火灾监控系统在煤矿高层公寓中的应用分析

摘要&#xff1a; 煤矿高层公寓做为人员高度密集场所&#xff0c;使用的电器种类繁多&#xff0c;一旦发生电气火灾事故&#xff0c; 其严重性和危害性远高于其它场所。文章通过对煤矿公寓电气线路火灾主要形式的分析&#xff0c;对电气火灾监 控系统在煤矿公寓电气火灾预防及…

NLG解码策略

NLG解码策略 自然语言生成&#xff08;Natural Language Generation&#xff0c;简称NLG&#xff09;&#xff0c;是自然语言处理领域的一个重要分支&#xff0c;在文本摘要生成任务中&#xff0c;另一个重要的分支是自然语言理解&#xff08;Natural Language Understanding&…

传奇GOM引擎版本架设

传奇GOM引擎版本架设 传奇GOM引擎版本我们架设游戏需要用到的工具&#xff1a; 版本&#xff08;游戏类型服务端&#xff09;、DBC2000&#xff08;游戏数据库&#xff09;、RAR&#xff08;解压工具&#xff09;、传奇客户端、服务器、网盘 先把这些架设工具准备好&#xff…

性能测试——

目录 测试的分类 性能测试的指标 性能测试需求分析 ​编辑 性能测试计划及方案 ​编辑​编辑 测试用例设计及执行 梳理系统架构 压力测试报告 测试的分类 性能测试的指标 性能测试需求分析 性能测试计划及方案 测试用例设计及执行 估算系统的qps要了解什么&#xff1a; 系…

Hot100-最小路径和

1 前言 1.1 题目描述 给定一个包含非负整数的 m x n 网格 grid &#xff0c;请找出一条从左上角到右下角的路径&#xff0c;使得路径上的数字总和为最小。 说明&#xff1a;每次只能向下或者向右移动一步。 如下图所示&#xff1a; 输入&#xff1a;grid [[1,3,1],[1,5,1…

ConversionService转换服务使用

前言 在最近分析和写的SpringBoot源码分析(面试官&#xff1a;你说说Springboot的启动过程吧(5万字分析启动过程))中&#xff0c;给自己留了一个关于ConversionService的使用的作业&#xff0c;这不就来补作业了。 使用出处 这个转换服务我这里的例子很简单&#xff0c;就是…