原生Js绑定事件

    技术2024-11-10  7

    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>
    Processed: 0.022, SQL: 9