• 技术文章 >web前端 >前端问答

    jquery怎么去除某一个事件

    青灯夜游青灯夜游2022-06-10 15:42:20原创724

    jquery去除事件的方法:1、使用unbind(),语法“绑定事件的元素.unbind("指定事件名")”,可移除被选元素的指定事件;2、用off(),可移除元素中利用on()添加的指定事件,语法“绑定事件的元素.off("事件名")”。

    本教程操作环境:windows7系统、jquery1.10.2版本、Dell G3电脑。

    jquery去除某一个事件的方法

    方法1:使用unbind() 方法

    unbind() 方法移除被选元素的事件处理程序。

    该方法能够移除所有的或被选的事件处理程序,或者当事件发生时终止指定函数的运行。

    ubind() 适用于任何通过 jQuery 附加的事件处理程序。

    语法:

    $(selector).unbind(event,function,eventObj)
    参数描述
    event可选。规定一个或多个要从元素上移除的事件。
    由空格分隔多个事件值。
    如果只规定了该参数,则会删除绑定到指定事件的所有函数。
    function可选。规定从元素上指定事件取消绑定的函数名称。
    eventObj可选。规定要使用的移除的 event 对象。这个 eventObj 参数来自事件绑定函数。

    示例:从元素上去除点击事件

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<script src="js/jquery-1.10.2.min.js"></script>
    		<script>
    			function alertMe1() {
    				alert("Hello World!");
    			}
    			function alertMe2() {
    				$("p").css("color","red")
    			}
    			$(document).ready(function() {
    				$("p").click(alertMe1).click(alertMe2);
    				$("button").click(function() {
    					$("p").unbind("click");
    				});
    			});
    		</script>
    	</head>
    	<body>
    
    		<p>这是一个段落。</p>
    		<p>这是另外一个段落。</p>
    		<p>点击任意一个p元素来触发 alert 弹窗且字体颜色变红。</p>
    		<button>移除 p 元素的 click 事件</button>
    
    	</body>

    1.gif

    说明:自 jQuery 版本 1.7 起,on() 和 off() 方法是在元素上添加和移除事件处理程序的首选方法。

    方法2:使用off()方法

    off() 方法通常用于移除通过 on() 方法添加的事件处理程序。

    注意:如需移除指定的事件处理程序,当事件处理程序被添加时,选择器字符串必须匹配 on() 方法传递的参数。

    语法:

    $(selector).off(event,selector,function(eventObj),map)
    参数描述
    event必需。规定要从被选元素移除的一个或多个事件或命名空间。

    由空格分隔多个事件值。必须是有效的事件。
    selector可选。规定添加事件处理程序时最初传递给 on() 方法的选择器。
    function(eventObj)可选。规定当事件发生时运行的函数。
    map规定事件映射 ({event:function, event:function, ...}),包含要添加到元素的一个或多个事件,以及当事件发生时运行的函数。

    示例:

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<script src="js/jquery-1.10.2.min.js"></script>
    		<script>
    			function changeSize() {
    				$(this).animate({
    					fontSize: "+=10px"
    				});
    			}
    
    			function changeSpacing() {
    				$(this).animate({
    					letterSpacing: "+=5px"
    				});
    			}
    
    			$(document).ready(function() {
    				$("p").on("click", changeSize);
    				$("p").on("click", changeSpacing);
    				$("button").click(function() {
    					$("p").off("click");
    				});
    			});
    		</script>
    	</head>
    	<body>
    
    		<p>这是一个段落 。</p>
    		<p>这是另外一个段落。</p>
    		<p>点击任意一个段落来修改段落的字体大小。</p>
    
    		<button>移除click事件</button>
    
    	</body>
    </html>

    2.gif

    【推荐学习:jQuery视频教程web前端视频

    以上就是jquery怎么去除某一个事件的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:jquery
    上一篇:css字体设置为bold的是什么意思 下一篇:jquery怎么修改min-height样式
    20期PHP线上班

    相关文章推荐

    • 【活动】充值PHP中文网VIP即送云服务器• jquery怎么查询所有子元素• jquery中的show是什么• jquery中toggle是什么意思• jquery each的用法是什么• jquery怎么移除onclick事件
    1/1

    PHP中文网