如何利用一个按钮绑定两个事件

最新推荐文章于 2023-03-30 20:55:52 发布
最新推荐文章于 2023-03-30 20:55:52 发布
阅读量599 收藏
点赞数

如何利用一个按钮绑定两个事件


1、问题背景

一个按钮绑定两个点击事件，但是只有一个事件起作用，另一个不起作用


2、实现源码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>如何利用一个按钮绑定两个事件</title>
		<script src="../js/jquery-3.1.0.js"></script>
		<script>
			$(document).ready(function(){
				$("#searchBtn").click(function(){
					$("#username").val("");
				});
				
				$("#searchBtn").off().on("click",function(){
					$("#password").val("");
				});
			});
		</script>
	</head>
	<body>
		<div>
			<input type="button" id="searchBtn" value="查询" style="width: 204px;"/><br><br>
			<input type="text" id="username" style="width: 200px;"/><br><br>
			<input type="text" id="password" style="width: 200px;"/>
		</div>
	</body>
</html>
（1）初始化


（2）点击按钮



3、问题说明

由于绑定第一个事件时，绑定第二个事件用到off()方法，这样就会将第一个事件给解除了，所以只有第二个事件起到作用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>如何利用一个按钮绑定两个事件</title>
		<script src="../js/jquery-3.1.0.js"></script>
		<script>
			$(document).ready(function(){
				$("#searchBtn").click(function(){
					$("#username").val("");
				});
				
				$("#searchBtn").on("click",function(){
					$("#password").val("");
				});
			});
		</script>
	</head>
	<body>
		<div>
			<input type="button" id="searchBtn" value="查询" style="width: 204px;"/><br><br>
			<input type="text" id="username" style="width: 200px;"/><br><br>
			<input type="text" id="password" style="width: 200px;"/>
		</div>
	</body>
</html>

（1）初始化


（2）点击按钮


