如何在觸發的CustomEvent上偵聽和響應？

我想了解如何在Javascript中使用CustomEvent系統。如何在觸發的CustomEvent上偵聽和響應？

[EDIT2]

的夢想溶液是在這裏：http://www.html5rocks.com/en/tutorials/es7/observe/

[/ EDIT2]

[編輯]

這片碼的示出相當不錯的DOM類型我正在尋找Thx to @Jared Farrish，還有延期方法。但我仍然認爲這是一種JavaScript限制，並且langage值得實施一個聰明的方法來做。理想情況下，孩子不必執行父母或其他任何元素給出的指令。相反，通過實時瞭解DOM活動的有趣部分，子節點應該自行做出決定。

var body = document.body, 
    btn = document.getElementById('fire'), 
    warn; 

    warn = document.createEvent('CustomEvent'); 
    warn.initEvent('warning', true, true); 

body.addEventListener('warning', function() { 
    body.style.backgroundColor = 'blue'; 
}); 

btn.addEventListener('warning', function() { 
    this.style.backgroundColor = 'green'; 
}); 

btn.addEventListener('click', function init() { 
    body.dispatchEvent(warn); 
    btn.dispatchEvent(warn); 
});

源：http://jsfiddle.net/p6myjLza/2/

[/編輯]

話說我創建這個非常基本的事件：

var warning = new CustomEvent('warning', { 
    'detail': 'This is a warning!' 
});

現在對象warning包含有用數據。它存儲在瀏覽器內存中。讓我們觸發它。

document.dispatchEvent(warning);

通過上面的說法做，我想我要document說：「嘿，夥計，這觸發特定事件PLZ」。然後，事件被觸發。據我瞭解，我認爲這也意味着（不知何故）DOM意識到事件已被觸發。

現在我希望每次觸發事件warning時，另一個元素（說身體）將style.backgroundColor從透明變爲紅色。換句話說，我希望身體聽到這個具體的事件並作出反應。

但是這不起作用。

實際上，如果我通過在第一個之前初始化第二個位置來切換dispatchEvent()和addEventListener()的位置，它將起作用。但這不是我所期望的Javascript。我想要實現的是觸發某個事件的能力，並在其他地方訂購某個元素來捕捉它並在每次觸發事件時作出反應。

是否可以實現？

注：我今天發現了承諾，並認爲他們是我正在尋找的東西，但他們不是因爲他們只是能夠「鏈接」事物而不能延遲他們。

來源

2015-04-05 Guillaume Fe

這是你如何將其安排在一個簡單的例子：http://jsfiddle.net/p6myjLza/ 1請注意，自定義事件只是通過DOM處理事件的工具;它需要在你的例子中針對元素進行調度，這是'document.body'。這裏是另一個（稍微更完整）的例子：http://stackoverflow.com/a/12341715/451969 – 2015-04-06 00:02:24

事件不記得，所以你必須在事件被提出之前添加監聽器... – dandavis 2015-04-06 00:08:34

另外，我認爲你的困惑來自於你正在創建和派發事件（在頁面加載期間，我假設），然後（稍後在頁面加載中）添加一個偵聽器，這在調用自定義事件時不存在。這有點像叫「狼！」然後買羊。切換它們「工作」是因爲你添加了事件監聽器，然後立即調用一個事件，所以這個命令恰好工作。在我的示例中查看我如何在'button.click'事件中使用事件處理程序，這意味着事件在兩個事件偵聽器存在之後創建/分派。 – 2015-04-06 00:08:53

你已經差不多了！但是，發生的事情是，您觸發document級別的事件和事件處理程序所在的body標記較低 - 事件在觸發時會冒泡。

如果單純從body調度的情況下，你會看到它觸發處理器

document.getElementsByTagName('body')[0].dispatchEvent(warning);

來源

2015-04-05 23:58:14 vlaz

如何在觸發的CustomEvent上偵聽和響應？

回答

相關問題