首页 文章

如何在JavaScript中触发事件?

提问于
浏览
441

我已使用 addEventListener 将事件附加到文本框 . 它工作正常 . 当我想以编程方式从另一个函数触发事件时,出现了我的问题 .

我该怎么做?

16 回答

  • 412
    var btn = document.getElementById('btn-test');
    var event = new Event(null);
    
    event.initEvent('beforeinstallprompt', true, true);
    btn.addEventListener('beforeinstallprompt', null, false);
    btn.dispatchEvent(event);
    

    这将imediattely触发事件'beforeinstallprompt'

  • 13

    你想要的是这样的:

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

    使用jQuery,它将是这样的:

    $(".example").trigger("click");
    
  • 5
    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");
    
  • 23

    只是建议一个不需要手动调用监听器事件的替代方案:

    无论您的事件监听器做什么,都将其移动到一个函数中并从事件监听器调用该函数 .

    然后,您还可以在其他任何地方调用该函数,以完成事件触发时所执行的操作 .

    我发现这不那么“代码密集”,更容易阅读 .

  • 4

    我使用JavaScript在mouseover上搜索了click click,mousedown和mouseup事件 . 我找到了Juan Mendes提供的答案 . 如需答案,请单击here .

    点击here是现场演示,下面是代码:

    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);
        }
    };
    
  • 8

    如果您不想使用JQuery并且不特别关注向后兼容性,请使用

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

    请参阅文档herehere .

  • 12

    使用jquery事件调用 . 在下面的行中写下要触发任何元素的onChange .

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

    element_id是要触发其onChange的元素的ID .

    避免使用

    element.fireEvent("onchange");
    

    因为它的支持很少 . 请参阅此文档以获取support .

  • 6

    您可以在IE 8或更低版本上使用fireEvent,在大多数其他浏览器上使用w3c的dispatchEvent . 要创建要触发的事件,可以使用 createEventcreateEventObject ,具体取决于浏览器 .

    这是一段不言自明的代码(来自原型),在 element 上触发事件 dataavailable

    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);
      }
    
  • 0

    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 
    }
    
  • 0

    我只是使用了以下(似乎更简单):

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

    在这种情况下,只有当值被真正改变时才会触发事件,正如您通过用户执行的正常聚焦轨迹触发它一样 .

  • 274

    你可以使用我编译在一起的这个功能 .

    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);
                }
            }
        }
      }
    

    触发以下事件:

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

    观看活动:

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

    希望这可以帮助!

  • 0

    一个工作的例子:

    // 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);
    

    对于较旧的浏览器polyfill以及更复杂的示例,请参阅MDN docs .

    请参阅EventTarget.dispatchEventCustomEvent的支持表 .

  • -1

    如果你使用jQuery,你可以简单地做

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

    并处理它

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

    其中“[arg0,arg1,...,argN]”表示这些参数是可选的 .

  • -1

    修改@ Dorian的answer与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/

    SEE ALSO:
    https://caniuse.com/#feat=customevent

  • -10

    如果您支持IE9,则可以使用以下内容 . 同样的概念被纳入You Might Not Need 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...'
    });
    

    如果您已经在使用jQuery,那么这里是上面代码的jQuery版本 .

    $(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>
    
  • 37

    最有效的方法是调用直接在 addEventListener 注册的相同函数 .

    您还可以使用 CustomEvent 和co触发假事件 .

    最后一些元素如 <input type="file"> 支持 .click() 方法 .

相关问题