30 jQuery——操作事件

jquery动态事件

添加事件

元素对象.bind("事件名",fn);//动态的给指定的元素追加指定的事件,多次点击将追加多个重复函数

移除事件

元素对象.unBind("事件名");

添加一次性事件:

添加的函数执行一次后失效

元素对象.one("事件名",fn)

页面载入事件:

注意不要写在函数里
$(document).ready(fn);fn表示函数对象function
页面载入成功后会调用函数对象。而且这个方式写多个,不会覆盖。

测试代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>操作事件</title>
		<!-- 
		 jquery动态事件
			添加事件
				元素对象.bind("事件名",fn);//动态的给指定的元素追加指定的事件,多次点击将追加多个重复函数
			移除事件
				元素对象.unBind("事件名");
			添加一次事件:添加的函数执行一次后失效
				元素对象.one("事件名",fn)
			页面载入事件:注意不要写在函数里
				$(document).ready(fn);fn表示函数对象function
				页面载入成功后会调用函数对象。而且这个方式写多个,不会覆盖。
		 -->
		<script src="js/jQuery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			//js动态添加事件
			function testThing(){
				var btn = document.getElementById("btn")
				btn.onclick=function(){
					alert("我是js方式")
				}
			}
			//jQuery添加事件:以点击事件为例(click)
			function testBind(){
				$("#btn2").bind("click",function(){alert('我是bind绑定事件')})
			}
			//jQuery解绑事件
			function testUnbind(){
				$("#btn2").unbind("click");
			}
			//jQuery一次性事件
			function testOne(){
				$("#btn3").one("click",function(){alert("我是一次性事件")})
			}
			//页面加载事件:注意不要写在函数里
			$(document).ready(function(){alert("我是页面加载事件")})
			$(document).ready(function(){alert("我是页面加载事件2")})
		</script>
	</head>
	<body>
		<h3>操作事件</h3>
		<input type="button" name="" id="" value="js动态添加事件" onclick="testThing()"/>
		←连续点击也只添加一个函数(一个事件)
		<input type="button" name="" id="" value="jquery动态添加事件" onclick="testBind()"/>
		←连续点击添加多个函数(一个事件)
		<input type="button" name="" id="" value="jquery解绑事件" onclick="testUnbind()" />
		<input type="button" name="" id="" value="添加一次性事件jQuery-one()" onclick="testOne()"/>
		←再次单击无效
		<hr>
		<input type="button" name="" id="btn" value="测试js" />
		<input type="button" name="btn2" id="btn2" value="测试jquery-bind()" />
		<input type="button" name="btn3" id="btn3" value="测试jQuery-one()" />
	</body>
</html>

  

原文地址:https://www.cnblogs.com/Scorpicat/p/12259446.html