美文网首页
JS原生绑定事件的3种方式

JS原生绑定事件的3种方式

作者: 梁帆 | 来源:发表于2022-08-10 14:29 被阅读0次

如下代码所示,三个btn代表三种不同的时间绑定方式:

<body>
    <button id="btn1">BTN1</button>
    <button id="btn2">BTN2</button>
    <button onclick="btnAlert">BTN3</button>

    <script type="text/javascript">
        const btn1 = document.getElementById("btn1");
        const btn2 = document.getElementById("btn2");

        btn1.addEventListener("click", () => {
            alert("clicked btn1")
        })

        btn2.onclick = () => {
            alert("clicked btn2")
        }

        function btnAlert() {
            alert("clicked btn3")
        }
    </script>
</body>

在React框架中,比较推荐使用第三种绑定方式——即在标签上指明onClick方法。需要注意这里的区别,React框架中C是大写的,与原生的onclick不同。

相关文章

  • React基础第二节知识点

    1.绑定事件使用原生绑定事件onClick2.绑定事件函数必须传this(原生JS this作用域的问题)3.使用...

  • React-阻止事件冒泡

    react中分为合成事件、原生事件 合成事件:在jsx中直接绑定的事件,如 原生事件:通过js原生代码绑定的事件,...

  • 025 JS事件

    JS事件 ********* 一、事件的两种绑定方式 ******* 1、on事件绑定方式 2、非on事件绑定方式...

  • 2018-10-18

    JS事件 一、事件的两种绑定方式 ******* 1、on事件绑定方式 2、非on事件绑定方式 二、事件参数eve...

  • js事件

    JS事件 事件绑定方式 事件对象 事件传播流 事件代理 一、事件绑定方式 方式一:通过HTML标签行间属性内绑定 ...

  • JavaScript中绑定事件的方法与区别

    简介 在编写网页过程中,我们需要给页面上的元素添加事件(绑定事件)。在 原生JS 中,绑定事件有两种处理方式:DO...

  • JS第六天

    JS事件 一、事件的两种绑定方式 代码示例: 1、on事件绑定方式 2、非on事件绑定方式 二、事件参数event...

  • Vue支持哪些事件 @

    支持如图80个事件 vue只是一个JS框架,v-on或者@这种写法只是提供了便捷的绑定事件方式,没有改变原生的JS...

  • js-------事件绑定的几种方式

    js事件绑定的几种方式

  • 第七节:Vue指令:v-on事件的绑定与问题

    1.理解Vue事件的绑定方式 1.1 原生行内事件绑定 说明: vue采用行内事件绑定的方式. 因此在学习vue事...

网友评论

      本文标题:JS原生绑定事件的3种方式

      本文链接:https://www.haomeiwen.com/subject/bvttgrtx.html