javascript: de objeto de evento

frase original: Https://Wangdoc.Com/javascript/index.Html

Los objetos de evento

contorno

Después del incidente, se generará un objeto de evento como parámetro pasa a la función de escucha. Un navegador nativo Eventobjetos, todos los eventos son instancias de este objeto, o heredados Event.prototypeobjetos.

EventEs un constructor de objeto en sí, se puede utilizar para crear una nueva instancia.

event = new Event(type, options);

EventConstructor toma dos parámetros. El primer parámetro typees una cadena que representa el nombre del evento; el segundo argumento optionses un objeto que representa una configuración del objeto de evento. Los objetivos son de las dos propiedades siguientes.

• bubbles: Boolean, opcional, por defecto false, que indica si el objeto de evento burbujas.
• cancelable: Boolean, opcional, por defecto false, que indica si el evento se puede cancelar, que se puede utilizar Event.preventDefault()para cancelar el evento. Una vez que el evento se cancela, como si nunca ocurrió, que no desencadena el comportamiento por defecto del navegador para el evento.

var ev = new Event(
  'look',
  {
    'bubbles': true,
    'cancelable': false
  }
);
document.dispatchEvent(ev);

El código anterior crea una nueva lookinstancia de suceso, a continuación, utilizar el dispatchEventmétodo que ha activado el evento.

Tenga en cuenta que, si no se especifica explícitamente bubblesatributos true, genera eventos sólo pueden estar en la función de monitor de activación "fase de captura".

// HTML 代码为
// <div><p>Hello</p></div>
var div = document.querySelector('div');
var p = document.querySelector('p');

function callback(event) {
  var tag = event.currentTarget.tagName;
  console.log('Tag: ' + tag); // 没有任何输出
}

div.addEventListener('click', callback, false);

var click = new Event('click');
p.dispatchEvent(click);

El código anterior, plos elementos emiten un clickcaso de que por defecto no está en ebullición. div.addEventListenerEl método especificado en el monitor de fase de propagación, la función de monitor y por lo tanto no hace gatillo. Si por escrito div.addEventListener('click', callback, true), entonces la "fase de captura" se puede escuchar a este evento.

Por otro lado, si este evento se divdesencadena en los elementos.

div.dispatchEvent(click);

Así que, independientemente de divlos elementos en la fase de propagación está escuchando, o en la captura oyentes fase se activará la función de escucha. Porque entonces el divelemento es el evento de destino, la cuestión de si no existe la burbuja, divlos elementos serán siempre se recibe un evento, lo que conduce a la función de escucha para tener efecto.

Propiedades de instancia

Event.bubbles, Event.eventPhase

Event.bubblesPropiedad devuelve un valor booleano que indica si el burbujeo evento actual. Este atributo es propiedad de sólo lectura, se utiliza generalmente para saber si la instancia de burbujeo de eventos. Como se mencionó anteriormente, a menos que expresamente declaradas Eventeventos generados constructor, el valor por defecto no está en ebullición.

Event.eventPhasePropiedad devuelve una constante de número entero que representa la altura de los acontecimientos actuales. Esta propiedad es de sólo lectura.

var phase = event.eventPhase;

Event.eventPhaseHay cuatro posibles valores de retorno.

• 0, sucesos actuales no sucedieron.
• 1, el evento se encuentra actualmente en la fase de adquisición, es decir, en antepasado desde el nodo al nodo de destino del proceso de comunicación.
• 2, el evento llega al nodo de destino, es decir, Event.targetlos puntos de atributo nodo.
• 3, en la fase de evento de propagación, que está en la parte posterior-propagación desde el nodo de destino a antepasado nodo en el proceso.

Event.cancelable, Event.cancelBubble, event.defaultPrevented

Event.cancelablePropiedad devuelve un valor booleano que indica si el evento se puede cancelar. Este atributo es de sólo lectura propiedad, que se utiliza generalmente para entender las características de los casos de eventos.

Nativos de eventos mayoría de los navegadores se pueden cancelar. Por ejemplo, para cancelar clickel evento, haga clic en el enlace no funcionará. Pero a menos que expresamente declaradas Eventeventos generados constructor, el valor por defecto no se cancela.

var evt = new Event('foo');
evt.cancelable  // false

Cuando la Event.cancelablepropiedad es true, la llamada Event.preventDefault()puede cancelar este evento impide que el comportamiento por defecto del navegador para el evento.

