【JS019】原生JS事件绑定的三种方式

最新推荐文章于 2023-04-12 11:11:45 发布

Commas.KM

最新推荐文章于 2023-04-12 11:11:45 发布

阅读量373

点赞数 1

分类专栏： javascript 文章标签： javascript 前端 html5

本文链接：https://blog.csdn.net/qq_35844043/article/details/121140105

版权

javascript 专栏收录该内容

27 篇文章 2 订阅

订阅专栏

日期：2021年11月04日
作者：Commas
签名：(ง •_•)ง 积跬步以致千里,积小流以成江海……
注释：如果您觉得有所帮助，帮忙点个赞，也可以关注我，我们一起成长；如果有不对的地方，还望各位大佬不吝赐教，谢谢^ - ^
1.01³⁶⁵ = 37.7834；0.99³⁶⁵ = 0.0255
1.02³⁶⁵ = 1377.4083；0.98³⁶⁵ = 0.0006
如果您想了解更多有关javascript的知识，那么请点《javascript学习的奇妙之旅》

一、在HTML标签中指定

在这里插入图片描述

在HTML标签中指定事件（内置函数）

<div onclick="alert('在HTML标签中指定的事件')">
	在HTML标签中指定事件（内置函数）
</div>

在HTML标签中指定事件（自定义函数）

<div onclick="eventHandler()">
	在HTML标签中指定事件（自定义函数）
</div>

二、在Javascript中绑定

在这里插入图片描述

在Javascript中绑定事件

function eventHandler(){
    alert("可以触发点击事件");
};

// 在Javascript中绑定
document.getElementById('d1').onclick = eventHandler;

在Javascript中再次绑定事件，会覆盖之前的绑定事件

function eventHandler(){
    alert("可以触发点击事件");
}
function eventHandler2(){
    alert("可以触发点击事件2");
}

// 在Javascript中绑定
document.getElementById('d1').onclick = eventHandler;
// 再次绑定事件,覆盖
document.getElementById('d1').onclick = eventHandler2;

三、在Javascript中监听

在这里插入图片描述

在Javascript中监听，首次监听

function eventHandler(){
    alert("可以触发点击事件");
}

// 在Javascript中监听
document.getElementById('d2').addEventListener('click',eventHandler)

在Javascript中监听，再增加一个监听

function eventHandler(){
    alert("可以触发点击事件");
}
function eventHandler2(){
    alert("可以触发点击事件2");
}

// 在Javascript中监听
document.getElementById('d2').addEventListener('click',eventHandler)
// 再增加一个监听
document.getElementById('d2').addEventListener('click',eventHandler2)

四、3种JS事件绑定的源码

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

    <style>
        div {
            height: 50px;
            line-height: 50px;
            margin-top: 10px;
            background-color: #ccc;
        }
    </style>
</head>
<body>
    <div onclick="alert('在HTML标签中指定的事件')">
        在HTML标签中指定事件（内置函数）
    </div>
    <div onclick="eventHandler()">
        在HTML标签中指定事件（自定义函数）
    </div>

    <div id="d1">在Javascript中绑定事件</div>
    <div id="d2">在Javascript中监听事件</div>


    <script>
        function eventHandler(){
            alert("可以触发点击事件");
        }
        function eventHandler2(){
            alert("可以触发点击事件2");
        }

        // 在Javascript中绑定
        document.getElementById('d1').onclick = eventHandler;
        document.getElementById('d1').onclick = eventHandler2;

        // 在Javascript中监听
        document.getElementById('d2').addEventListener('click',eventHandler)
        document.getElementById('d2').addEventListener('click',eventHandler2)
    </script>
</body>
</html>

版权声明：本文为博主原创文章，如需转载，请给出：
原文链接：https://blog.csdn.net/qq_35844043/article/details/121140105

Commas.KM

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
【JS019】原生JS事件绑定的三种方式

日期：2021年11月04日作者：Commas签名：(ง •_•)ง 积跬步以致千里,积小流以成江海……注释：如果您觉得有所帮助，帮忙点个赞，也可以关注我，我们一起成长；如果有不对的地方，还望各位大佬不吝赐教，谢谢^ - ^1.01365 = 37.7834；0.99365 = 0.02551.02365 = 1377.4083；0.98365 = 0.0006如果您想了解更多有关javascript的知识，那么请点《javascript学习的奇妙之旅》文章目录一、在HTML标签中指定二.
复制链接

扫一扫