JS事件-事件绑定&常见事件

一、事件监听
1、事件：HTML事件是发生在HTML元素上的事情，比如，按钮被点击、鼠标移动到元素上、按下键盘按钮。
2、事件监听：JS可以在事件被监测到时执行代码。
二、事件绑定
方式一：通过HTML标签中的事件属性进行绑定

  <input type="button" onclick="on()" value="按钮1">
    <script>
        function on(){
            alert('我被点击了！')
        }

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

<input type="button" id="btn" value="按钮2">
    <script>
     document.getElementById('btn').onclick=function(){    
        }
  </script>

案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=\, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="button" id="btn1" value="事件绑定1" onclicj="on()">
    <input type="button" id="btn1" value="事件绑定1" onclicj="on()">
    <script>
        function on(){
            alert("按钮1被点击了")
        }
        document.getElementById('btn2').onclick=function(){
            alert("按钮2被点击了")
        }
    </script> 
</body>
</html>

三、JS常见事件
onclick鼠标点击事件
onblur元素失去焦点
onfocus元素获得焦点
onload某个页面或图像被完成加载
onsubmit当表单提交时触发该事件
onkeydown某个键盘的键被按下
onmouseover鼠标被移到某元素之上
onmouseout鼠标从某元素移开

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS-事件-常见事件</title>
</head>
<body onload="load()">
    <form action="" style="text-align:center;" onsubmit="subfn()">
        <input type="text" name="username" onblur="bfn()" onfocus="ffn()" onkeydown="kfn()">
        <input id="submitBtn" type="submit" value="提交">
        <input id="clickBtn" type="button" value="单击事件" onclick="fn1()">
    </form>
<br><br><br>
<table width="800px" border="1" cellspacing="0" align="center" onmouseover="over()" onmouseout="out()">
    <tr>
        <th>学号</th>
        <th>姓名</th>
        <th>分数</th>
        <th>评语</th>
    </tr>
    <tr align="center">
        <td>001</td>
        <td>张三</td>
        <td>90</td>
        <td>很优秀</td>
    </tr>
</table>
    <script>
        //onload:页面/元素加载完成后触发
        function load(){
             console.log("页面加载完成...")
        }
        //onclick：鼠标点击事件
        function fn1(){
            console.log("我被点击了");
        }
        //onblur:失去焦点事件
        function bfn(){
            console.log("失去焦点");
        }
        //onfocus:元素获得焦点
        function ffn(){
            console.log("获得焦点")
        }
        //onkeydown:某个键盘的键被按下
        function kfn(){}
        console.log("键盘被按下了")
        //onmouseover:鼠标移入元素
        function over(){
            console.log("鼠标移入了")
        }
        //onmouseout:鼠标移出元素
        function out(){
            console.log("鼠标移出了")
        }
        //onsubmit:提交表单事件
        function subfn(){
            console.log("表单被提交了")
        }
    </script>
</body>
</html>
posted @ 2026-01-06 23:49  琬六岁  阅读(2)  评论(0)    收藏  举报