我如何從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> OR PolymerJS自定義元素的事件on-click，on-tap等）

Answer 1

關鍵elem.dispatchEvent(event);

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

當用戶click（或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