30 jQuery——操作事件
Posted scorpicat
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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>
以上是关于30 jQuery——操作事件的主要内容，如果未能解决你的问题，请参考以下文章