ejemplo - ¿Cómo activar el evento en JavaScript?

onclick php

Question

He adjuntado un evento a un cuadro de texto usando addEventListener . Funciona bien. Mi problema surgió cuando quería activar el evento mediante programación desde otra función.

¿Cómo puedo hacerlo?

Answer 1

Acabo de usar lo siguiente (parece ser mucho más simple):

element.blur();
element.focus();

En este caso, el evento se desencadena solo si el valor se cambió realmente de la misma manera que lo haría el locus de enfoque normal perdido realizado por el usuario.

Answer 2

Busqué para disparar clics, mousedown y mouseup en el mouseover usando JavaScript. Encontré una respuesta proporcionada por Juan Mendes . Para la respuesta, haga clic here .

Haga clic here la demostración en vivo y debajo está el código:

function fireEvent(node, eventName) {
    // Make sure we use the ownerDocument from the provided node to avoid cross-window problems
    var doc;
    if (node.ownerDocument) {
        doc = node.ownerDocument;
    } else if (node.nodeType == 9) {
        // the node may be the document itself, nodeType 9 = DOCUMENT_NODE
        doc = node;
    } else {
        throw new Error("Invalid node passed to fireEvent: " + node.id);
    }

    if (node.dispatchEvent) {
        // Gecko-style approach (now the standard) takes more work
        var eventClass = "";

        // Different events have different event classes.
        // If this switch statement can''t map an eventName to an eventClass,
        // the event firing is going to fail.
        switch (eventName) {
        case "click": // Dispatching of ''click'' appears to not work correctly in Safari. Use ''mousedown'' or ''mouseup'' instead.
        case "mousedown":
        case "mouseup":
            eventClass = "MouseEvents";
            break;

        case "focus":
        case "change":
        case "blur":
        case "select":
            eventClass = "HTMLEvents";
            break;

        default:
            throw "fireEvent: Couldn''t find an event class for event ''" + eventName + "''.";
            break;
        }
        var event = doc.createEvent(eventClass);

        var bubbles = eventName == "change" ? false : true;
        event.initEvent(eventName, bubbles, true); // All events created as bubbling and cancelable.

        event.synthetic = true; // allow detection of synthetic events
        // The second parameter says go ahead with the default action
        node.dispatchEvent(event, true);
    } else if (node.fireEvent) {
        // IE-old school style
        var event = doc.createEventObject();
        event.synthetic = true; // allow detection of synthetic events
        node.fireEvent("on" + eventName, event);
    }
};

Answer 3

HTML

<a href="demoLink" id="myLink"> myLink </a>
<button onclick="fireLink(event)"> Call My Link </button>

JS

// click event listener of the link element --------------  
document.getElementById(''myLink'').addEventListener("click", callLink);
function callLink(e) {
    // code to fire
}

// function invoked by the button element ----------------
function fireLink(event) {                   
    document.getElementById(''myLink'').click();      // script calls the "click" event of the link element 
}

Answer 4

La answer @ Dorian modificada para trabajar con IE:

document.addEventListener("my_event", function(e) {
  console.log(e.detail);
});

var detail = ''Event fired'';

try {

    // For modern browsers except IE:
    var event = new CustomEvent(''my_event'', {detail:detail});

} catch(err) {

  // If IE 11 (or 10 or 9...?) do it this way:

    // Create the event.
    var event = document.createEvent(''Event'');
    // Define that the event name is ''build''.
    event.initEvent(''my_event'', true, true);
    event.detail = detail;

}

// Dispatch/Trigger/Fire the event
document.dispatchEvent(event);

FIDDLE: https://jsfiddle.net/z6zom9d0/1/

VER TAMBIÉN:
caniuse.com/#feat=customevent

Answer 5

La forma más eficiente es llamar a la misma función que se ha registrado directamente con addEventListener .

También puede activar un evento falso con CustomEvent y co.

Finalmente, algunos elementos como <input type="file"> admiten un método .click() .

Answer 6

Lo que quieres es algo como esto:

document.getElementByClassName("example").click();

Usando jQuery, sería algo como esto:

$(".example").trigger("click");

Answer 7

Podrías usar esta función que he compilado juntos.

if (!Element.prototype.trigger)
  {
    Element.prototype.trigger = function(event)
    {
        var ev;

        try
        {
            if (this.dispatchEvent && CustomEvent)
            {
                ev = new CustomEvent(event, {detail : event + '' fired!''});
                this.dispatchEvent(ev);
            }
            else
            {
                throw "CustomEvent Not supported";
            }
        }
        catch(e)
        {
            if (document.createEvent)
            {
                ev = document.createEvent(''HTMLEvents'');
                ev.initEvent(event, true, true);

                this.dispatchEvent(event);
            }
            else
            {
                ev = document.createEventObject();
                ev.eventType = event;
                this.fireEvent(''on''+event.eventType, event);
            }
        }
    }
  }

Desencadenar un evento a continuación:

