【JavaWeb】Day11.JavaScript事件监听

A仔不会笑

已于 2024-03-15 21:44:35 修改

阅读量236

点赞数 9

分类专栏： JavaWeb 文章标签： javascript 开发语言 ecmascript

于 2024-03-15 21:43:38 首次发布

本文链接：https://blog.csdn.net/m0_74197695/article/details/136749738

版权

JavaWeb 专栏收录该内容

87 篇文章 0 订阅

订阅专栏

事件监听

事件：HTML事件是发生在HTML元素上的 “事情”。

比如：

按钮被点击
鼠标移动到元素上
按下键盘按键

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

事件绑定

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

<input type="button" onclick="on()" value="按钮1">

<script>
    function on(){
        alert('我被点击了!');
    }
</script>

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

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

<script>
    document.getElementById('btn').onclick=function(){
        alert('我被点击了!');
    }
</script>

完整代码展示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS-事件-事件绑定</title>
</head>

<body>
    <input type="button" id="btn1" value="事件绑定1" onclick="on()">
    <input type="button" id="btn2" value="事件绑定2">
</body>

<script>
    function on(){
        alert("按钮1被点击了...");
    }

    document.getElementById('btn2').onclick = function(){
        alert("按钮2被点击了...");
    }

</script>
</html>

常见事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <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="b1" type="submit" value="提交">

        <input id="b1" 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>
        <tr align="center">
            <td>002</td>
            <td>李四</td>
            <td>92</td>
            <td>优秀</td>
        </tr>
    </table>
</body>
<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(){
        alert("表单被提交了...");
    }
</script>
</html>