关于实现点击事件的绑定与取消

最新推荐文章于 2022-10-20 17:41:22 发布
最新推荐文章于 2022-10-20 17:41:22 发布
阅读量1.2k 收藏
点赞数
分类专栏： Java JavaScript

很多情况下，比如我们想对一个文本框或者按钮进行事件绑定的时候，一般直接在他上面写上什么onclick等等的事

件，但是对于这样的时间的去除，比如希望一个按钮在这里仅仅按下一次，然后再次按下的时候就不能有什么效果了，

这就需要对事件 的监听和绑定还有取消实行动态的机制，下面我们来演示一个小例子来说明一下事件的绑定和取消机

制/

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>test6.html</title>
	<script type="text/javascript">
		function test(){
			window.alert("您投了一次票");
			document.getElementById("1").detachEvent("onclick",test);
		}
	</script>
  </head>
  
  <body>
    <input type="button" value="投票" id="1"/>
    <script type="text/javascript">
    	document.getElementById("1").attachEvent("onclick",test);
    </script>
  </body>
</html>

这里使用document.getElementById("1").attachEvent("onclick",test);进行动态的事件绑定，使用 

document.getElementById("1").detachEvent("onclick",test)进行动态的时间的取消，这样就实现了这个事件只能相应一次，下
</pre><pre style="BACKGROUND-COLOR: rgb(255,255,255)" class="html" name="code">次再点击这个按钮的时候就不会再产生什么效果。
</pre><pre style="BACKGROUND-COLOR: rgb(255,255,255)" class="html" name="code">
下面再演示一个时时监听键盘事件，判断输入的是否是数字，如果不是数字直接动态提示，然后拒绝其输入
<pre class="html" name="code"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>test7.html</title>
	<script type="text/javascript">
		function test(event){
			//用户每按下一个按键，就去判断是不是数字
			if(event.keyCode<48 || event.keyCode > 57){
				window.alert("您输入的不是一个数字");
				return false;
			}
		}
	</script>

  </head>
  
  <body>
    <input type="text" οnkeypress="return test(event);" />请输入数字
  </body>
</html>

这里的event就是一个事件对象，他能返回很多的信息，具体请参考文档 

 

 


                

        

        

    




    

      

        

            

              
                
                  LanBuff
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                      0
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    0
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                    0
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      

            

                专栏目录
          










                



	

		

			

				
					
jQuery实现按钮只点击一次后就取消点击事件绑定的方法

				
			

			

				

					10-24
				

			

		

		

			
				
总结一下，本文介绍了如何使用jQuery实现一个按钮在第一次点击后自动取消其点击事件的绑定。这个技术实现简单且实用，可以有效地帮助开发者解决在Web开发过程中可能遇到的重复事件触发的问题。同时，我们也介绍了...

			
		

	



                

              
                



	

		

			

				
					
js两种移除事件的方法

				
			

			

				

					qq_53612668的博客
				

				

					10-24
					
					2408
					
				

			

		

		

			
				
在js的学习中，为元素添加事件是非常常见的
那么，下面我带大家了解一下js中移除事件的两种方法

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title></title>
 </head>
 <body>
  <input type="button" value="点我啊" id=...

			
		

	



                


  
              

                


	

		

			

				
					
js取消和添加onclick事件

				
			

			

				

					一切都会好起来的，即使不在今天
				

				

					08-06
					
					1633
					
				

			

		

		

			
				
$(".sendMail").removeAttr("onclick");

   $(".sendMail1").attr("onclick","sendMail('1')")
    $(".sendMail2").attr("onclick","sendMail('2')")




			
		

	





	

		

			

				
					
jquery移除click事件

				
			

			

				

					weixin_41228949的博客
				

				

					10-18
					
					3万+
					
				

			

		

		

			
				
首先，在html重定义click事件有两种方式，针对这两种方式有两种移除click事件的方法

1、第一种定义click时间的方法是在标签内部加上onclick的属性如下

&lt;input id = "demoId" type="button" onclick="demoFunction();" value="单击事件"/&gt;

针对这种定义方式，onclick是input标签的一个属性，...

			
		

	



		

			
		



	

		

			

				
					
js取消 删除点击事件

				
			

			

				

					h0713的博客
				

				

					06-28
					
					6371
					
				

			

		

		

			
				
用js赋予点击事件
	var redone=document.getElementById("gd2_3");
	redone.addEventListener('click',canbeclick,true);
	function canbeclick(){
		alert("啊，好爽啊!");		
	}

用js取消/删除点击事件
redone.removeEventListener('click',canbeclick,true);

上面代码亲测有效。
因为看到网上有将redone.οnclick=

			
		

	





	

		

			

				
					
jquery中取消和绑定hover事件的实现代码

				
			

			

				

					10-22
				

			

		

		

			
				
### jQuery中绑定与取消hover事件  在使用jQuery进行网页交互设计时，`hover`事件的使用十分频繁，它通常用于模拟`mouseover`和...以上就是关于jQuery中如何正确绑定与取消`hover`事件的知识分享，希望对大家有所帮助。

			
		

	





	

		

			

				
					
