Enlace de eventos jQuery
jQuery proporciona cuatro métodos de enlace para el monitoreo de eventos, a saber, bind y on.
Las funciones correspondientes para liberar la monitorización son desvincular y apagar respectivamente.
enlazar ( evento , [datos], función)
Bind es el que se usa con más frecuencia y su función es vincular una función de escucha de un tipo de evento específico al elemento seleccionado. El significado de los parámetros es el siguiente:
evento: tipo de evento, como hacer clic, cambiar, pasar el mouse, etc.
datos: los parámetros pasados a la función de supervisión se recuperan a través de event.data. Opcional
función: función de monitor, puede pasar el objeto de evento, donde evento es el objeto de evento encapsulado por jQuery, que es diferente del objeto de evento original, por lo que debe prestarle atención al usarlo
usar:$("#div li").bind("click",myFun);
on ( evento, childSelector, datos, función )
El método on () agrega uno o más controladores de eventos a los elementos seleccionados y elementos secundarios. El más utilizado
Desde la versión 1.7 de jQuery, el método on () es una nueva alternativa a los métodos bind (), live () y delegate (). Este método aporta mucha comodidad a la API, recomendamos este método, simplifica la base del código jQuery.
Nota: Los controladores de eventos agregados mediante el método on () son aplicables a elementos actuales y futuros (como elementos nuevos creados por scripts).
Consejo: para eliminar el controlador de eventos, utilice el método off ().
Sugerencia: Para agregar un evento que solo se ejecuta una vez y luego eliminarlo, utilice el método one ().
evento: requerido. Especifica uno o más eventos o espacios de nombres que se eliminarán del elemento seleccionado. Varios valores de eventos están separados por espacios y también puede ser una matriz. Debe ser un evento válido.
childSelector: Opcional. Especifica controladores de eventos que solo se pueden agregar al elemento secundario especificado (y no al selector en sí, como el método delegate () obsoleto).
datos: opcional. Especifica los datos adicionales que se pasan a la función.
función: opcional. Especifica la función que se ejecutará cuando se produzca el evento.
使用 ： $ ( selector ) .on ( evento, childSelector, datos, función );
.click (), .trigger () también tienen efectos de enlace de eventos
Enlace de eventos nativo de JavaScript
1. Enlace directo en elementos DOM: los elementos DOM aquí pueden entenderse como etiquetas HTML. JavaScript admite eventos vinculantes directamente en etiquetas
2. Enlace de OnXXX en código JavaScript: los eventos de enlace en código JavaScript pueden separar el código JavaScript de las etiquetas HTML, y la estructura del documento es clara, lo que es conveniente para la gestión y el desarrollo.
3. Vinculación de la función de escucha de eventos: otra forma de vincular eventos es usar addEventListener () o attachEvent () para vincular la función de escucha de eventos.
1. Enlace directo en elementos DOM
1. Funciones nativas
1 <input οnclick = "alert ('Gracias por su apoyo')" type = "button" value = "Click me" />
2. Funciones personalizadas
1 <input οnclick = "myAlert ()" type = "button" value = "点 我" />
2
3 <script type = "text / javascript">
4
5 function myAlert () {
6
7 alert ("谢谢 支持" );
8
9}
10
11 </script>
2. Enlace OnXXX en código JavaScript
La sintaxis para vincular eventos en código JavaScript es:
elementObject.onXXX = function () {
// código de manejo de eventos
}
Entre ellos:
- elementObject es un objeto DOM, es decir, un elemento DOM.
- onXXX es el nombre del evento.
Por ejemplo, vincule un evento al botón con id = "demo" y muestre su atributo de tipo:
1 <input id = "demo" type = "button" value = "haz clic en mí para mostrar el atributo de tipo" />
2
3 <script type = "text / javascript">
4
5 document.getElementById ("demo"). Οnclick = function () {
6
7 alert (this.getAttribute ("type")); // esto se refiere al elemento HTML del evento actual, aquí está la <div> etiqueta
8
9}
10 </script>
Tres. Función de escucha de eventos vinculantes
Sintaxis de la función addEventListener ():
elementObject.addEventListener (eventName, handle, useCapture);
| parámetro | Descripción |
|---|---|
| elementObject | Objetos DOM (es decir, elementos DOM). |
| nombre del evento | El nombre del evento. Tenga en cuenta que aquí no hay "on" en el nombre del evento, como clic del mouse, clic en el evento, doble clic del mouse en el evento, doble clic en el evento, movimiento del mouse en el evento, movimiento del mouse fuera del evento, etc. |
| resolver | Función de controlador de eventos, es decir, la función utilizada para manejar el evento. |
| useCapture | El tipo booleano, si se usa capture, generalmente usa false. Esto implica el concepto de flujo de eventos de JavaScript, que se explicará en detalle en los capítulos siguientes. |
Sintaxis de la función attachEvent (): (compatible con IE)
elementObject.attachEvent (eventName, identificador);
| parámetro | Descripción |
|---|---|
| elementObject | Objetos DOM (es decir, elementos DOM). |
| nombre del evento | El nombre del evento. Tenga en cuenta que, a diferencia de addEventListener (), el nombre del evento aquí tiene "on", como el evento de clic del mouse onclick, el evento de doble clic del mouse en doble clic, el movimiento del mouse en evento onmouseover, el evento de movimiento de mouse out onmouseout, etc. |
| resolver | Función de controlador de eventos, es decir, la función utilizada para manejar el evento. |
Nota: La función del controlador de eventos se refiere al "nombre de la función" sin paréntesis.
addEventListener () es un método estándar para vincular funciones de escucha de eventos, compatible con W3C, Chrome, FireFox, Opera, Safari, IE9.0 y versiones superiores, todas admiten esta función;
Sin embargo, IE8.0 y las versiones inferiores no admiten este método, utiliza attachEvent () para vincular la función de escucha de eventos. Por lo tanto, este método de vinculación de eventos debe tratar los problemas de compatibilidad del navegador.
El siguiente código para eventos vinculantes ha sido procesado por compatibilidad y puede ser compatible con todos los navegadores:
1 función addEvent (obj, type, handle) {
2
3 try {// Chrome, FireFox, Opera, Safari, IE9.0 y superior
4
5 obj.addEventListener (type, handle, false);
6
7} catch (e) {
8
9 try {// IE8.0 y por debajo de
10
11 obj.attachEvent ('on' + type, handle);
12
13} catch (e) {// navegador temprano
14
15 obj ['on' + type] = manejar;
16
17}
18
19}
20
21}
Aquí se usa try {...} catch (e) {...} en lugar de if ... else ... declaraciones para evitar mensajes de error del navegador.
Por ejemplo, para vincular un evento a un botón con id = "demo", aparecerá un cuadro de diálogo cuando se haga clic con el mouse:
1 var obj = document.getElementById ("demo");
2 addEvent (obj, "click", myAlert);
3
4 function myAlert () {
5
6 alert ("Soy un cuadro de diálogo");
7
8}
La diferencia entre el enlace de eventos de jQuery y el enlace de eventos de JavaScript
El enlace de eventos en jQuery es superponible y el enlace de eventos en JavaScript es reemplazable.
Eche un vistazo al código de muestra:
1 / * jQuery 绑定 事件 * /
2 $ (". Cnd"). Click (function () {
3 console.log ("first")}
4);
5 $ (". Cnd"). Click (function () {
6 console.log ("segundo")}
7);
8
9 $ (". Cnd"). Click (function () {
10 console.log ("3rd")}
11);
12
13 / * js 绑定 事件 * /
14 var cm2 = document.getElementById ("me2");
15 cm2.οnclick = function () {
16 console.log ("primero");
17};
18 cm2.οnclick = function () {
19 console.log ("segundo");
20};
21 cm2.
οnclick = function () { 22 console.log ("tercero");
23};
Ejecute el evento .cnd click de jQuery, la consola imprime:
Ejecute el evento de clic cm2 de js, lo que imprime la consola es:
Se puede encontrar:
Usando el método de enlace de eventos de jQuery, tres funciones de procesamiento están vinculadas al evento de clic del mismo elemento, y los resultados se muestran en orden, lo que indica que las funciones de procesamiento de eventos de jQuery están superpuestas;
Al utilizar el enlace de eventos nativo de JavaScript, puede encontrar que solo se ejecuta el último evento de enlace, y la función del controlador de eventos enlazada posteriormente sobrescribe la función del controlador de eventos anterior.