JS事件绑定

最新推荐文章于 2024-03-31 09:22:06 发布

qq_54424733

最新推荐文章于 2024-03-31 09:22:06 发布

阅读量340

点赞数 8

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/qq_54424733/article/details/136121045

版权

1、事件绑定

事件：HTML事件是发生在HTML元素上的“事情”。eg：按钮被点击、鼠标移到元素上、按下键盘按键。

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

两种事件绑定方式：

2、常见事件

eg：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</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 type="submit" value="提交">
        <input 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" class="data">
            <th>001</th>
            <th>里斯</th>
            <th>99</th>
            <th>优秀</th>
        </tr>
        <tr align="center" class="data">
            <th>002</th>
            <th>张三</th>
            <th>99</th>
            <th>优秀</th>
    </table>
    <br>

</body>
<script>
    //onload:页面/元素加载完成后触发的
    function load(){
        console.log("页面加载完成。。。");
    }
    //onclick:鼠标点击事件
    function fn1(){
        console.log("我被点击了。。。");
    }
    //onblur:失去焦点事件
    function bfn(){
        console.log("失去焦点");
    }
    //onfocus:元素获得焦点
    function ffn(params) {
        console.log("获得焦点");
    }
    //onkeydown:键盘被按下
    function kfn(params) {
        console.log("键盘被按下");
    }
    //onmouseover:鼠标移动到元素之上
    function over(params) {
        console.log("鼠标移入了");
    }
    //onmouseout：鼠标移出某元素
    function out(params) {
        console.log("鼠标移出了");
    }
    //onsubmit():提交表单事件 
    function subfn(params) {
        alert("表单被提交了");
    }

</script>

</html>

注：表单提交时，提交到的是当前页面，如果用log写“表单被提交”的话，在控制台不会输出。

所以用alert写，才会出现提醒效果。