JS：点击多个按钮，响应一个函数

最新推荐文章于 2021-12-05 17:54:45 发布
转载 最新推荐文章于 2021-12-05 17:54:45 发布 · 3k 阅读 · 3

本文通过两个具体的HTML按钮示例，介绍了JavaScript中this关键字的使用方法及其如何指向当前操作的DOM元素。通过简单的代码示例，展示了在按钮点击事件中如何正确地引用this来获取当前元素的ID。

参考网址：https://zhidao.baidu.com/question/499093977.html

function c(self){
alert(self.id);
}
<input type='button' id='id1' onclick='c(this)'/> 这里传入this，代表当前input
<input type='button' id='id2' onclick='c(this)'/> 这里传入this，代表当前input

 

JS中为一个事件绑定多个响应函数
ChuanyangChen的博客
02-21 1405
JS中为一个元素的相同事件同时绑定多个响应函数 利用addEventListener(1,2,3)为元素绑定响应函数 参数1：事件的字符串，不要on，比如“click” 参数2：回调函数，当事件触发时该函数会被调用 参数3：是否在捕获阶段触发事件，需要一个布尔值，一般都传false <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http
《js基础-多个按钮点击事件》
热门推荐
刘贵庆的博客
08-10 1万+
前述：终于抽出时间，整理了一些编程中所需基础知识。 多个按钮点击操作：（介绍三种方法） <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>js基础-js多个按钮点击事件</title> <script src="https://code.jquery.com/jquery-3.6....
用javascript来实现防止多个按钮被同时按下的方法
02-01
用javascript来实现防止多个按钮被同时按下的方法
三个按钮共用一个函数方法
weixin_44770377的博客
09-04 1119
三个按钮简单的就是设置三个函数方法，但是代码太多。思考了一种可以通过方法传值的方式定义一个方法。通过传入的值进行判断调用哪个事件。 <el-button type=“primary” icon=“el-icon-sell” size=“small” plain @click.stop=“showFrom(1)”>上架申请 <el-button type=“primary” ico...
javascript 一个函数对同一元素的多个事件响应
12-01
代码如下: var testButton=document.getElementById(“testButton”); function handlerTest() { var oEvent=window.event;//for IE //var oEvent=arguments[0];// for DOM if(oEvent.type==”click”) { alert(“click”); } else if(oEvent.type==”mouseover”) { alert(“mouseover”); } else { alert(oEvent.keycode); } } testButt
多个按钮调用同一个方法
Reborn_s的博客
10-30 4925
$(".btn-info").on('click',function(event){var clickedButtonDOM=event.target; //获取按钮的DOM元素 var id = clickedButtonDOM.getAttribute('id');//获取指定的元素 console.log(id); }); 接单 送货
[js]多个按钮点击添加div，再点击删除
InfiniteCreator
06-01 5968
主要思想是一个全局变量来控制增加或删除。点一下显示，再点一下删除。 源码如下，可直接运行<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <script type="text/javascript"> var num = 0; fu
js控制按钮,防止频繁点击响应的实例
12-09
在JavaScript编程中，控制按钮以防止用户频繁点击是常见的需求，尤其在执行异步操作或者需要等待服务器响应的场景下。这样做可以避免不必要的资源浪费，提高用户体验，防止因为误操作导致的数据混乱。以下是一个具体...
js控制一个按钮是否可点击(可使用)disabled的实例
12-11
在这个实例中，我们关注的是如何通过JavaScript来控制一个按钮是否可点击。在HTML中，`disabled`属性用于禁用表单元素，如按钮（`<button>`或`<input type="button">`），使得用户无法与其交互。当`disabled`属性...
JS 为同一个元素绑定多个不同的事件,指向相同的事件处理函数
夏沐的博客
02-20 1385
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;title&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;input type=
js第4章函数案例：单击按钮事件、函数调用求和，arguments用法、变量的作用域、，回调函数、函数嵌套与作用域链、递归调用：根据用户的输入计算指定数据的阶乘、闭包函数的实现
WHT869706733的博客
12-05 1617
1.单击按钮事件 <button id="btn">单击</button> <div id="demo" style="display: none">这是一个惊喜！</div> <script> function $(id) { // 根据id获取元素对象 return document.getElementById(id); } function show() { // 显示id为demo的元素 $('d
js给一个对象的同一个事件绑定多个不同的函数（一个按钮点击两次得到不同结果）
林中明月间丶
05-11 6571
&lt;script type="text/javascript"&gt; //给一个对象绑定一个事件处理函数的第一种形式 //document.onclick = fn1; function fn1(){ alert(1); } function fn2(){ alert(2); } //给一个元素绑定事件函数的第二种形式： //给一个对象的同一个事件绑定多个不同的函数:...
【js】如何给超链接和按钮添加 js 函数
firstbird的博客
07-27 1665
1、给超链接a 添加js函数 直接通过 href 添加js函数 < a href='javascript：test();'>Previous</a > 跳转到另一个页面 <a href="../register/register.html"> 注册</a> 2、给按钮添加js函数 <button onclick="test();" >点我</button> ...
JS 一个函数处理多个事件
bh1990的专栏
01-11 966
window.onload = function() { //this指向注册这个事件元素 /** document.getElementById("testBtn").onclick = function(event) { alert(event); alert(event.target); alert(this); alert(event.currentTa
javascript 多个同样按钮触发同一个事件_「融职培训」Web前端学习 第3章 JavaScript基础教程14 DOM基础...
weixin_39631344的博客
11-21 518
一、DOM的基本概念本章节可谓是相当重要了,是让JavaScript灵动起来必不可少的一步文档对象模型定义了树状结构定义了接口，可以用来操作树状结构二、样式操作我们可以通过DOM提供的querySelector方法来获取元素，然后进一步操作它的样式示例代码如下:1 DOM样式测试2 若需要通过js设置多个元素的样式，可以使用querySelectorAll方法，示例代码如下: 1 2 香...
JavaScript的5种调用函数的方法
weixin_33860147的博客
03-12 423
这篇文章详细的介绍了Javascript中各种函数调用的方法及其原理,对于理解JavaScript的函数有很大的帮助！ JavaScript,调用函数的5种方法  　　一次又一次的,我发现,那些有bug的Javascript代码是由于没有真正理解Javascript函数是如何工作而导致的(顺便说一下,许多那样的代码是我写的).JavaScript拥有函数式编程的特性, 当我们选...
两个按钮执行同一事件方法但执行不同代码的使用
weixin_30484247的博客
03-25 484
界面： <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label> <asp:Button ID="Button1" runat="server" Text="Button" onclick="qintianqi" /><asp:Button ID="Button2" runa...
Bacon.js：JavaScript中功能响应式编程的实用工具
Bacon.js是一个FRP的JavaScript库，允许开发者用简洁、声明式的函数式编程方式来构建动态的用户界面和异步交互。它为JavaScript提供了一套强大的API来操作和组合事件流。事件流在Bacon.js中是第一类公民，这使得...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值