Jquery off().on解綁和綁定事件時增加事件命名空間

最新推荐文章于 2022-05-15 09:09:04 发布

原创最新推荐文章于 2022-05-15 09:09:04 发布 · 269 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#Jquery事件命名空間

JS 同时被 2 个专栏收录

29 篇文章

订阅专栏

Jquery

3 篇文章

订阅专栏

本文介绍如何利用jQuery库中的动画方法，如animate，结合命名空间事件处理，实现网页中HTML元素样式的动态调整。具体包括字体大小和字母间距的变化效果，并探讨了如何通过按钮点击事件解除特定命名空间下的事件句柄。

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<script type="text/javascript" src="js/jquery.js"></script>	 	   
<title>1</title>
</head>
<p>这是一个段落 。</p>
<div>这是另外一个段落。</div>
<p>点击任意一个段落来修改段落的字体大小。</p>
<button>移除click 事件句柄</button>
<div id='div'>aaa</div>
</body>
</html>
<script>
function changeSize(e)
{
	$(this).animate({fontSize:"+=3px"});	
}
function changeSpacing(e)
{
	$(this).animate({letterSpacing:"+=2px"});
	
}

$(document).ready(function(){
	$("body").on("click.size",changeSize);//body click事件增加size命名空間
	$("body").on("click.space",changeSpacing);//body click事件增加space命名空間
	$("button").click(function(){
		$("body").off("click.size");//解除body size命名空間下的click
                //$("body").off("click");//不用命名空間時解除所有click事件
	});
});
</script>