Eventos de jQuery

jQuery está diseñado especialmente para el manejo de eventos.

Funciones de eventos de jQuery

Los métodos de manejo de eventos de jQuery son las funciones centrales de jQuery.

El programa de manejo de eventos es el método que se llama cuando ocurre algún evento en HTML. El término 'activado' (o 'impulsado') del evento se utiliza a menudo.

Generalmente se colocan las instrucciones jQuery en el método de manejo de eventos del <head>.

实例

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$("document").ready(function(){
  $("button").click(function(){
    $("p").hide();
  });
});
</script>
</head>
<body>
<h2>Este es un encabezado</h2>
<p>Este es un párrafo.</p>
<p>Este es otro párrafo.</p>
<button>Presione me</button>
</body>
</html>

亲自试一试

En el ejemplo anterior, se llama a una función cuando se activa el evento de clic del botón:

$("button").click(function() {  // some code... } )

Este método oculta todos los elementos <p>:

$("p").hide();

Funciones en archivo separado

Si su sitio web contiene muchas páginas y desea que sus funciones jQuery sean fáciles de mantener, entonces coloque sus funciones jQuery en un archivo .js independiente.

当我们在教程中演示 jQuery 时，会将函数直接添加到 <head> 部分中。不过，将它们放到一个单独的文件中会更好，就像这样（通过 src 属性来引用文件）：

实例

<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="my_jquery_functions.js"></script>
</head>

jQuery 名称冲突

jQuery 使用 $ 符号作为 jQuery 的简称。

某些其他 JavaScript 库中的函数（例如 Prototype）同样使用 $ 符号。

jQuery 使用名为 noConflict() 的方法来解决该问题。

var jq=jQuery.noConflict();，帮助您使用自己的名称（例如 jq）来代替 $ 符号。

亲自试一试

结论

由于 jQuery 是为处理 HTML 事件而特别设计的，因此当您遵循以下原则时，您的代码将更合适且更易于维护：

  • 将所有 jQuery 代码置于事件处理函数中
  • 将所有事件处理函数置于文档就绪事件处理器中
  • 将 jQuery 代码置于单独的 .js 文件中
  • 如果存在名称冲突，则重命名 jQuery 库

Eventos de jQuery

以下是 jQuery 中事件方法的一些示例：

Event 函数 绑定函数至
$(document).ready(function) 将函数绑定到文档的就绪事件（当文档完成加载时）
$(selector).click(function) 触发或将函数绑定到被选元素的点击事件
$(selector).dblclick(function) 触发或将函数绑定到被选元素的双击事件
$(selector).focus(function) 触发或将函数绑定到被选元素的获得焦点事件
$(selector).mouseover(function) 触发或将函数绑定到被选元素的鼠标悬停事件

如需完整的参考手册，请访问我们的 jQuery 事件参考手册。