HTML中的自定義事件，Javascript

我期待在HTML，JS中創建自定義事件。HTML中的自定義事件，Javascript

<input type="text" oncustombind="foo(event);" />

如何創建一個這樣的？ 'oncustombind'是我想要創建的自定義事件。我應該能夠調用oncustombind屬性中定義的函數/代碼。另外，我需要將一些數據傳遞給事件對象。

我不想使用任何庫，如jQuery，YUI。

任何幫助將深表謝意。

來源

2011-10-28 varunvs

由於HTML中的內嵌JavaScript是一個很大的骯髒的黑客攻擊。不要這樣做。 – Raynos

由於問題發佈時間已更改。目前，Web組件正在成爲替代js框架的可行方法。內聯自定義事件對於編寫可以輕鬆讀取的代碼實際上非常有用（類似於角度/反應）。一個很好的技巧是使用Object.assign共享web組件的'this'上下文和chidlren dom元素。通過這種方式，任何選定的Dom元素都可以訪問Web組件類中定義的方法。從內聯自定義事件處理程序訪問自定義事件會更好。 –

你想要一個CustomEvent

他們應該是容易，但瀏覽器的支持工作很窮。但DOM-shim應該解決這個問題。

var ev = new CustomEvent("someString"); 
var el = document.getElementById("someElement"); 
el.addEventListener("someString", function (ev) { 
    // should work 
}); 
el.dispatchEvent(ev);

來源

2011-10-28 10:18:59 Raynos

使用new Function和with是不好的做法，但是這可以按如下方式完成：http://jsfiddle.net/pimvdb/72GwE/13/。

function trigger(elem, name, e) { 
    var func = new Function('e', 

     'with(document) {' 
    + 'with(this) {' 
    + elem.getAttribute('on' + name) 
    + '}' 
    + '}'); 

    func.call(elem, e); 
}

具有以下HTML：

<input type="text" oncustombind="console.log(e, type, getElementById);" id="x">

則觸發事件，如：

trigger(document.getElementById('x'), 'custombind', {foo: 123});

來源

2011-10-28 09:36:39 pimvdb

@Raynos：你會用什麼來使'window'，'document'，'event'和'e'在範圍內？沒有比'with'更好的辦法... – pimvdb

在什麼範圍內？ 'window'，'document'，'elem'和'e'已經在範圍之內。 – Raynos

@Raynos：在HTML事件屬性中，您可以自動獲取屬性和「文檔」的功能，例如，前面沒有'document.'的getElementById'。 – pimvdb

HTML中的自定義事件，Javascript

回答

相關問題