events js触发click事件 - 如何在JavaScript中触发事件?





js触发change事件 原生js触发click事件 (11)


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

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

element_id是要触发onChange的元素的ID。

避免使用

 element.fireEvent("onchange");

因为它的支持非常少。 请参阅此文件以获得support

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

我该怎么做?




你想要的是这样的:

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

使用jQuery,它会是这样的:

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



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

无论你的事件监听器做什么,将它移入一个函数并从事件监听器调用该函数。

然后,您还可以在需要的其他任何地方调用该功能,以完成与事件触发时相同的事情。

我觉得这不是“代码密集型”,更容易阅读。




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

这是一个不言自明的代码片段(来自原型),它触发elementdataavailable的事件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);
  }



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

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

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




如果您支持IE9 +,则可以使用以下内容。 您可能不需要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>




我使用JavaScript搜索点击,鼠标悬停和mouseup事件。 我找到了胡安·门德斯提供的答案。 答案请点击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);
    }
};



一个工作示例:

// 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文档

请参阅EventTarget.dispatchEventCustomEvent支持表。




修改@ 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/ ://jsfiddle.net/z6zom9d0/1/

也可以看看:
caniuse.com/#feat=customevent




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

您也可以使用CustomEvent和co触发假事件。

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




这是一个延时重定向。 您可以将延迟时间设置为您想要的任何时间:

<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Your Document Title</title>
    <script type="text/javascript">
        function delayer(delay) {
            onLoad = setTimeout('window.location.href = "http://www.google.com/"', delay);
        }
    </script>
</head>

<body>
    <script>
        delayer(8000)
    </script>
    <div>You will be redirected in 8 seconds!</div>
</body>

</html>




javascript events javascript-events triggers addeventlistener