iteye_8264
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JavaScript给按钮绑定点击事件（onclick）的方法
10-24
这种方法更灵活，因为它允许你为同一个元素添加多个事件处理程序： ```javascript document.querySelector('button').addEventListener('click', displayDate); ``` 在这个示例中，`addEventListener`接收两个参数...
js：按钮绑定多个事件的三种方法（js，DOM，jQuery）
qq_52824207的博客
04-27 7423
1.js可以直接通过通过button的onclick添加多个函数来绑定多个事件。 2.DOM可以通过事件监听函数addEventListener绑定事件。 3.Jquery可以通过click方法来绑定事件。 完整代码： <!DOCTYPE html> <html lang="en"> <head> <title>按钮绑定多个事件</title> <meta charset="utf-8"&gt
原生js给一个按钮绑定两个onclick事件
qq_44697315的博客
03-03 2736
原生js给一个按钮绑定两个onclick事件
javascript实现一个按钮绑定多个事件
m0_71912711的博客
03-30 2205
javascript实现一个按钮绑定多个事件，实现点击一个按钮实现多个隐藏文字的同时出现和隐藏通过两种方法实现一个按钮绑定多个事件，实现点击一个按钮实现多个隐藏文字的同时出现和隐藏。
PyQt5按钮点击事件 给按钮绑定事件调用自定义函数 QPushButton
07-10
# PyQt5按钮点击事件 给按钮绑定事件调用自定义函数 QPushButton 1. 继承 QWidget 定义自定义窗口类； 1. 在窗口中创建三个 QPushButton 并设置水平布局 QHBoxLayout； 2. 将三个按钮分别绑定自定义函数。
js实现同一个页面,多个enter事件绑定的示例
10-17
下面的代码展示了如何在一个页面上为两个不同的输入域（input元素）绑定Enter事件： ```javascript document.onkeydown = function(e) { var ev = (typeof event != 'undefined') ? window.event : e; // 兼容IE和...
多个单选按钮的WPF MVVM绑定
04-02
在实现多个单选按钮的绑定时，我们需要解决两个主要问题：互斥选择（即一次只能有一个单选按钮被选中）和状态同步（ViewModel中的状态与View中的状态保持一致）。一种常见的解决方案是使用一个名为“Radio Button ...
js创建一个input数组并绑定click事件的方法
12-07
在JavaScript中，创建一个`input`数组并绑定`click`事件是常见的交互设计，用于实现动态的用户界面。以下是对给定代码的详细解释和扩展： 首先，HTML部分定义了三个`input`类型的按钮，它们的`name`属性都是`input...
同一个按钮想绑定多个事件的方法
m0_52946104的博客
09-21 1687
ie8 以下，和ie8 以上，this 分别指向window和当前调用对象的问题
vue click点击绑定两个事件
骨子里的偏爱
03-15 3749
vue click点击绑定两个事件
vue中@click绑定多个事件（教你避坑）
热门推荐
LLL3189860667的博客
09-27 1万+
亲爱的小伙伴，你可能还不知道，使用@click绑定多个事件的时候有一个小坑坑，因为刚刚我就遇到了，所以，为了你不再踩坑，我就将自己的经验分享给你，希望能够有所帮助哦！如果你不加小括号，那么方法就一定不会生效的。非表达式的方法一定要加上小括号，
在一个 DOM 上绑定两个点击事件，一个用捕获，一个用冒泡，事件会执行几次，先执行冒泡还是捕获？
weixin_36320950的博客
11-16 2139
在一个 DOM 上绑定两个点击事件，一个用捕获，一个用冒泡，事件会执行几次，先执行冒泡还是捕获？ 冒泡和捕获的执行顺序 冒泡机制的执行顺序是自下往上的，当目标元素绑定的事件被触发时，事件会从目标元素自下向上依次执行。 捕获机制的执行顺序是自上往下的，当目标元素绑定的事件被触发时，事件会从 DOM 树最顶层自上向下依次执行，直到执行到目标元素为止。 关于执行次数 DOM0 DOM0 级事件具有极好的跨浏览器优势，会以最快的速度绑定。 为某一个元素的同一个行为绑定不同的方法在行内会分别执行。 为某一个元素的同一
jquery 给一个按钮添加两个点击事件，执行不同的方法（函数）
PrimaryColor
10-13 4927
假设说需求让我们同时给“重置”按钮绑定两个事件，一个功能负责重置所有输入框和下拉选择框的值，另一个功能负责执行搜索。 第一个功能做成全局的，所有页面只要绑定该类都可以执行到。第二个功能，因为每个页面的搜索参数和执行的操作不一样，所以要单独写。 // $('body).on('click','.reset',function(){ //重置输入框和下拉选择框 }); $('body).on('click','.reset',function(){ //搜索 }); 可是全局的 ...
【JavaScript】如何用原生JS给一个元素绑定两个事件？
m0_56349322的博客
03-30 2072
解决办法： var btn = document.getElementById('btn'); btn.addEventListener('click',func1); btn.addEventListener('click',func2); 这里的 addEventListener 叫事件监听 addEventListener 事件监听怎么用呢？ 语法：addEventListener(event,function,useCapture). 捕获阶段： 事件...
如何使元素绑定两次click事件
weixin_44542089的博客
06-09 1870
一个元素不能绑定两次相同的事件，这一点在学习后端基础时便了解的事情。当时尝试过在一个元素中绑定click事件，然后再在此次的click事件中再嵌套多一层同类事件，结果当然是失败的，点击被绑定的元素时，只相应了第一次的click事件，第二层的click就像是根本没有定义一样，毫无效果。无可奈何之下，便只好用双击事件来替代二次点击事件，但是这样子做的后果会使用户体验效果变差。试想一下，当第一次点击按钮...
react中如何给一个按钮绑定两个点击事件
最新发布
06-09
例如，下面的代码展示了如何给一个按钮绑定两个点击事件： ```jsx import React from 'react'; function handleClick1() { console.log('Button clicked 1'); } function handleClick2() { console.log('Button...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值