javascript 如何在 Polymer 中的元素上触发事件？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25466120/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I trigger an event on an element in Polymer?
提问by James Donnelly
How it works without Polymer
没有聚合物它是如何工作的
In JavaScript you can trigger an event by simply invoking the method on the element itself:
在 JavaScript 中，您可以通过简单地调用元素本身的方法来触发事件：
<input id="foo" type="text" onclick="console.log('Click event triggered');" />
var elem = document.getElementById('foo');
elem.onclick();
This works fine, as can be seen in this JSFiddle demo.
这很好用，可以在这个 JSFiddle demo 中看到。
Attempting to do the same in Polymer
尝试在 Polymer 中做同样的事情
Polymer however has a different syntax, and uses on-clickinstead of onclick:
然而，Polymer 具有不同的语法，并使用on-click代替onclick：
<input type="text" on-click="{{ clickEvent }}" />
Polymer('my-element', {
clickEvent: function() {
console.log('Click event triggered.');
}
});
I want to manually call the on-clickevent on my inputelement every time a key is pressed. For this I'm using an on-keypresshandler which fires my doClickevent:
每次按下一个键时，我都想on-click在我的input元素上手动调用该事件。为此，我使用了一个on-keypress触发我的doClick事件的处理程序：
<input type="text" on-click="{{ clickEvent }}" on-keypress="{{ doClick }}" />
doClick: function(event, detail, sender) {
console.log('Keypress event triggered.');
sender.onclick();
}
As per Polymer's event binding, senderhere is the element which the event occurred on (my inputelement in this case). This unfortunately gives me the following output:
根据 Polymer 的事件绑定，sender这里是发生事件的元素（input在本例中为我的元素）。不幸的是，这给了我以下输出：
Keypress event triggered
Uncaught TypeError: object is not a function
Keypress 事件触发
Uncaught TypeError: object is not a function
The error happens because sender.onclickis null, as can be seen (on Chrome only) in this JSFiddle demo*.
发生错误的原因sender.onclick是null，正如在此 JSFiddle 演示中可以看到的（仅在 Chrome 上）*。
How can I trigger an event on an element in Polymer?
如何在 Polymer 中的元素上触发事件？
* I've pinched the Polymer set-up from someone else's JSFiddle demo. This for whatever reason is only working in Chrome, however this problem isn't specific to Chrome itself.
*我从其他人的 JSFiddle 演示中提取了 Polymer 设置。无论出于何种原因，这仅适用于 Chrome，但此问题并非特定于 Chrome 本身。
Before anyone asks me why on earth I'd want to trigger the click event on an inputelement every time a key is pressed, do note that this is nothing more than really crude example and not the actual code I'm using. This was just the shortest way I was able to demonstrate the problem.
在有人问我为什么input每次按下一个键时我都想在元素上触发 click 事件之前，请注意这只不过是一个非常粗略的例子，而不是我正在使用的实际代码。这只是我能够证明问题的最短方式。
采纳答案by OmarCastro
The correct way to trigger a click event is calling click()instead of onclick(), so the correct function would be
触发点击事件的正确方法是调用click()而不是调用onclick()，所以正确的函数是
doClick: function(event, detail, sender) {
console.log('Keypress event triggered');
sender.click();
}
here is the JSFiddle Demo
You can also call the function instead of triggering an event if you are pointing the same element
如果您指向同一个元素，您还可以调用该函数而不是触发事件
Polymer('my-element', {
clickEvent: function() {
console.log('Click event triggered');
},
doClick: function(event, detail, sender) {
console.log('Keypress event triggered');
this.clickEvent();
}
});
here is another JSFiddle Demo
这是另一个JSFiddle 演示
回答by Let Me Tink About It
Summary from comments per @scottMiles:
来自@scottMiles 的评论摘要：
A more general way of triggering events is via the dispatchEvent DOM api, or the helper method on Polymer elements called
fire. – Scott Miles
触发事件的更通用方法是通过 dispatchEvent DOM api，或名为
fire. – 斯科特·迈尔斯
