JS事件监听

事件绑定

  • 方式一:通过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>

代码

常见事件

鼠标单击事件onclick


<body>
<!--方式一：通过标签的属性来进行事件绑定-->
<input type="button" name="btn1" value="事件绑定1" onclick="on()">
<input type="button" name="btn2" value="事件绑定2">


<!--事件绑定-->
<script>
    function on() {
        alert("按钮1被点击了");
    }

    /*通过DOM元素属性绑定*/
    document.getElementById("btn2").onclick=function () {
        alert("按钮2被点击了");
    }


</script>

</body>

其他

image


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <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="b2" type="button" value="单击事件" onclick="fn1()">

</form>
<br><br><br>

<table width="800px" border="1" cellspacing="0" align="center" onmouseover="over()" onmouseout="out()">
    <tr align="center">
        <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>

<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>

</body>
</html>

案例

要求
image


<script>
    //1.点击"点亮"按钮，点亮灯泡；熄灭按钮，熄灭灯泡
    function on() {
        //获取img元素
       var img = document.getElementById('light');
       //修改src
        img.src="../../img/on.gif";
    }

    function off() {
        //获取img元素
        var img = document.getElementById('light');
        //修改src
        img.src="../../img/off.gif";
    }

    // 2.输入框聚焦变成小写，离焦转大写
    function lower() {//小写
      var name =  document.getElementById('name');
        name.value= name.value.toLowerCase();
    }
    function upper() {//大写
        var name =  document.getElementById('name');
        name.value= name.value.toUpperCase();
    }

    //3.全选：所有复选框选中；  反选：所有复选框未选中

    function checkAll() {
        var hobby=document.getElementsByName('hobby');
        for (let i = 0; i < hobby.length; i++) {
          const  element=hobby[i];
          element.checked =true;
        }
    }

    function reverse() {
        var hobby=document.getElementsByName('hobby');
        for (let i = 0; i < hobby.length; i++) {
            const  element=hobby[i];
            element.checked =false;
        }
    }


</script>
posted @ 2023-04-08 22:17  流浪猫老大  阅读(163)  评论(0)    收藏  举报