首页 > 编程语言 >JavaScript事件

JavaScript事件

时间:2023-12-27 10:48:05浏览次数:37  
标签:12 JavaScript 文本框 value 事件 hello

事件

JavaScript事件,就是用户或浏览器本身的某种行为,一般是用户对页面的一些动作引起的,比如用户的点击某个链接、在文本框中输入文本等。

绑定对应的事件

方法一:直接在元素上面添加一个事件属性

语法:

方法二:在js中找到dom添加事件

语法:

方法三:使用addEventListener

 语法:

注意:

①第一个参数表示事件类型,不要使用on。

②第二个参数表示事件触发的函数。

 常用的事件

 鼠标事件

 注意:

如果绑定事件的dom元素存在子元素,比如div嵌套
mouseover/mouseout 是在进入子元素,会再次触发事件。 mouseenter/mouseleave 在进入子元素,不会再次触发事件。

表单事件

 键盘事件

 窗口事件

 综合案例

页面打开时,文本框内默认为hello,当光标聚焦到文本框时,默认文本hello消失,

文本框后面出现“至少6-12位”的用户名输入需求,且输入的用户名字体颜色为红色。

分析:

页面初始化后:
将出现文本框<input type="text"/>以及<span>标签用于输出聚焦后的内容,并且其属性value的值为hello。

当文本框获取聚焦后:
文本框中获取聚焦事件onfocus,事件里将<span>标签中添加文本“至少6-12位”,且将文本框的css样式color值为red,且将属性value值为空。

代码展示:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <form action="../课堂/1.html" method="get" >
            用户名:<input type="text" value="hello" id='name'/><span></span>
        </form>
    </body>
    <script>
        document.querySelector("#name").onfocus=function(){
            let a = document.querySelector("#name");
            a.value="";
            a.nextElementSibling.innerHTML='至少6-12位';
            a.style.color='red';
        }
    </script>
</html>

 

标签:12,JavaScript,文本框,value,事件,hello
From: https://www.cnblogs.com/gzyhrc/p/17927890.html

相关文章

  • Unreal入门,开关03,利用事件调度器来制作电源总开关
    这里总开关的实现方式是在总开关ActorPowerOff上添加事件调度器PowerOff,其它需要响应这个事件的Actor需要自己初始化相应的事件,并作出合适的处理即可,这里是将PowerOff事件关联上ToggleLight即可实现跟随主开关的开关效果1.创建基于Actor的蓝图类,电源总开关BP_PowerSwitch添......
  • 创建一个双模式跨运行时的 JavaScript 包
    本文将指导你发布双模式、跨运行时的JavaScript包。了解如何创建与ESM和CommonJS以及Node.js、Deno和浏览器等不同运行时兼容的库。随着JavaScript开发的不断发展,人们越来越需要能在多种环境中运行的强大依赖包。在本文中,我们将探讨如何发布跨运行时、双模式的JavaScr......
  • Windows事件日志
    本文主旨:了解Windows事件日志的相关信息,以便于后续进行Windows日志分析。事件日志简介事件日志记录[1]为(的应用程序和操作系统)记录重要软件和硬件事件提供了一种标准的集中式方法。事件日志记录服务记录来自各种源的事件,并将其存储在名为事件日志的单个集合中。事件日志......
  • ArcGIS API for JavaScript 4.x 免登录调用arcgis online私有服务
    APIkeys|ArcGISDevelopers 前言 本来以为普通用户调用服务只能依靠登录,仔细研究了一下可以通过key来实现免登录调用服务。背景最近在做一个BIM结合GIS的Demo,先通过arcgispro将.rvt文件配准到实际位置,然后打包成slpk文件,拖拽到arcgisonline发布出来,最后在前端加载。 ......
  • vue3学习基础之事件绑定
    事件绑定<scriptsetup>import{nextTick,ref}from"vue";functionclickA(){console.log("点击了a标签,点击事件传递到了外层p标签");}functionclickStop(){console.log("点击了a标签,点击事件停止向外层传递");}functionclickOnce(){console.log......
  • 在 Python 中,​​?:​​​ 符号并不是一个有效的运算符。这个符号在其他一些编程语言
    在Python中,?:符号并不是一个有效的运算符。这个符号在其他一些编程语言中,如JavaScript或C,被称为条件(三元)运算符。然而,在Python中,我们使用if-else表达式来达到相同的目的。例如:x=10y=20print("xisgreater")ifx>yelseprint("yisgreater")在上述代码中,如果......
  • JavaScript基础语句和window对象
    ifelse语句varsum=190varyouhuisum//赋予一个容器if(sum>=200){youhuisum=sum-10console.log(111)}else{//如果上面if不满足则都执行else语句......
  • JavaScript读写FM1208 CPU卡源码
    本示例使用的发卡器:<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv=&quo......
  • JavaScript读写15693 ICod2 卡源码
    本示例使用设备:<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="......
  • HarmonyOS应用事件打点开发指导
    HarmonyOS应用事件打点开发指导简介传统的日志系统里汇聚了整个设备上所有程序运行的过程流水日志,难以识别其中的关键信息。因此,应用开发者需要一种数据打点机制,用来评估如访问数、日活、用户操作习惯以及影响用户使用的关键因素等关键信息。HiAppEvent是在系统层面为应用开发者提......