JavaScript中绑定事件的几种方式

最新推荐文章于 2024-02-09 18:10:17 发布
最新推荐文章于 2024-02-09 18:10:17 发布
阅读量1.1k 收藏 2
点赞数
分类专栏： JavaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hero_cheng/article/details/53997413
版权
本文介绍了JavaScript中绑定事件的三种方式，包括DOM中直接绑定、JavaScript代码中绑定和使用事件监听函数。重点讨论了addEventListener()和attachEvent()的使用方法，这两种方法分别在标准浏览器和IE8及以下版本中被支持。
摘要由CSDN通过智能技术生成

  在JavaScript中绑定事件的方式有以下几种，分别是：1.DOM中绑定事件；2.在JavaScript代码中绑定事件；3.绑定事件监听函数。

1.DOM中绑定事件

1）添加onclick点击事件，自定义load()函数

<input type="submit" value="Login"  οnclick="load();">

2）调用load()函数，绑定onclic事件

function load(){
   alert("dom元素中绑定事件");
}

最低0.47元/天 解锁文章
落花流水6
关注
专栏目录
026--Hbuilder--js--事件的绑定
weixin_45515187的博客
10-24 258
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>你好</title> <link rel="shortcut icon" href="//www.baidu.com/favicon.ico" type="image/x-icon"/> <style> *{ margin:0; padding:0; }
JavaScript中利用jQuery绑定事件的几种方式小结
10-22
本文将介绍几种在JavaScript中利用jQuery库来绑定事件的方法，同时也包括在不使用jQuery的情况下，利用纯JavaScript实现事件绑定的方式。 ### 1. 使用jQuery绑定事件 #### 方法一：直接使用jQuery对象的事件方法 ...
JavaScript绑定事件的方法[3种]
xyjikl
12-07 2352
要想让 JavaScript 对用户的操作作出响应，首先要对 DOM 元素绑定事件处理函数。所谓事件处理函数，就是处理用户操作的函数，不同的操作对应不同的名称。 在JavaScript中，有三种常用的绑定事件的方法： 在DOM元素中直接绑定；在JavaScript代码中绑定；绑定事件监听函数。 一. 在DOM元素中直接绑定 这里的DOM元素，可以理解为HTML标签。JavaSc
js中绑定事件的几种方法和JQ中绑定事件的方法
HZ514
07-21 1310
js中绑定事件可以通过以下三个方式 &lt;!DOCTYPE html&gt; &lt;html&gt;     &lt;head&gt;         &lt;meta charset="UTF-8"&gt;         &lt;title&gt;&lt;/title&gt;     &lt;/head&gt;     &lt;body&gt;   
javascript 事件的两种绑定方法
weixin_33950035的博客
02-04 90
javascript 事件的两种绑定方法 <script type="text/javascript">function getEvent(event){ alert("事件类型"+event.type); } document.write("单击......"); document.onmousedown=...
Javascript绑定事件的两种方式的区别
weixin_30483013的博客
07-27 158
命名函数 <input type="button" onclick="check()" id="btn"/> <script type="text/javascript"> function check(){ //code } </script> 匿名函数 <input type="button" id="bt...
Javascript中绑定click事件的四种方式介绍
12-04
总结来说，JavaScript中绑定`click`事件有以下几种常见方法： - `onclick`属性：适合简单的交互，但不推荐用于复杂项目。 - 直接赋值给`onclick`：适用于单个事件处理函数，分离了HTML和JavaScript。 - 匿名函数...
JavaScript动态添加数据到表单并提交的几种方式
10-16
以上就是本文介绍的关于JavaScript动态添加数据到表单并提交的几种方式。每种方式都有其适用的场景，开发者可以根据实际需要选择合适的方法来实现动态数据的添加与提交。这些技术对于网页开发人员来说是非常实用的...
Javascript编程中几种继承方式比较分析
10-23
随后，文章介绍了几种主流的继承方式： 1. 原型链继承是JavaScript中最基本的继承方式。它涉及到一个子类型的原型被设置为一个父类型实例的操作。通过这种方式，子类型可以继承父类型的属性和方法。但是，原型链...
JavaScript几种事件绑定的方式
mingjuna2010的博客
11-17 1095
事件绑定的几种方式 在Javascript中，事件绑定一共有3种方式： ① 行内绑定 ② 动态绑定 ③ 事件监听 1、行内绑定 基本语法： &lt;标签 属性列表 事件=”事件的处理程序” /&gt; 例： 示例代码： 以上代码就是最典型的行内绑定，虽然可以完成我们需要的功能，但是其把结构+样式+行为都绑定在同一个标签中，不利于后期维护。 2、动态绑定 基本语法： dom对象.事件 = 事件的处...
Javascript事件绑定的几种方式
darkread的专栏
06-06 1万+
Javascript事件绑定的几种方式 来源：http://www.cnblogs.com/rainman/archive/2009/02/11/1387955.html 上篇文章讲到了事件绑定的3中常用方法：传统绑定、W3C绑定方法、IE绑定方法。但是，在实际开发中对于我们来讲重要的是需要一个通用的、跨浏览器的绑定方法。如果我们在互联网上搜索一下会发现许多方法，一下是比较知名的几种方
el-table自定义label 使用h函数 绑定事件和数据
放飞的博客
03-12 2903
Loading.vue <template> <div v-if="show" class="lds-spinner"> <div class="spinner"> <div class="double-bounce1"></div> <div class="double-bounce2"></div> </div> </div> </templa
事件绑定/解绑函数
qq_48294048的博客
09-04 253
事件绑定: 标准:元素.addEventListener(事件类型,事件处理函数,是否捕获); IE:元素.attachEventr(on+事件类型,事件处理函数); 事件解绑： 标准:元素.removeEventListener(事件类型,事件处理函数,是否捕获); IE:元素.detachEvent(on+事件类型,事件处理函数); // 事件绑定函数 function bind(ele, type, fn) { //...
JavaScript中如何绑定自定义事件
weixin_30360497的博客
07-11 147
原生的js基础知识（如何绑定自定义事件） 绑定事件常用的方法：1、点击事件onclick、鼠标事件移入onmouseover、鼠标事件移出onmouseout；2、on(‘事件名称’，回调函数)；3、addEventListener 1、点击事件onclick 1.<button id='oBtn' onclick="alert(hahaha)">click</button&gt...
JavaScript 添加事件绑定的三种方法
Mark
08-13 1290
1、使用html进行事件绑定 1.1、直接在 html 标签上写入事件类型和事件处理方法。 <button onclick = "alert('hello world')">click me!</button> 1.2、在 html 标签上写入事件类型，在 js 上写事件处理方法。 html部分 <button onclick = "sayHello()">click me!</button> js部分 function sayHello(
vue2自定义指令及钩子函数
qq_37550440的博客
12-02 4284
在Vue中，自定义指令的生命周期(也叫钩子函数)，有5个事件钩子：1-bind 被绑定， 2-inserted 被插入， 3-update 开始更新， 4-componentUpdated 更新完成，5-unbind 解除绑定。我们可以设置指令在某一个事件发生时的具体行为。 根据权限判断是否显示按钮
Vue基础知识笔记
REDJOLER的博客
07-06 368
问题1：CSS3字体反爬原理 答案 问题2：跨域请求伪造 答案： 问题3：书写正则 答案： 问题4：时间戳反爬 答案：
JavaScript中的点击事件
热门推荐
weixin_44558721的博客
10-24 3万+
JavaScript中的基础知识
Javascript中点击（click）事件的3种写法
weixin_42017221的博客
02-09 1840
消除事件：btn.οnclick=null;
juqery事件绑定的几种方式 addev
最新发布
09-28
jQuery是一个流行的JavaScript库，用于简化DOM操作和事件处理。它提供了多种方便的方式来绑定事件到元素上。以下是jQuery中常见的几种事件绑定方式： 1. **直接绑定**: 使用`.on()`方法可以一次性为元素添加多种类型的事件处理器。例如： ```javascript $('#element').on('click', function() { // 事件处理代码 }); ``` 2. **链式绑定** (简写): 对于已经存在的DOM元素，可以直接在选择器后面使用`.click()`、`.hover()`等方法进行事件绑定，这种方式会立即创建处理器： ```javascript $('#element').click(function() { ... }); ``` 3. **委托模式**: 当你需要给动态生成的元素绑定事件时，可以将事件绑定到它们的共同祖先元素上，利用事件冒泡原理来处理： ```javascript $('#container').on('click', '.childElement', function() { ... }); ``` 4. **简写语法** (`.delegate()`方法，现已弃用，但仍然可用)：主要用于处理以前动态添加的元素，示例： ```javascript $('#parent').delegate('.child', 'click', function() { ... }); ``` 5. **`bind()`、`live()` 和 `delegate()` 的替代品 - `.on()` 中的 `livequery` 特性（已废弃），适用于处理元素插入文档后触发事件的情况。 6. **`one()` 方法**: 只执行一次事件处理，适合作为一次性操作或回调函数： ```javascript $('#element').one('click', function() { ... }); ``` 记得在使用这些方法时，确保你的jQuery版本支持这些功能，并确保代码是在document ready阶段或者元素存在时绑定事件。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值