English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
En realidad, este artículo se escribió hace mucho tiempo, pero debido a un error de guardado en SF, se escribió mucho entonces, pero no se guardó, y se sintió que no estaba completo era un gran defecto. Hoy正好有空，就补充一下，也正好给我的JavaScript学习总结做一个完结篇。
Aquí, discutiremos principalmente los eventos relacionados con JavaScript.
Programa de manejo de eventos
En el DOM se definen algunos eventos, y la función que responde a un evento se llama programa de manejo de eventos (o escucha de eventos). El nombre del programa de manejo de eventos generalmente comienza con "on", por ejemplo: onclick, etc.
Burbujeo y captura de eventos
El flujo de eventos se refiere a la secuencia en la que los eventos se reciben en la página, Internet Explorer, Firefox y Chrome navegadores son burbujeo de eventos, lo que significa que el evento se recibe inicialmente por el elemento más específico y luego se propaga gradualmente hacia arriba hasta los nodos menos específicos. En cambio, la captura de eventos es lo contrario, la captura de eventos fue propuesta por Netscape, como se muestra en el gráfico a continuación: burbujeo de eventos y captura de eventos.
A pesar de que el flujo de captura de eventos es el único modelo de flujo de eventos admitido por Netscape, en la actualidad Internet Explorer9Mozila Firefox y Google también admiten este modelo de flujo de eventos.
Ventajas del burbujeo de eventos
Debido a que los eventos tienen un mecanismo de burbujeo, podemos utilizar el principio de burbujeo para agregar eventos al nivel superior y activar los efectos de ejecución. Por supuesto, la ventaja de esto es mejorar el rendimiento.
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
window.onload = function () {
var aUl = document.getElementsById("bubble");
var aLi = aUl.getElementsByTagName("li");
for(var i = 0;i<aLi.length;i++){
aLi[i].onmouseover = function () {
this.style.backgroundColor = "blue";
};
ali[i].onmouseout = function () {
this.style.backgroundColor = "";
}
}
};
</script>
</head>
<body>
<div>
<ul id = "bubble">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
</body>
De esta manera, podemos agregar eventos de ratón a los li. Pero si podemos tener muchos li usando un bucle for, esto puede afectar el rendimiento.
Podemos lograr este efecto utilizando el delegado de eventos. El html no cambia:
<script type="text/javascript">
window.onload = function () {
var aUl = document.getElementsById("bubble");
var aLi = aUl.getElementsByTagName("li");
//En cualquier evento, siempre y cuando el elemento que esté operando sea el origen del evento.
// ie: window.event.srcElement
// estándar: event.target
aUl.onmouseover = function (ev) {
var ev = ev || window.event;
var target = ev.target || ev.srcElement;
if(target.nodeName.toLowerCase() == "li"){
target.style.background = "blue";
}
};
aUl.onmouseout = function (ev) {
var ev = ev || window.event;
var target = ev.target || ev.srcElement;
if(target.nodeName.toLowerCase() = "li"){
target.style.background = "";
}
}
};
</script>
¿Cómo evitar que los eventos se propaguen? Vea el siguiente ejemplo:
<div onclick="showMsg(this,event)" id="outSide" style="width:100px; height:100px; background:#000; padding:50px">
<div onclick="showMsg(this,event)" id="inSide" style="width:100px; height:100px; background:#CCC"></div>
</div>
<script type="text/javascript">
//After preventing the bubble event, when you click the gray box, the dialog box pops up only once in the entire process (note the contrast with the default situation)
function showMsg(obj,e)
{
alert(obj.id);
stopBubble(e)
}
//Prevent bubble event function
function stopBubble(e)
{
if (e && e.stopPropagation)
e.stopPropagation()
else
window.event.cancelBubble=true
}
</script>
Click the black outer effect diagram:
DOM 0-level event handler
Assigning a callback function to the event handler attribute is usually specified by JavaScript. Each element has its own event handler attribute (attribute in lowercase, such as: onclick)
btn.onclick = function(){
console.log('hello');
};
Using DOM 0-level event handlers is considered a method of the element. Therefore, this points to the current element:
var btn = document.getElementById('myDiv');
//Events triggered on the DOM will generate an event object event
btn.onclick = function (event) {
alert(this.id);//myDiv
};
DOM level 1
DOM level 1 Focuses on the HTML and XML document model. It contains document navigation and processing functions.
DOM level 1 Of 1998 Year 10 Month 1 Day became W3C recommended standard.
The second draft of the work was released in 2000 Year 9 Month 29 Day.
It is worth mentioning that DOM level 0 is not W3C specification. It is simply a Netscape Navigator 3.0 and IE 3.0 of an equivalent functionality definition.
DOM 2.Event handler
DOM 2Define two methods to specify and delete event handler operations: addEventListener() and removeEventListener(), they both accept three parameters:
1.Event name. For example, the above click
2.As a function of the event handler.
3.Boolean value (true indicates that the event handler is called during the capture phase, false indicates the bubble phase)
También se puede definir la función de devolución de llamada del evento a través del método addEventListener del objeto Element.
//element.addEventListener(event, function, useCapture)
var btn = document.getElementById('myDiv');
btn.addEventListener('click', function () {
console.log(this.id);
}, false);
Administradores de eventos en IE
IE9versiones anteriores de IE no admitían addEventListener() y removeEventListener().
A diferencia de otros navegadores, IE utiliza los métodos attachEvent() y detachEvent() para agregar administradores de eventos al DOM, ya que IE8y versiones anteriores solo admiten la burbujeabilidad de eventos, por lo que solo aceptan dos parámetros:
1、nombre del administrador de eventos (antes debe agregarse on)
2、función del administrador de eventos
Los administradores de eventos añadidos con attachEvent() se ven así:
var btn = document.getElementById('myDiv');
btn.attachEvent('onclick', function () {
console.log(this.id);
});
Es importante destacar que, en el caso de usar el método attachEvent(), el administrador de eventos se ejecuta en el ámbito global, por lo que en este momento this es igual a window
objeto de evento
Al desencadenar un evento en algún lugar del DOM, se crea un objeto de evento event que contiene toda la información relacionada con el evento. Incluye el elemento que causó el evento, el tipo de evento y otra información específica del evento. El objeto event se pasa como primer parámetro a la función de devolución de llamada del escucha de eventos. Podemos obtener una gran cantidad de información relacionada con el evento actual a través de este objeto event:
type (String) — El nombre del evento.
target (node) — El nodo DOM de origen del evento.
currentTarget?(node) — El nodo DOM en el que se desencadena la función de devolución de llamada actual (se presentará con más detalle más adelante).
bubbles (boolean) — Indica si este evento es un evento burbujeante (se explicará más adelante).
preventDefault(function) — Este método impide que el agente de usuario del navegador desencadene el comportamiento predeterminado relacionado con el evento actual. Por ejemplo, evitar que el evento click del elemento <a> cargue una nueva página.
cancelable (boolean) — Esta variable indica si el comportamiento predeterminado de este evento se puede evitar mediante la llamada a event.preventDefault.
stopPropagation (function) — Cancelar la captura o propagación adicional del evento, use este método si bubbles es true.
eventPhase：devuelve un número que indica la fase actual del evento, 0 indica que el evento comienza a propagarse desde la superficie del DOM hacia el elemento objetivo,1Por fase de captura,2Porque el evento ha llegado al elemento objetivo,3Por burbujeo.
Además, el objeto de eventos puede tener muchas otras propiedades, pero todas ellas están destinadas a eventos específicos. Por ejemplo, los eventos de ratón contienen las propiedades clientX y clientY para indicar la posición del ratón en la ventana actual.
Además, el método stopPropagation() se utiliza para detener inmediatamente la propagación del evento en el DOM, es decir, cancelar la propagación adicional del burbujeo o la captura.
var btn = document.getElementById('myDiv');
btn.onclick = function (event) {
alert("clicked");
event.stopPropagation();
};
//Evitar que se desencadene el gestor de eventos en document.body
document.body.onclick = function (event) {
alert("Body clicked");
};
El objeto event solo existe durante la ejecución del gestor de eventos, una vez que el gestor de eventos se ha ejecutado, el objeto event se destruye automáticamente.
Objeto de eventos en IE
Cuando se agrega un gestor de eventos en el nivel 0 de DOM, el objeto event existe como una propiedad del objeto window:
var btn = document.getElementById('myDiv');
btn.onclick = function (event) {
var event = window.event;
alert(event.type);//click
};
El objeto event de IE también contiene propiedades y métodos relacionados con el evento que lo creó.
cancleBubble Booleano El valor predeterminado es false, pero puede establecerse en true para cancelar la propagación del evento, igual que el método stopPropagation() en dom.
returnValue Booleano El valor predeterminado es true, cuando se establece en false se utiliza para cancelar la acción predeterminada del evento, igual que preventDefault() en dom.
srcElement Elemento El objetivo del evento, igual que la propiedad target en dom.
type Cadena El tipo de evento desencadenado.
Evento de clic
Después de que el usuario haga clic, el objeto event contendrá las siguientes propiedades.
pageX, pageY: las coordenadas del punto de clic en relación con el elemento html, en unidades de píxeles.
clientX, clientY: las coordenadas del punto de clic en relación con el viewport, en unidades de píxeles.
screenX, screenY: las coordenadas del punto de clic en relación con la pantalla de visualización del dispositivo, en unidades de píxeles del hardware del dispositivo
clientX, clientY
gráfico: clientX y clientY, sus valores representan las coordenadas horizontales y verticales del puntero del mouse en el viewport en el momento del evento (sin área de la barra de desplazamiento)
la offset
a través de lo siguiente4las propiedades que pueden obtener la offset del elemento.
（1）offsetHeight: el tamaño en píxeles que ocupa el elemento en la dirección vertical. Incluye la altura del elemento, la altura de la barra de desplazamiento horizontal visible, la altura del borde superior y la altura del borde inferior.
（2）offsetWidth: el tamaño en píxeles que ocupa el elemento en la dirección horizontal. Incluye el ancho del elemento, la anchura de la barra de desplazamiento vertical visible, la anchura del borde izquierdo y la anchura del borde derecho.
（3）offsetLeft: la distancia en píxeles desde el borde izquierdo externo del elemento al borde izquierdo interno del contenedor.
（4）offsetTop: la distancia en píxeles desde el borde superior externo del elemento al borde superior interno del contenedor.
pageX, pageY
estas dos propiedades representan la posición del cursor del mouse en la página, en el caso de que la página no tenga desplazamiento, los valores de pageX, pageY son iguales a los valores de clientX, clientY
el tamaño de desplazamiento
el tamaño de desplazamiento, que se refiere al tamaño del elemento que contiene el contenido de desplazamiento.
A continuación se muestra4las propiedades relacionadas con el tamaño de desplazamiento.
（1）scrollHeight: la altura total del contenido del elemento sin barra de desplazamiento.
（2）scrollWidth: el ancho total del contenido del elemento sin barra de desplazamiento.
（3）scrollLeft: número de píxeles de la parte izquierda del contenido oculto en la área de contenido. Al establecer esta propiedad, se puede cambiar la posición de desplazamiento del elemento.
（4）scrollTop: número de píxeles de la parte superior del contenido oculto en la área de contenido. Al establecer esta propiedad, se puede cambiar la posición de desplazamiento del elemento.
los eventos de enfoque
los eventos de enfoque se desencadenan cuando un elemento en la página obtiene o pierde el enfoque, tienen lo siguiente4los eventos de enfoque:
1.blur: se desencadena cuando un elemento pierde el enfoque, este evento no se propaga.
2.focus: se desencadena cuando un elemento obtiene el enfoque. No se propaga.
3.focusin: se desencadena cuando un elemento obtiene el enfoque, se propaga.
4.focusout: se desencadena cuando un elemento pierde el enfoque, se propaga.
los eventos de mouse
DOM 3definición de nivel9los eventos de mouse:
click: se desencadena cuando el usuario hace clic en el botón principal del mouse, generalmente el botón izquierdo o presiona la tecla Enter.
dbclick: se desencadena cuando el usuario hace doble clic en el mouse.
mousedown: se desencadena cuando el usuario presiona cualquier tecla del mouse, este evento no puede ser desencadenado por el teclado.
mousemove: Se desencadena repetidamente cuando el mouse se mueve alrededor de un elemento, este evento no puede ser desencadenado por eventos de teclado.
mouseout: Se desencadena cuando el mouse sale del elemento, este evento no puede ser desencadenado por el teclado.
mouseover: Se desencadena cuando el mouse entra en el elemento, este evento no puede ser desencadenado por el teclado.
mouseenter: Similar a 'mouseover', pero no burbujea y no se desencadena cuando el cursor se mueve a los elementos descendientes.
mouseleave: Similar a 'mouseout', pero no burbujea. No se desencadena en el elemento superior.
mouseup: Se desencadena cuando el usuario libera el botón del mouse, no puede ser desencadenado por el teclado.
El objeto de evento transmitido al gestor de eventos de mouse tiene las propiedades clientX y clientY, que especifican la posición del puntero del mouse en relación con la ventana que lo contiene. Sumando el desplazamiento de deslizamiento de la ventana, se puede convertir la posición del mouse en coordenadas de documento.
Todos los elementos de la página soportan eventos de mouse. Además de mouseenter y mouseleave, todos los eventos burbujean y su comportamiento por defecto puede ser cancelado. Sin embargo, cancelar el comportamiento por defecto de los eventos de mouse puede afectar a otros eventos, ya que algunos eventos de mouse son dependientes entre sí.
Eventos de arrastrar y soltar
（1）evento drag
El evento drag se desencadena durante el arrastre del objeto de origen.
（2）evento dragstart, evento dragend
El evento dragstart se desencadena cuando el usuario comienza a arrastrar un objeto con el mouse, y el evento dragend se desencadena cuando finaliza el arrastre.
（3）evento dragenter, evento dragleave
El evento dragenter se desencadena en el objeto de destino después de que el objeto de origen se arrastra dentro de él. El evento dragleave se desencadena en el objeto de destino después de que el objeto de origen se aleje de él.
（4）evento dragover
El evento dragover se desencadena en el objeto posterior cuando el objeto de origen se arrastra sobre él.
（5）evento drop
Cuando el objeto de origen se arrastra sobre el objeto de destino y el usuario suelta el mouse, se desencadena el evento drop en el objeto de destino.
Esto es todo el contenido de este artículo, espero que sea útil para su aprendizaje y que todos nos apoyen en el tutorial de grito.