jQuery事件绑定

最新推荐文章于 2024-04-01 21:27:27 发布

有园人

最新推荐文章于 2024-04-01 21:27:27 发布

阅读量242

点赞数

分类专栏：网页编程和设计文章标签： jQuery事件绑定

本文链接：https://blog.csdn.net/qq_42031653/article/details/99697227

版权

网页编程和设计专栏收录该内容

33 篇文章 0 订阅

订阅专栏

bind的方法运用，以及trigger，unbind的使用。

在这里有一种新的事件，one事件，只执行一次，然后失效。

先看body：

<body>
        <input type="button" id="but1" value="单击事件"/>
        <input type="button" id="but2" value="bind绑定事件"/>
        <input type="button" id="but3" value="one事件"/>
        <input type="button" id="but4" value="trigger事件"/>
        <input type="button" id="but5" value="解绑事件"/>
        <input type="button" id="but6" class="but6" value="解绑事件"/>
    </body>

one事件：

$("#but3").one("click",function(){
			//只有第一次单击有用，
			alert("one事件");
		})

bind绑定:是将很多事件融汇于一身，但是都是在自身些方法。

$("#but2").bind({
					click:function(){
						alert("bind单击事件");
					},
					
					blur:function(){
						alert("bind光标离开事件");
					}
				})

trigger事件（类似于调用多种方法，方法不是写在本体内）：

$("#but4").click(function(){
					$("#but1").trigger('click');
					$("#but2").trigger('blur');
				})

unbind顾名思义：接触绑定事件的意思:

$("#but5").click(function(){
					//当unbind后面啥也不写表示，解除指定对象的所有事件。
					$("#but2").unbind();
					//$("#but2").unbind("blur");
					alert("解绑成功~")
				})

需要注意：当unbind后面啥也不写表示，解除指定对象的所有事件。

完整代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="js/jquery-1.12.3.min.js" ></script>
		<script>
			$(function(){
				$("#but1").click(function(){
					alert("单击事件~");
				})
				
				$("#but2").bind({
					click:function(){
						alert("bind单击事件");
					},
					
					blur:function(){
						alert("bind光标离开事件");
					}
				})
				
				$("#but3").one("click",function(){
					//只有第一次单击有用，
					alert("one事件");
				})
				
				//trigger之间绑定操作
				$("#but4").click(function(){
					$("#but1").trigger('click');
					$("#but2").trigger('blur');
				})
				
				//解绑事件
				$("#but5").click(function(){
					//当unbind后面啥也不写表示，解除指定对象的所有事件。
					$("#but2").unbind();
					//$("#but2").unbind("blur");
					alert("解绑成功~")
				})
				
			})
		</script>
	</head>
	<body>
		<input type="button" id="but1" value="单击事件"/>
		<input type="button" id="but2" value="bind绑定事件"/>
		<input type="button" id="but3" value="one事件"/>
		<input type="button" id="but4" value="trigger事件"/>
		<input type="button" id="but5" value="解绑事件"/>
	</body>
</html>

有园人

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery事件绑定

bind的方法运用，以及trigger，unbind的使用。在这里有一种新的事件，one事件，只执行一次，然后失效。先看body：<body> <input type="button" id="but1" value="单击事件"/> <input type="button" id="but2" value="bind绑定...
复制链接

扫一扫

专栏目录