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

冷不防 2022-12-29 14:25 284阅读 0赞

##### JavaScript绑定事件的方法 #####

要想让 JavaScript 对用户的操作作出响应，首先要对 DOM 元素绑定"事件处理函数"。所谓事件处理函数，就是处理用户操作的函数，不同的操作对应不同的名称。

在JavaScript中，有三种常用的绑定事件的方法：

*  在DOM元素中直接绑定；
 *  在JavaScript代码中绑定；
 *  绑定事件监听函数。

##### 1.在DOM元素中直接绑定 #####

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

function show(){ 
    　　console.log('show');
    }
    
    function print(){ 
    　　console.log('print');
    }
    
    <button onclick="show()" id="btn1" onclick="print()">html标签事件绑定</button>
    //触发的方法只有show方法
    
    <button onclick="show();print()" id="btn1">html标签事件绑定</button>
    //一个事件，触发两个方法

##### 2.在JavaScript代码中绑定 #####

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

<button id="btn2">js事件绑定</button>
    
     document.getElementById("btn2").onclick = show;
     document.getElementById("btn2").onclick = print;
    
    //只能触发print方法，如果需要同时触发两个方法，只能使用事件监听,也就是第三种绑定方案.

##### 3.绑定事件监听函数 #####

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

<button id="btn3">事件监听</button>      
    
    //show和print两个方法都可以触发
    document.getElementById("btn3").addEventListener("click",show);
    document.getElementById("btn3").addEventListener("click",print);
    
    //移除事件监听
    document.getElementById("btn3").removeEventListener("click");

发表评论取消回复

表情：

评论列表（有 0 条评论，284人围观）

还没有评论，来说两句吧...

相关阅读

相关组件绑定原生事件

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

电玩女神/ 2023年07月11日 05:57/ 0 赞/ 57 阅读

相关原生JS事件绑定的三种方式

JavaScript绑定事件的方法要想让 JavaScript 对用户的操作作出响应，首先要对 DOM 元素绑定"事件处理函数"。所谓事件处理函数，就是处理用户操作的函

冷不防/ 2022年12月29日 14:25/ 0 赞/ 285 阅读

相关 JQuery事件绑定方式

JQuery事件绑定方式 <!DOCTYPE html> <html> <head> <meta charset="utf-8">

谁践踏了优雅/ 2022年12月18日 05:59/ 0 赞/ 218 阅读

相关 javascript事件绑定的三种方法

要想让 JavaScript 对用户的操作作出响应，首先要对 DOM 元素绑定事件处理函数。所谓事件处理函数，就是处理用户操作的函数，不同的操作对应不同的名称。在J

Love The Way You Lie/ 2022年07月15日 22:24/ 0 赞/ 167 阅读

相关 jQuery绑定事件的四种方式

jQuery提供了多种绑定事件的方式，每种方式各有其特点，明白了它们之间的异同点，有助于我们在写代码的时候进行正确的选择，从而写出优雅而容易维护的代码。下面我们来看下jQuer

以你之姓@/ 2022年06月16日 04:52/ 0 赞/ 184 阅读

相关【JS】原生JS事件绑定onclick和addEventListener

onclick绑定方式优点： \- 简洁 \- 处理事件的this关键字指向当前元素缺点： \- 不能对事件捕获或事件冒泡进行控制，只能使用事件冒泡，

女爷i/ 2022年05月27日 04:42/ 0 赞/ 596 阅读

相关 DOM绑定事件的三种方式

参考[事件绑定原理][Link 1] 1. 在DOM中绑定。在DOM中绑定有两种方式: 直接在html中onXxxx = "jsCode" 在html中on

旧城等待，/ 2022年05月25日 14:11/ 0 赞/ 199 阅读

相关组件绑定原生事件

,//在子组件里声明方法属于原生事件绑定，且执行子组件里的方法。如果也在父组件里写事件，则不会执行 <!DOCTYPE html> <html> <head>

╰+攻爆jí腚メ/ 2022年05月23日 22:10/ 0 赞/ 226 阅读

相关 JS绑定事件

开发工具与关键技术：DW 作者：文泽钦撰写时间：2019年1月17日目的：实现一些js简单绑定按钮事件分享一些简单的js绑定事件给一些刚入门的网友玩玩，代码简

深藏阁楼爱情的钟/ 2022年03月26日 11:20/ 0 赞/ 286 阅读

相关 js事件绑定

原生的js绑定事件一般有两种：第一种是: ele.onclick = fn(); 这种方法只能绑定一次，再次绑定就会把原来的监听覆盖掉，解除绑定也很简单

矫情吗；*/ 2022年01月29日 05:43/ 0 赞/ 380 阅读