您可以绑定到的事件的完整列表-js教程-PHP中文网

jQuery Full List of Events You Can Bind To

JavaScript结合jQuery，可以捕捉许多鼠标事件、键盘事件、浏览器事件和DOM元素事件，并利用bind()、live()等方法执行基于事件触发的操作。以下列出了您应该了解的主要事件：blur、focus、focusin、focusout、load、resize、scroll、unload、click、dblclick、mousedown、mouseup、mousemove、mouseover、mouseout、mouseenter、mouseleave、change、select、submit、keydown、keypress、keyup、error

鼠标事件

scroll、click、dblclick、mousedown、mouseup、mousemove、mouseover、mouseout、mouseenter、mouseleave、load、resize、scroll、unload、error

示例：

(function($) {
    $(document).ready(function() {
        $('#id').bind('click', function(e) {
            // 鼠标事件触发（元素被点击）
        });
    });
})(jQuery);

登录后复制

键盘事件

keydown、keypress、keyup

示例：

(function($) {
    $(document).ready(function() {
        $(document).bind('keypress', function(e) {
            // 键盘事件触发
        });
    });
})(jQuery);

登录后复制

浏览器事件

load、resize、scroll、unload、error

示例：

(function($) {
    $(document).ready(function() {
        // 浏览器事件触发（文档对象模型加载完成）
    });
})(jQuery);

登录后复制

DOM元素事件

blur、focus、focusin、focusout、change、select、submit

示例：

(function($) {
    $(document).ready(function() {
        $('#id').bind('blur', function(e) {
            // DOM事件触发（输入焦点离开）
        });
    });
})(jQuery);

登录后复制

演示

请参考：查找键盘按键的键码

jQuery事件绑定列表常见问题解答 (FAQs)

jQuery中`.bind()`和`.on()`有什么区别？

jQuery中的.bind()和.on()方法都用于将事件附加到元素。但是，两者之间有一些关键区别。.bind()方法是jQuery最初提供的附加事件的方法。它不适用于页面加载后动态添加的元素。另一方面，在jQuery 1.7中引入的.on()方法，既适用于现有元素，也适用于以后动态添加的元素。现在建议在新代码中使用.on()，因为它具有更好的性能和更多功能。

如何在jQuery中取消绑定事件？

要在jQuery中取消绑定事件，可以使用.unbind()方法。此方法删除使用.bind()方法附加的事件处理程序。您可以删除元素的所有事件处理程序，或者通过将事件类型指定为参数来仅删除特定事件处理程序。例如，$("#element").unbind("click")将删除id为“element”的元素的所有click事件处理程序。

我可以在jQuery中将多个事件绑定到同一个元素吗？

是的，您可以在jQuery中将多个事件绑定到同一个元素。您可以通过将对象传递给.on()方法来实现此目的，其中键是事件名称，值是事件处理程序。例如，$("#element").on({click: function(){}, mouseover: function(){}})将click和mouseover事件都绑定到id为“element”的元素。

如何在jQuery中停止事件传播？

要在jQuery中停止事件传播，可以使用.stopPropagation()方法。此方法阻止事件在DOM树中冒泡，防止任何父处理程序收到事件通知。您可以在事件处理程序中调用此方法，如下所示：function(event){ event.stopPropagation(); }。

什么是jQuery中的事件委托，我该如何使用它？

jQuery中的事件委托是一种技术，您可以将事件处理委托给父元素，而不是将事件绑定到特定元素。当您有很多元素或动态添加元素时，这尤其有用。您可以使用.on()方法通过指定选择器作为第二个参数来使用事件委托。例如，$("#parent").on("click", ".child", function(){})将所有子元素的click事件委托给父元素。

如何在jQuery中以编程方式触发事件？

要在jQuery中以编程方式触发事件，可以使用.trigger()方法。此方法触发选定元素上的指定事件和事件的默认行为（如表单提交）。例如，$("#element").trigger("click")将以编程方式触发id为“element”的元素上的click事件。

我可以在jQuery中将数据传递给事件处理程序吗？

是的，您可以在jQuery中将数据传递给事件处理程序。您可以通过将对象作为第二个参数传递给.on()方法来实现此目的。此对象的属性将在事件处理程序内的事件对象中作为属性可用。例如，$("#element").on("click", {name: "John"}, function(event){ alert(event.data.name); })将在元素被点击时显示“John”。

jQuery中`.live()`和`.on()`有什么区别？

jQuery中的.live()和.on()方法都用于将事件附加到元素。但是，在jQuery 1.7中已弃用的.live()方法有一些限制和特性。它不适用于某些事件（如“submit”和“focus”），并且它将事件处理程序附加到文档根目录，这可能会导致性能问题。另一方面，.on()方法克服了这些限制，现在是推荐使用的方法。

如何在jQuery中阻止事件的默认操作？

要在jQuery中阻止事件的默认操作，可以使用.preventDefault()方法。如果事件是可取消的，此方法将取消该事件，这意味着属于该事件的默认操作将不会发生。您可以在事件处理程序中调用此方法，如下所示：function(event){ event.preventDefault(); }。

我可以在jQuery中只绑定一次事件到元素吗？

是的，您可以在jQuery中只绑定一次事件到元素。您可以使用.one()方法来实现此目的。此方法的工作方式与.on()方法相同，但在事件处理程序触发一次后，该事件处理程序将被删除。例如，$("#element").one("click", function(){})将仅为id为“element”的元素触发一次click事件处理程序。

以上是您可以绑定到的事件的完整列表的详细内容。更多信息请关注PHP中文网其他相关文章！