Si el evento no se cancela, las llamadas Event.preventDefault()no tendrán ningún efecto. Así que antes de utilizar este método, la mejor Event.cancelablepropiedad para determinar si puede ser cancelada.

function preventEvent(event) {
  if (event.cancelable) {
    event.preventDefault();
  } else {
    console.warn('This event couldn\'t be canceled.');
    console.dir(event);
  }
}

Event.cancelBubbleEs un valor booleano que, si true, lo que equivale a la ejecución Event.stopPropagation(), puede detener la propagación de la prueba.

Event.defaultPreventedPropiedad devuelve un valor booleano que indica si el evento había invocado Event.preventDefaultmétodo. Esta propiedad es de sólo lectura.

if (event.defaultPrevented) {
  console.log('该事件已经取消了');
}

Event.currentTarget, Event.target

Después del incidente, los dos ir a través de las fases de captura y burbujeantes, seguido por múltiples nodos DOM. Por lo tanto, cualquier punto en el tiempo hay dos nodos asociados con el evento, un nodo es el evento de disparo original ( Event.target), está siendo adoptado actualmente otro evento nodo ( Event.currentTarget). El primero es por lo general nodos descendientes de este último.

Event.currentTargetPropiedad devuelve el evento nodo se encuentra actualmente, que el evento está siendo adoptado por el nodo, el nodo que se está ejecutando actualmente la función de detector se encuentra. Con la difusión del evento, que se convertirá en el valor de esta propiedad.

Event.targetDevuelve Propiedad el nodo que ha activado el evento original, que evento ocurrió primer nodo. Esta propiedad no cambia con la difusión del evento.

proceso de propagación de sucesos, los diferentes nodos dentro de la función de detector Event.targetcon el Event.currentTargetvalor de la propiedad no es el mismo.

// HTML 代码为
// <p id="para">Hello <em>World</em></p>
function hide(e) {
  // 不管点击 Hello 或 World，总是返回 true
  console.log(this === e.currentTarget);

  // 点击 Hello，返回 true
  // 点击 World，返回 false
  console.log(this === e.target);
}

document.getElementById('para').addEventListener('click', hide, false);

El código anterior, <em>es <p>el nodo secundario, haga clic <em>o toque <p>, dará lugar se ejecuta la función de escucha. En este momento, e.targetsiempre apunta a la ubicación del original, haga clic en el nodo, y el e.currentTargetpunto en el proceso de propagación de eventos se pasa a ese nodo. Puesto que solamente se activará la función de monitor cuando el incidente, por lo que e.currentTargetsiempre equivale a monitorear funciones internas this.

Tipo de evento

Event.typePropiedad devuelve una cadena que representa el tipo de evento. Tipo de evento se especifica en el momento en que se generó el evento. Esta propiedad es de sólo lectura.

var evt = new Event('foo');
evt.type // "foo"

Event.timeStamp

Event.timeStampPropiedad devuelve una marca de tiempo de milisegundos que indica el momento en que ocurrió el evento. Es en relación con las cargas de la página contados con éxito.

var evt = new Event('foo');
evt.timeStamp // 3683.6999999995896

Es posible valor de retorno es un entero, puede haber un número decimal (tiempo de alta precisión), dependiendo de la configuración del navegador.

Este es un ejemplo de un ratón cálculo de la velocidad en movimiento, mostrar el número de píxeles movidos por segundo.

var previousX;
var previousY;
var previousT;

window.addEventListener('mousemove', function(event) {
  if (
    previousX !== undefined &&
    previousY !== undefined &&
    previousT !== undefined
  ) {
    var deltaX = event.screenX - previousX;
    var deltaY = event.screenY - previousY;
    var deltaD = Math.sqrt(Math.pow(deltaX, 2) + Math.pow(deltaY, 2));

    var deltaT = event.timeStamp - previousT;
    console.log(deltaD / deltaT * 1000);
  }

  previousX = event.screenX;
  previousY = event.screenY;
  previousT = event.timeStamp;
});

Event.isTrusted

Event.isTrustedPropiedad devuelve un valor booleano que indica si el evento generado por el comportamiento real del usuario. Por ejemplo, el usuario hace clic en el enlace tendrá un clickevento que se genera por el usuario; Eventeventos generados constructor, es generado por el guión.

var evt = new Event('foo');
evt.isTrusted // false

El código anterior, evtel objeto es generado por el guión, los isTrustedrendimientos de propiedad false.

Event.detail

