JavaScript中的监听句柄

最新推荐文章于 2024-03-28 14:47:12 发布

酷尔。

最新推荐文章于 2024-03-28 14:47:12 发布

阅读量1k

点赞数 5

分类专栏：网页前端高级编程从入门到精通

本文链接：https://blog.csdn.net/apple_51931783/article/details/122767934

版权

事件监听句柄 HTML事件函数绑定 addEventListener

关键词由CSDN通过智能技术生成

网页前端高级编程从入门到精通专栏收录该内容

59 篇文章 22 订阅

订阅专栏

文章目录

前言
一、效果展示
二、句柄合集
三、添加监听的两种的方式：
- 1.将事件与函数绑定在一起
- 2.先获取元素再添加事件
总结

前言

监听就是触发某事件之后做出的响应,监听句柄是触发某相应的条件

一、效果展示

鼠标聚焦、鼠标移开、鼠标点击等等都可以作为监听句柄
在这里插入图片描述

二、句柄合集

<!-- 
    onchange	HTML 元素改变
    onclick	用户点击 HTML 元素
    onmouseover	用户在一个HTML元素上移动鼠标
    onmouseout	用户从一个HTML元素上移开鼠标
    onkeydown	用户按下键盘按键
    onload	浏览器已完成页面的加载
    onclick 失去焦点
    onfocuse 获取焦点
 -->

三、添加监听的两种的方式：

1.将事件与函数绑定在一起

例如将点击监听句柄与f1函数绑定起来

<!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>Document</title>
</head>
<body>
    <script>
        function f1()
        {
            element=document.getElementById("myimage")
            if(element.src.match("bulbon"))
            {
                element.src="../pic_bulboff.gif"
            }
            else{
                element.src="../pic_bulbon.gif"
            }
        }
    </script>
    <img id="myimage" src="../pic_bulboff.gif" onclick="f1()" alt="" width="100" height="150">
    <p>点击灯泡开关灯</p>
</body>
</html>

2.先获取元素再添加事件

例如
       	var x = document.getElementById("myBtn");
        x.addEventListener("mouseover", myFunction);
        将鼠标覆盖句柄与函数myFunction绑定在一起

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>

</head>
    <body>
            <p>实例使用 addEventListener() 方法在同一个按钮中添加多个事件。</p>
            <button id="myBtn">点我</button>
            <p id="demo"></p>
    <script>
            var x = document.getElementById("myBtn");
            x.addEventListener("mouseover", myFunction);
            x.addEventListener("click", mySecondFunction);
            x.addEventListener("mouseout", myThirdFunction);
            function myFunction() {
                document.getElementById("demo").innerHTML += "Moused over!<br>"
            }
            function mySecondFunction() {
                document.getElementById("demo").innerHTML += "Clicked!<br>"
            }
            function myThirdFunction() {
                document.getElementById("demo").innerHTML += "Moused out!<br>"
            }
            // 监听函数如何传递参数
            document.getElementById("myBtn").addEventListener("click", function() {
                myFunction(p1, p2);
            });
            function myFunction(a, b) {
                 var result = a * b;
                 document.getElementById("demo").innerHTML = result;
            }
    </script>

    </body>
</html>