logo标签列表

使用参数触发事件

javascriptcustom-events
27

这真的很烦人。我只想在Javascript中触发一个事件。像平常一样，我需要将事件对象传递到参数中并添加一个自定义参数。

在jQuery中，这非常容易：

$('#element').trigger('myevent', 'my_custom_parameter');

但我不想使用这个。我发现的所有与此相关的其他问题都建议“使用jQuery！”这是为我正在开发的插件，并且仅为一个方法需要引入jQuery非常愚蠢。有人能指出一种使用纯JS完成上述操作且跨浏览器兼容的方法吗？

如何实现跨浏览器兼容？是支持所有现代浏览器（例如IE 10+），还是当前的遗留浏览器（IE 8），或者尽可能向后兼容？ - Sean Vieira
为什么需要在DOM中使用自定义事件？ - Bergi
@SeanVieira 最好是IE8兼容性。 - andy
@Bergi - 我想他这样做是因为他希望他的组件创建对该组件有意义的事件。(例如，使用“addOption”事件而不是“click”和“blur”) - Sean Vieira
@Bergi 这是一个插件，用于在高亮时触发事件，但有很多原因需要自定义事件。 - andy
显示剩余4条评论
4个回答
29

您可以创建自定义事件http://jsfiddle.net/9eW6M/

HTML

<a href="#" id="button">click me</a>

JavaScript

var button = document.getElementById("button");
button.addEventListener("custom-event", function(e) {
    console.log("custom-event", e.detail);
});
button.addEventListener("click", function(e) {
    var event = new CustomEvent("custom-event", {'detail': {
        custom_info: 10,
        custom_property: 20
    }});
    this.dispatchEvent(event);
});

点击链接后的输出：

custom-event Object {custom_info: 10, custom_property: 20}

更多信息可在此处找到。

16

创建事件

要创建一个简单的事件，请使用Event构造函数。

var event = document.createEvent('MyEvent');

然而，如果您想将数据随事件一起传递，请改用CustomEvent 构造函数。

var event = CustomEvent('MyEvent', { 'detail': 'Wow, my very own Event!' });

分发事件

您可以使用targetElement.dispatchEvent来触发事件。

var elem =document.getElementById('myElement');
elem.dispatchEvent(event);

抓取事件 

elem.addEventListener('MyEvent', function (e) { console.log(e.detail); }, false);

对于旧的浏览器（IE9之前）

您需要使用document.createEvent函数。

// Create the event.
var event = document.createEvent('Event');

// Define that the event name is 'build'.
event.initEvent('MyEvent', true, true);

//Any Element can dispatch the event
elem.dispatchEvent(event);

请注意，此方法已被弃用，仅应用于兼容性目的。

更多帮助：https://developer.mozilla.org/en-US/docs/Web/Guide/DOM/Events/Creating_and_triggering_events：MDN：创建和触发事件

5

事件对象和一个额外的自定义参数

使用原生DOM方法是不可能实现的。处理程序只能接收一个参数，即事件对象。因此，如果您需要传递任何数据，您需要将其作为事件对象的（自定义）属性。您可以使用DOM4的CustomEvent构造函数（请参见MDN文档以获取跨浏览器的shim）。

然后，像通常一样使用dispatchEvent来触发（自定义或本地）脚本事件。对于IE9以下的版本，似乎需要使用fireEvent。

0
这真的很烦人。我想在JavaScript中“只触发一个事件”。我需要像往常一样将事件对象传递到参数中，并添加一个自定义参数。
因此，您可以使用原型来扩展DOM并创建自己的方法，而不是使用jQuery（无需new customEvent()）。
这里有一个例子： （或者您可以修改它并在dispatchCustomEvent中发送回调函数） 

// set custom event to dom objects
Element.prototype.addCustomEventListener = function(eventName, callbackFunction) {
    var customEvent = {
        name: eventName,  // just for info
        callbackFunction: callbackFunction  // function to use on callback
    };
    if (!this.customEvents) {
        this.customEvents = [];
    }
    this.customEvents[eventName] = customEvent;
    return this;
};

// dispatch or trigger
Element.prototype.dispatchCustomEvent = function() { // args: eventName, args for callback
    var args = Array.from(arguments);
    var eventName = args.shift();
    // apply callback function
    // you can also add 'this' to the args list and have access to element:
    // args.unshift(this)
    this.customEvents[eventName].callbackFunction.apply(null, args);
    return this; // or return result of callbackFunction
}

// function to call
function foo(something) {
  // do some stuff here
  console.log('There is ' + something);
}

document.getElementById("mainContainer").addCustomEventListener('sweetEvent', foo);

// somewhere else in the code, or in console you can than execute
document.getElementById("mainContainer").dispatchCustomEvent('sweetEvent', 'my custom attribute');
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>something</title>
</head>

<body id="mainContainer">
    some content here
</body>
</html>

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接