多种jQuery绑定事件的实现方式

				
			

			

				

					10-22
				

			

		

		

			
				
例如，绑定点击事件（click）如下所示：  ```javascript $("#button").bind("click", function() {  alert("button click"); }); ```  然而，当你多次调用`.bind()`函数为同一个元素和事件类型注册处理函数时，会...

			
		

	





	

		

			

				
					
layer.confirm取消按钮绑定事件的方法

				
			

			

				

					10-18
				

			

		

		

			
				
然而，在实际的业务场景中，我们可能不希望用户通过取消按钮进行某些操作，或者想要为取消按钮绑定特定的事件处理逻辑，这时就需要对取消按钮进行事件的绑定或解绑。  首先，我们需要了解layer.confirm的基本语法。...

			
		

	





	

		

			

				
					
js相关知识

				
			

			

				

					qq_52074845的博客
				

				

					01-10
					
					271
					
				

			

		

		

			
				
JS（JavaScript 是世界上最流行的脚本语言。 JavaScript 是属于 web 的语言，它适用于 PC、笔记本电脑、平板电脑和移动电话。 JavaScript 被设计为向 HTML 页面增加交互性。 许多 HTML 开发者都不是程序员，但是 JavaScript 却拥有非常简单的语法。）
1.在JS中 es5版本使用var来声明变量 es6中使用let声明变量
例如：
在js中，赋值、变量几乎和python之类的没有区别，例如：

如果在变量赋值时，没有在前面添加var,则该变量会变成全局变量

			
		

	





	

		

			

				
					
事件绑定与取消

				
			

			

				

					zhangyiyang111的博客
				

				

					12-27
					
					347
					
				

			

		

		

			
				
1.2 事件绑定与取消
1.2.1 事件绑定


标准浏览器：标签.addEventListener（事件类型[不加on],事件处理函数，是否捕获）


ie浏览器：标签.attachEvent（事件类型[加on],事件处理函数）


区别：

标准浏览器不加on，ie加on
标准浏览器有捕获，ie没有捕获
标准浏览器按添加顺序执行，ie低版本倒序执行
标准浏览器this指触发事件的对象，ie this指window

//1.标准浏览器绑定：标签.addEventListener(事件类型[不加on]，事

			
		

	





	

		

			

				
					
绑定点击事件及解绑点击事件

					
最新发布

				
			

			

				

					YY的博客
				

				

					10-20
					
					3132
					
				

			

		

		

			
				
绑定点击事件及解绑点击事件

			
		

	





	

		

			

				
					
事件绑定和事件取消

				
			

			

				

					weixin_72686458的博客
				

				

					10-07
					
					285
					
				

			

		

		

			
				
事件绑定

  标准浏览器 标签.addEventListener(事件类型(不加on),事件处理函数,是否捕获(false))

  IE低版本 标签.attachEvent(事件类型(加on),事件处理函数)

事件取消(解绑)

  普通事件解绑 标签.事件类型 = null

  事件绑定解绑 

    标准浏览器 标签.removeEventListener(要解绑的事件类型，要解绑的事件处理函数，是否捕获)

    IE低版本 标签.detachEVe

			
		

	





	

		

			

				
					
JS笔记--day22. 01.jq取消绑定事件

				
			

			

				

					lmd_hdx的博客
				

				

					07-06
					
					481
					
				

			

		

		

			
				
jq取消绑定事件

			
		

	





	

		

			

				
					
jquery去掉onclick事件

					
热门推荐

				
			

			

				

					laijieyao的专栏
				

				

					06-28
					
					6万+
					
				

			

		

		

			
				
要实现效果：点击链接先去掉onclick属性，3秒后再自动加上该标签中的onclick属性jQuery中，针对标签属性的操作都是使用attr()方法来实现的，比如：$(“a”).attr(“onclick”)可获得a标签的onclick属性,对应的：删除onclick属性：$(“a”).removeAttr(“onclick”);设置onclick属性：$(“a”).attr(“onclick”,”

			
		

	





	

		

			

				
					
模拟input file 文件框“取消”按钮事件

				
			

			

				

					My_Soul_的博客
				

				

					06-01
					
					2509
					
				

			

		

		

			
				
在通过input file实现文件上传的功能时，通过为当前window添加focus事件的方式来模拟取消事件

			
		

	





	

		

			

				
					
jQuery---解除事件

				
			

			

				

					Philo的博客
				

				

					01-26
					
					5305
					
				

			

		

		

			
				
jQuery—解除事件
常见的解除事件有三种，往往取决与你绑定事件所用的关键字：
举例1：
//绑定事件，使用id选择器给btn1绑定点击事件
			$("#btn1").on("click",function(){
				console.log("点击事件")
			}).mouseenter(function(){
				console.log("鼠标聚焦事件")
			})
			
			//点击第二个按钮，解除第一个按钮事件
			$("#btn2").on("click",function()

			
		

	





	

		

			

				
					

				
			

			

				

					
				

			

		

		

			
				

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值