使用 off() 方法来覆盖 jQuery 事件处理程序。此方法用于移除事件处理程序。on() 方法用于附加一个或多个事件处理程序。示例您可以尝试运行以下代码来学习如何覆盖 jQuery 事件处理程序：在线演示 jQuery off() 方法 $(document).ready(function() { function aClick() { $("div").show().fadeOut("slow"); } $("#bind").click(function () { $("#theone").on("click", aClick).text("可以点击！"); }); $("#unbind").click(function () { $("#theone").off("click", aClick).text("无效..."); }); }); button { margin:5px; } button#theone { color:red; background:yellow; } 无效... 绑定点击 解绑点击 点击！

自定义事件意味着您可以在 jQuery 中创建自己的事件。例如，创建一个自定义事件，在按下键盘上的任何键时触发一个警告框。示例您可以尝试运行以下代码来学习如何创建一个自定义事件，在线演示 $(document).ready(function(){ $('textarea').bind("enterKey",function(e){ alert("您按下了回车键！"); }); $('textarea').keyup(function(e){ if(e.keyCode == 13) { $(this).trigger("enterKey"); } }); });

要存储和重现 jQuery 事件，请使用控制台记录。示例您可以尝试运行以下代码来学习如何存储和重现 jQuery 事件：在线演示 $(document).ready(function(){ window.events = [] $("#track").click(function(event){ window.events.push(event) $.each(window.events, function(i, item){ console.log(i, item); }); }); }); 跟踪

一些 jQuery 事件不会冒泡，例如 mouseenter 不会冒泡。让我们来看一个此类事件的示例。示例您可以尝试运行以下代码来学习如何使用不会冒泡的 jQuery 事件，在线演示 $(document).ready(function(){ $("p").mouseenter(function(){ $("p").css("background-color", "red"); }); $("p").mouseleave(function(){ $("p").css("background-color", "blue"); }); }); 演示文本 - 将鼠标指针保持在此处。

stopPropagation() 方法要阻止事件向父元素冒泡，请使用 stopPropagation() 方法。示例您可以尝试运行以下代码来学习如何使用 stopPropogation() 方法：在线演示 jQuery stopPropagation() 方法 $(document).ready(function() { $("div").click(function(event){ alert("这是： " + $(this).text()); event.stopPropagation(); }); ... 阅读更多

要优先处理 jQuery 事件，请使用 event.stopPropagation()。示例您可以尝试运行以下代码来学习如何使用 stopPropogation() 方法进行优先级处理：在线演示 $(document).ready(function(){ var timer; function out(s) { if (timer) { clearTimeout(timer); timer = null; } $("#demo").append(s + ""); timer = setTimeout(function() { $("#demo").append("-------" + ""); timer = null; }, 100); } $(".li").find('input').click(function(e){ out('li>input'); if ($(this).parent().hasClass("stop")) { e.stopPropagation(); } }); $(".li").click(function(e){ out('li'); }); $('input').click(function(e){ out('input'); if ($(this).parent().hasClass("stop")) { e.stopPropagation(); } }); }); 演示 使用阻止传播方法的演示

jQuery setTimeout() 方法用于设置事件触发的间隔。示例在这里，我们将设置一个 3 秒的间隔，以便使用 jQuery 事件加载警告框：在线演示 $(document).ready(function(){ $("#button1").click(function(){ setTimeout("alert('Hello World!');", 3000); }); }); 点击 点击上面的按钮并等待 3 秒。3 秒后会生成一个警告框。

要使用 jQuery 检测图像的加载，请使用 load() 事件处理程序。注意：load() 方法在 jQuery 1.8 版本中已弃用。在 3.0 版本中已完全删除。要查看其工作原理，请在 3.0 之前的版本中添加 jQuery CDN 版本。示例您可以尝试运行以下代码来学习如何检测图像何时加载：在线演示 $(document).ready(function(){ $("img").load(function(){ alert("图像已成功加载。"); }); }); 注意：load() 方法在 jQuery 1.8 版本中已弃用。在 3.0 版本中已完全删除。要查看其工作原理，请在 3.0 之前的版本中添加 jQuery CDN 版本。

要检查 jQuery 事件是否阻塞，请使用 .triggerHandler() 方法，因为它返回该选择器上该事件的最后一个事件处理程序返回的任何内容。示例在线演示 $(document).ready(function(){ var myValue = "John"; $("body").bind("eventName", function(e, value) { return value + " Jacob"; }); var result = $("body").triggerHandler("eventName", myValue); alert(result); }); 这将显示一个警告框。

要为动态创建的元素绑定事件，需要动态加载。您可以尝试运行以下代码来学习如何在动态创建的元素上绑定事件。这里，我们将点击按钮生成新的列表项。示例在线演示 $(document).ready(function(){ $("button").click(function(){ $("ul").append("new item ×"); }); $(document).on("click", "a.del" , function() { $(this).parent().remove(); }); }); 添加 点击以上按钮动态添加新的列表项。您可以稍后将其移除。 项目