var dest = document.querySelector(''#mapbox-directions-destination-input'');
dest.trigger(''focus'');

Ver evento:

dest.addEventListener(''focus'', function(e){
   console.log(e);
});

¡Espero que esto ayude!

Answer 8

Puede usar fireEvent en IE 8 o inferior, y disp3Ev de w3c en la mayoría de los otros navegadores. Para crear el evento que desea activar, puede usar createEvent o createEventObject según el navegador.

Aquí hay una pieza de código autoexplicativa (del prototipo) que dispara un evento de dataavailable en un element :

  var event; // The custom event that will be created

  if (document.createEvent) {
    event = document.createEvent("HTMLEvents");
    event.initEvent("dataavailable", true, true);
  } else {
    event = document.createEventObject();
    event.eventType = "dataavailable";
  }

  event.eventName = "dataavailable";

  if (document.createEvent) {
    element.dispatchEvent(event);
  } else {
    element.fireEvent("on" + event.eventType, event);
  }

Answer 9

Si está soportando IE9 + puede usar lo siguiente. El mismo concepto está incorporado en JQuery .

function addEventListener(el, eventName, handler) {
  if (el.addEventListener) {
    el.addEventListener(eventName, handler);
  } else {
    el.attachEvent(''on'' + eventName, function() {
      handler.call(el);
    });
  }
}

function triggerEvent(el, eventName, options) {
  var event;
  if (window.CustomEvent) {
    event = new CustomEvent(eventName, options);
  } else {
    event = document.createEvent(''CustomEvent'');
    event.initCustomEvent(eventName, true, true, options);
  }
  el.dispatchEvent(event);
}

// Add an event listener.
addEventListener(document, ''customChangeEvent'', function(e) {
  document.body.innerHTML = e.detail;
});

// Trigger the event.
triggerEvent(document, ''customChangeEvent'', {
  detail: ''Display on trigger...''
});

Si ya está utilizando jQuery, aquí está la versión de jQuery del código anterior.

$(function() {
  // Add an event listener.
  $(document).on(''customChangeEvent'', function(e, opts) {
    $(''body'').html(opts.detail);
  });

  // Trigger the event.
  $(document).trigger(''customChangeEvent'', {
    detail: ''Display on trigger...''
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

Answer 10

Si no desea usar JQuery y no está especialmente preocupado por la compatibilidad con versiones anteriores, solo use

let element = document.getElementById(id);
element.dispatchEvent(new Event("change")); // or whatever the event type might be

Vea la documentación here y here .

Answer 11

Si usas jQuery, puedes simplemente hacer

$(''#yourElement'').trigger(''customEventName'', [arg0, arg1, ..., argN]);

y manejarlo con

$(''#yourElement'').on(''customEventName'',
   function (objectEvent, [arg0, arg1, ..., argN]){
       alert ("customEventName");
});

donde "[arg0, arg1, ..., argN]" significa que estos argumentos son opcionales.

Answer 12

Solo para sugerir una alternativa que no implique la necesidad de invocar manualmente un evento de escucha:

Independientemente de lo que haga su detector de eventos, muévalo a una función y llame a esa función desde el detector de eventos.

Luego, también puede llamar a esa función en cualquier otro lugar que necesite para lograr lo mismo que el evento hace cuando se dispara.

Encuentro este código menos "intensivo" y más fácil de leer.

Answer 13

Un ejemplo de trabajo:

// Add an event listener
document.addEventListener("name-of-event", function(e) {
  console.log(e.detail); // Prints "Example of an event"
});

// Create the event
var event = new CustomEvent("name-of-event", { "detail": "Example of an event" });

// Dispatch/Trigger/Fire the event
document.dispatchEvent(event);

Para polyfill navegadores más antiguos y ejemplos más complejos, consulte la documentación de MDN .

Consulte las tablas de soporte para EventTarget.dispatchEvent y CustomEvent .

Answer 14

Use jquery event call. Escriba la línea de abajo donde desea activar el cambio de cualquier elemento.

$("#element_id").change();

element_id es el ID del elemento cuyo onChange desea activar.

Evitar el uso de

 element.fireEvent("onchange");

Porque tiene muy menos apoyo. Consulte este documento para su support .

Answer 15

function fireMouseEvent(obj, evtName) {
    if (obj.dispatchEvent) {
        //var event = new Event(evtName);
        var event = document.createEvent("MouseEvents");
        event.initMouseEvent(evtName, true, true, window,
                0, 0, 0, 0, 0, false, false, false, false, 0, null);
        obj.dispatchEvent(event);
    } else if (obj.fireEvent) {
        event = document.createEventObject();
        event.button = 1;
        obj.fireEvent("on" + evtName, event);
        obj.fireEvent(evtName);
    } else {
        obj[evtName]();
    }
}

var obj = document.getElementById("......");
fireMouseEvent(obj, "click");

Answer 16

var btn = document.getElementById(''btn-test'');
var event = new Event(null);

event.initEvent(''beforeinstallprompt'', true, true);
btn.addEventListener(''beforeinstallprompt'', null, false);
btn.dispatchEvent(event);

esto desencadenará inmediatamente un evento ''antes de la instalación''