javascript - 我如何从 HTML 元素触发自定义事件？

Question

目前我正在使用这样的代码

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

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

// Listen for the event.
elem.addEventListener('swiping', function (e) {
  // e.target matches elem
}, false);

// target can be any Element or other EventTarget.
elem.dispatchEvent(event);

处理元素滑动

我如何从 HTML 元素触发此事件？ (如 <div on-swiping="function-name"></div> 或 PolymerJS 自定义元素事件 on-click 、 on-tap 等)

Answer 1

关键elem.dispatchEvent(event);

您可以使用elem.addEventListener('build', function (e) {

定义自定义事件

当用户点击(或tab)时，您可以使用elem.dispatchEvent(event); 触发该事件

完整的演示是:

var elem = document.querySelector('#test');

// Listen for the event.
elem.addEventListener('build', function (e) {
  alert(elem.innerText);
}, false);

document.querySelector('button').onclick = function() {
  var event = new Event('build');
  // Dispatch the event.
  elem.dispatchEvent(event);
};

<div id="test">test</div>
<button>Buttons</button>

Mozila docs

jsbin