JS#3 事件监听

guaiwu_

于 2023-03-02 17:20:22 发布

阅读量388

点赞数

分类专栏： JS HTML 文章标签： javascript 前端 vue.js Powered by 金山文档

本文链接：https://blog.csdn.net/guaiwu_/article/details/129298838

版权

HTML 同时被 2 个专栏收录

14 篇文章 0 订阅

订阅专栏

6 篇文章 0 订阅

订阅专栏

一. 简介

事件:HTML事件是发生在HTML元素上的"事情"

例如:

按钮被点击

鼠标移动到元素之上

按下键盘按键

事件监听: JavaScript 可以在事件被侦测到时执行代码

二. 事件绑定

事件绑定有两种方式

方式一:通过HTML标签中的事件属性进行绑定

方式二:通过DOM元素属性绑定

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件绑定</title>
</head>
<body>
<input type="button" value="按钮1" onclick="on()"><br>

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


<script>
    function on(){
        alert("已点击1");
    }
    document.getElementById("btn").onclick=function(){
        alert("已点击2");
    }



</script>
</body>
</html>

效果展示

三. 常见事件

常见事件说明

事件名说明

onclick 鼠标单击事件

onblur 元素失去焦点

onfocus 元素获得焦点

onload 某个页面或图像被完成加载

onsubmit 当表单提交时触发该事件

onkeydown 某个键盘的键被按下

onmouseover 鼠标被移到某元素之上

onmouseout 鼠标从某元素移开

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>常见事件</title>
</head>
<body>

<form id="register" action="#">
  <input type="text" name="username" >

  <input type="submit" value="提交">

</form>

<script>
  document.getElementById("register").onsubmit = function() {
  //onsubmit 返回true,提交表单  返回false,不提交表单
    return true;
  }

</script>
</body>
</html>