js给具有多个class属性的元素添加点击事件

本文探讨了jQuery中两种点击事件处理方法:click()和on()。详细解析了它们在静态和动态控件上的表现差异,强调了on()在动态HTML元素上绑定事件的优势。

元素:

<button class="c-btn query">查询</button>

方法1:

$('.c-btn.query').click(function () {
	query();
}

方法2:

$("body").on('click','.c-btn.query',function () {
	query();
});

方法1有时候不奏效,可以选择方法2。


ps:关于on()和click()的区别:

二者在绑定静态控件时没有区别,但是如果面对动态产生的控件,只有 on() 能成功的绑定到动态控件中。

动态添加的 HTML 元素,使用 click() 这种写法,点击 按钮无法删除;使用 On() 方式可以。

### 在JavaScript中将相同的事件监听器添加多个元素的方法 在JavaScript中,可以通过多种方式将相同的事件监听器添加多个元素。以下是一些常用的方法和实现细节。 #### 使用 `forEach` 方法 如果目标元素可以被选为一个集合(例如通过 `querySelectorAll`),可以使用 `forEach` 遍历这些元素,并为每个元素添加事件监听器[^2]。 ```javascript document.querySelectorAll('.target-class').forEach(function(element) { element.addEventListener('click', function() { console.log('Element clicked'); }); }); ``` #### 使用传统 `for` 循环 也可以使用传统的 `for` 循环来遍历节点列表,并为每个元素绑定事件监听器[^1]。 ```javascript var elements = document.getElementsByClassName('target-class'); for (var i = 0; i < elements.length; i++) { elements[i].addEventListener('click', function() { console.log('Element clicked'); }); } ``` #### 使用单个函数处理多个信号 为了简化代码逻辑,可以定义一个通用的事件处理函数,并将其传递给 `addEventListener`[^3]。 ```javascript function handleEvent(event) { console.log('Event type:', event.type); } var elements = document.querySelectorAll('.target-class'); elements.forEach(function(element) { element.addEventListener('click', handleEvent); element.addEventListener('mouseover', handleEvent); }); ``` #### 使用数据属性区分元素 如果需要根据特定的数据属性来区分不同的元素,可以结合 `data-*` 属性进行操作[^4]。 ```javascript // 添加 data-framework 属性到每个元素 document.querySelectorAll('.card').forEach(function(card) { card.setAttribute('data-framework', 'react'); // 或其他值 }); // 根据 data-framework 添加事件监听器 document.querySelectorAll('.card').forEach(function(card) { card.addEventListener('click', function() { console.log('Framework:', card.dataset.framework); }); }); ``` #### 注意事项 在为多个元素添加事件监听器时,需要注意比较运算符的使用。例如,`==` 和 `===` 的区别在于前者仅比较值,而后者同时比较值和类型[^5]。这可能会影响事件处理逻辑中的条件判断。 ---
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值