jQuery 事件 - undelegate() 方法 概述
jQuery 2022-06-01 12:12:44小码哥的IT人生shichen
jQuery 事件 - undelegate() 方法
实例
从所有元素删除由 delegate() 方法添加的所有事件处理器：
$("body").undelegate();
完整实例：
<html>
<head>
<script type="text/javascript" src="https://apps.bdimg.com/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("body").delegate("p","click",function(){
$(this).slideToggle();
});
$("button").click(function(){
$("body").undelegate();
});
});
</script>
</head>
<body>
<p>这是一个段落。</p>
<p>这是另一个段落。</p>
<p>点击任何段落可以令其消失。包括本段落。</p>
<button>从所有元素删除由 delegate() 方法添加的事件处理器</button>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
定义和用法
undelegate() 方法删除由 delegate() 方法添加的一个或多个事件处理程序。
语法
$(selector).undelegate(selector,event,function)
完整实例：
<html>
<head>
<script type="text/javascript" src="https://apps.bdimg.com/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("p").click(function(){
$(this).slideToggle();
});
$("button").click(function(){
$("p").unbind();
});
});
</script>
</head>
<body>
<p>这是一个段落。</p>
<p>这是另一个段落。</p>
<p>点击任何段落可以令其消失。包括本段落。</p>
<button>删除 p 元素的事件处理器</button>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
| 参数 | 描述 |
|---|---|
| selector | 可选。规定需要删除事件处理程序的选择器。 |
| event | 可选。规定需要删除处理函数的一个或多个事件类型。 |
| function | 可选。规定要删除的具体事件处理函数。 |
亲自试一试 - 实例
完整实例【删除事件处理程序，由 delegate() 添加，来自具体选择器】：
<html>
<head>
<script type="text/javascript" src="https://apps.bdimg.com/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
function changeSize()
{
$(this).animate({fontSize:"+=3px"});
}
function changeSpacing()
{
$(this).animate({letterSpacing:"+=2px"});
}
$(document).ready(function(){
$("body").delegate("p","click",changeSize);
$("body").delegate("p","click",changeSpacing);
$("button").click(function(){
$("body").undelegate("p");
});
});
</script>
</head>
<body>
<p>这是一个段落。</p>
<p>这是另一个段落。</p>
<p>点击任何段落增加字体大小和字符间距。包括本段落。</p>
<button>从 p 元素删除由 delegate() 方法添加的所有事件处理器</button>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
如何使用 undelegate() 方法从指定元素删除所有事件处理程序。
完整实例【删除指定事件类型的事件处理程序，由 delegate() 添加，来自指定元素】：
<html>
<head>
<script type="text/javascript" src="https://apps.bdimg.com/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
function changeSize()
{
$(this).animate({fontSize:"+=3px"});
}
function changeSpacing()
{
$(this).animate({letterSpacing:"+=2px"});
}
$(document).ready(function(){
$("body").delegate("p","click",changeSize);
$("body").delegate("p","click",changeSpacing);
$("button").click(function(){
$("body").undelegate("p","click");
});
});
</script>
</head>
<body>
<p>这是一个段落。</p>
<p>这是另一个段落。</p>
<p>点击任何段落增加字体大小和字符间距。包括本段落。</p>
<button>从 p 元素删除由 delegate() 方法添加的所有 "click" 事件处理器</button>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
如何使用 undelegate() 方法从指定元素删除具体事件类型的所有事件处理程序。
完整实例【删除由 delegate() 添加的具体函数】：
<html>
<head>
<script type="text/javascript" src="https://apps.bdimg.com/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
function changeSize()
{
$(this).animate({fontSize:"+=3px"});
}
function changeSpacing()
{
$(this).animate({letterSpacing:"+=2px"});
}
$(document).ready(function(){
$("body").delegate("p","click",changeSize);
$("body").delegate("p","click",changeSpacing);
$("button").click(function(){
$("body").undelegate("p","click",changeSize);
});
});
</script>
</head>
<body>
<p>这是一个段落。</p>
<p>这是另一个段落。</p>
<p>点击任何段落增加字体大小和字符间距。包括本段落。</p>
<button>从 p 元素删除由 delegate() 方法添加的事件处理器 changeSize()</button>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
如何使用 undelegate() 方法为事件处理程序删除来自特定事件类型的特定函数。
