JavaScript中添加监听句柄的方式

更新时间：2022年02月25日 09:42:28 作者：酷尔。

这篇文章主要介绍了JavaScript中添加监听句柄的方式，监听就是触发某事件之后做出的响应,监听句柄是触发某相应的条件，下面关于添加监听句柄的方式的详细内容，需要的朋友可以参考一下，希望对你有所帮助

一、效果展示

鼠标聚焦、鼠标移开、鼠标点击等等都可以作为监听句柄

二、句柄合集

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>

总结:

两种监听方式均可以达到效果,个人认为先获取后添加的句柄监听使用更为方便。

到此这篇关于JavaScript中添加监听句柄的方式的文章就介绍到这了,更多相关JavaScript监听句柄内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

详解如何在Javascript和Sass之间共享变量
这篇文章主要介绍了详解如何在Javascript和Sass之间共享变量，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-11-11
从JavaScript纯函数解析最深刻的函子 Monad实例
这篇文章主要为大家介绍了从JavaScript纯函数解析最深刻的函子 Monad实例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-10-10
JS树形结构根据id获取父级节点元素的示例代码
这篇文章主要介绍了JS树形结构根据id获取父级节点元素,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2023-05-05
一文带你详细理解uni-app如何构建小程序
uni-app是近年来一种新兴的多端混合开发框架,适合开发跨平台应用,方便多端运行,下面这篇文章主要给大家介绍了关于uni-app如何构建小程序的相关资料,需要的朋友可以参考下
2022-11-11
MutationObserver监视对DOM 树所做更改的功能妙用
这篇文章主要为大家介绍了MutationObserver监视对DOM 树所做更改的功能妙用详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-03-03
JS从数组中随机获取一个值的常用写法
这篇文章主要介绍了JS从数组中随机获取一个值的常用写法,需要的朋友可以参考下
2023-07-07
js实现简单的省市县三级联动效果实例
这篇文章主要介绍了js实现简单的省市县三级联动效果,以完整实例形式分析了JavaScript实现省市县三级联动效果的具体步骤与相关实现技巧,需要的朋友可以参考下
2016-02-02
Add Formatted Text to a Word Document
Add Formatted Text to a Word Document...
2007-06-06
PHP捕捉异常中断的方法
相信每位PHP程序员都知道，当PHP程序出现异常情况，如出现致命错误、超时或者不可知的逻辑错误导致程序中断，这个时候就可以用 register_shutdown_function进行异常处理。下面本文给出了详细的示例代码，有需要的朋友们下面来一起看看吧。
2016-10-10
fullCalendar日历插件玩法示例解析
这篇文章主要介绍了fullCalendar日历插件玩法示例解析,包括Fullcalendar安装,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
2024-01-01