Event.detailSólo las propiedades de interfaz de usuario del navegador (interfaz de usuario) que tiene el evento. Esta propiedad devuelve un valor que representa algo de información sobre el evento. La específica significado asociado con el tipo de evento. Por ejemplo, para clicky dblclickeventos, Event.detailes el número de ratón pulsado ( 1lo que indica que hacer clic, 2doble clic, 3representar tres strikes); para eventos de rueda del ratón, Event.detailuna rueda de rodadura hacia adelante desde un valor negativo es la distancia de rodadura negativo, el valor del rendimiento total es un múltiplo de 3.

// HTML 代码如下
// <p>Hello</p>
function giveDetails(e) {
  console.log(e.detail);
}

document.querySelector('p').onclick = giveDetails;

Ejemplos de métodos

Event.preventDefault ()

Event.preventDefaultMétodo para cancelar el comportamiento predeterminado del navegador para el evento actual. Por ejemplo, haga clic en el enlace, el navegador va a saltar a otra página por defecto, después de usar este método, no van a saltar; otro ejemplo, presione la barra espaciadora, desplazarse por la página para una cierta distancia, después de usar este método serán no laminado. Premisa de este método es que surta efecto, el objeto de evento cancelablede propiedad true, si se trata false, llamar a este método no tiene ningún efecto.

Tenga en cuenta que este método sólo cancelar el evento predeterminado sobre el impacto del elemento actual, no impedirá la difusión del evento. Si desea detener la propagación, puede utilizar stopPropagation()o stopImmediatePropagation()método.

// HTML 代码为
// <input type="checkbox" id="my-checkbox" />
var cb = document.getElementById('my-checkbox');

cb.addEventListener(
  'click',
  function (e){ e.preventDefault(); },
  false
);

El código anterior, el comportamiento por defecto del navegador es hacer clic en el botón de opción se selecciona mediante la abolición de este comportamiento, no se puede seleccionar la casilla de verificación de plomo.

Usando este método, es posible establecer una condición de verificación a la caja de entrada de texto. Si la entrada del usuario no cumple con las condiciones, no se puede introducir el cuadro de texto caracteres.

// HTML 代码为
// <input type="text" id="my-input" />
var input = document.getElementById('my-input');
input.addEventListener('keypress', checkName, false);

function checkName(e) {
  if (e.charCode < 97 || e.charCode > 122) {
    e.preventDefault();
  }
}

El cuadro de texto el código de seguridad keypressdespués de la función de ajuste evento oyente letras minúsculas única entrada, de lo contrario entrar en el comportamiento por defecto será cancelada evento (cuadro de texto escrito), lo que lleva a no entrar en el cuadro de texto.

Event.stopPropagation ()

stopPropagationLos evita método del evento sigue circulando en el DOM, impiden re-trigger la función de escucha se define en el otro nodo, pero no incluye otros detectores de eventos sobre la función de nodo actual.

function stopEvent(e) {
  e.stopPropagation();
}

el.addEventListener('click', stopEvent, false);

El código anterior, el clickevento no será más que burbujea a elnodo principal.

Event.stopImmediatePropagation ()

Event.stopImmediatePropagationCon una manera de prevenir otra función de detector de eventos que se llama, en el nodo actual u otros nodos, independientemente de la definición de función de detector. En otras palabras, la manera de detener la propagación del incidente, que Event.stopPropagation()más a fondo.

Si el mismo nodo para el mismo evento especificado múltiples funciones del monitor que a su vez llama a la orden añadido. Siempre y cuando no es una función de detector llama al Event.stopImmediatePropagationmétodo, no se ejecutará la otra función de monitor.

function l1(e){
  e.stopImmediatePropagation();
}

function l2(e){
  console.log('hello world');
}

el.addEventListener('click', l1, false);
el.addEventListener('click', l2, false);

En el código anterior elen el nodo para clickel detector de eventos añade dos funciones l1y l2. Desde la l1llamada de event.stopImmediatePropagationmétodo, l2no se llamará.

Event.composedPath ()

Event.composedPath()Devuelve un miembros de la matriz son los nodos de nivel más bajo, a su vez burbujeo a través de eventos y todo el nodo superior.

// HTML 代码如下
// <div>
//   <p>Hello</p>
// </div>
var div = document.querySelector('div');
var p = document.querySelector('p');

div.addEventListener('click', function (e) {
  console.log(e.composedPath());
}, false);
// [p, div, body, html, document, Window]

El código anterior, clickel nodo inferior es el evento p, seguido div, body, html, document, Window.