原生Js事件绑定的三种方式

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

wuliangfan

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

阅读量1k

点赞数 1

分类专栏：原生JS

本文链接：https://blog.csdn.net/wuliangfan/article/details/96427988

版权

原生JS 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

本文详细介绍了HTML中不同的事件绑定方式，包括直接在HTML标签中通过属性赋值绑定事件、使用JavaScript进行事件绑定以及利用事件监听实现事件绑定。通过具体实例展示了不同绑定方式的特点及其触发效果。

摘要由CSDN通过智能技术生成

html标签事件绑定：属性赋值，这个在该元素的properties属性中可以查到，也可以在事件监听中看到

<script>
    function show(){
　　    console.log('show');
    }

    function print(){
　　    console.log('print');
    }
</script>

<button onclick="show()" id="btn1" onclick="print()">html标签事件绑定</button>
//触发的方法只有show方法

<button onclick="show();print()" id="btn1">html标签事件绑定</button>
//一个事件，触发两个方法

js事件绑定：属性赋值，这个在该元素的properties属性中可以查到，也可以在事件监听中看到

<button id="btn2">js事件绑定</button>

<script>
     document.getElementById("btn2").onclick = show;
     document.getElementById("btn2").onclick = print;

    //只能触发print方法，如果需要同时触发两个方法，只能使用事件监听
</script>

事件监听：只可以在该元素的事件监听中看到

<button id="btn3">事件监听</button>      

<script>
    //show和print两个方法都可以触发
    document.getElementById("btn3").addEventListener("click",show);
    document.getElementById("btn3").addEventListener("click",print);

    //移除事件监听
    document.getElementById("btn3").removeEventListener("click");
</script>