Events

我们编写的许多代码涉及对事件的反应，例如I/O事件（如鼠标点击或键盘事件）和网络事件（当您监听HTTP调用时）。这就是我所说的内置事件。 在JavaScript中，我们可以创建自定义事件，并且它在浏览器和Node.js中的工作方式不同。 在前端，我们使用浏览器提供的Event对象： const anEvent = new Event('start'); 您可以使用以下代码触发事件： document.dispatchEvent(anEvent) 当发生这种情况时，事件监听器将被触发： document.addEventListener('start', event => { console.log('started!') }) 您可以使用内置的CustomEvent对象发送自定义数据，而不是使用Event对象，该对象接受一个对象作为第二个参数： const anotherEvent = new CustomEvent('start', { detail: { color: 'white' } }) 在事件监听器中，您可以使用event.detail从事件对象中获取数据（您不能使用其他属性）： document.addEventListener('start', event => { console.log('started!') console.log(event.detail) }) 在后端，Node为我们提供了一种使用events模块构建类似系统的选项。 这个模块特别提供了EventEmitter类，我们将使用它来处理我们的事件。 使用以下代码初始化： const EventEmitter = require('events') const eventEmitter = new EventEmitter() 该对象提供了许多其他方法，其中包括on和emit方法。 emit用于触发事件 on用于在事件触发时添加要执行的回调函数 例如，让我们创建一个start事件，并作为示例，我们只是将其记录到控制台： eventEmitter.on('start', () => { console.log('started') }) 当我们运行以下代码时： eventEmitter.emit('start') 事件处理函数将被触发，并且我们会得到控制台日志。 您可以通过将它们作为额外参数传递给emit()来将参数传递给事件处理程序： eventEmitter.on('start', (number) => { console.log(`started ${number}`) }) eventEmitter....

Node.js的events模組提供了EventEmitter類別 events模組為我們提供了EventEmitter類別，這是在Node中處理事件的關鍵。 我在這篇完整的文章中發布了更多詳細內容，所以在這裡我僅描述API而不提供進一步的用例。 const EventEmitter = require('events') const door = new EventEmitter() 事件監聽器也使用這些事件： newListener 當監聽器被添加時 removeListener 當監聽器被移除時 以下是最常用方法的詳細說明： emitter.addListener() emitter.emit() emitter.eventNames() emitter.getMaxListeners() emitter.listenerCount() emitter.listeners() emitter.off() emitter.on() emitter.once() emitter.prependListener() emitter.prependOnceListener() emitter.removeAllListeners() emitter.removeListener() emitter.setMaxListeners() emitter.addListener() emitter.on()的別名。 emitter.emit() 觸發一個事件。按照它們註冊的順序同步調用每個事件監聽器。 emitter.eventNames() 返回一個字串陣列，表示當前EventListener上註冊的事件： door.eventNames() emitter.getMaxListeners() 獲取可以添加到EventListener對象的最大監聽器數量，默認為10，但可以通過使用setMaxListeners()增加或減少。 door.getMaxListeners() emitter.listenerCount() 獲取傳遞的事件的監聽器的數量： door.listenerCount('open') emitter.listeners() 獲取傳遞的事件的監聽器數組： door.listeners('open') emitter.off() emitter.removeListener()在Node 10中新增的別名。 emitter.on() 添加在事件觸發時調用的回調函數。 用法： door.on('open', () => { console.log('門被打開了') }) emitter.once() 添加在註冊後僅在首次觸發事件時調用的回調函數。這個回調函數只會被調用一次，後續不再調用。 const EventEmitter = require('events') const ee = new EventEmitter() ee....

如何在Node中使用自定義事件 如果你在瀏覽器中使用JavaScript，你知道多數的用戶互動是透過事件處理的，像是滑鼠點擊、鍵盤按鍵、對滑鼠移動作出反應等等。 在後端，Node給了我們使用events模組來建立類似的系統的選項。 這個模組中，有一個EventEmitter類別，我們會用它來處理我們的事件。 你可以使用以下語法來初始化一個EventEmitter物件: const EventEmitter = require('events') const eventEmitter = new EventEmitter() 這個物件暴露了許多方法，其中包括on和emit。 emit方法用於觸發一個事件。 on方法用於添加一個當事件觸發時要執行的回調函數。 觸發和監聽事件 舉個例子，我們來創建一個start事件，作為一個示範，我們只是對它作出反應，並將其日誌記錄到控制台： eventEmitter.on('start', () => { console.log('started') }) 當我們執行 eventEmitter.emit('start') 事件處理函數將會被觸發，並且我們將得到控制台日誌記錄。 addListener()是on()的別名，如果你看到那樣的寫法，它們表示的是同一個意思。 將參數傳遞給事件 你可以通過將它們作為額外的參數傳遞給emit()的方式，將參數傳遞給事件處理函數： eventEmitter.on('start', (number) => { console.log(`started ${number}`) }) eventEmitter.emit('start', 23) 多個參數： eventEmitter.on('start', (start, end) => { console.log(`started from ${start} to ${end}`) }) eventEmitter.emit('start', 1, 100) 只監聽一次事件 EventEmitter物件還提供了once()方法，你可以使用它來創建一個一次性事件監聽器。 一旦該事件觸發，該監聽器就停止監聽。 例如： eventEmitter.once('start', () => { console.log(`started!`) }) eventEmitter.emit('start') eventEmitter.emit('start') //不會觸發 刪除事件監聽器 一旦你創建了一個事件監聽器，你可以使用removeListener()方法來刪除它。...

＃Phaser：滑鼠輸入 該文章是Phaser系列的一部分。點擊這裡查看系列文章的第一篇。 任何 GameObject 都可以被設置為可互動。 為了實現這一點，我們必須通過調用setInteractive()方法來設置。 text = this.add.text(100, 100, '測試') text.setInteractive() 一旦一個 GameObject 變成了可互動的，它就可以聽取事件。 我們可以使用on()方法來做到這一點。我們通過傳入事件名和當事件發生時要執行的回調函數來實現： text.on('pointerup', function () {}) pointerup只是我們可以聽取的滑鼠事件之一。我們還有： pointerdown pointerdownoutside pointerup pointerupoutside pointermove pointerover pointerout wheel 這只是一個開始。我們還有很多先進的滑鼠（和觸摸）事件控制可供我們使用。 gameobjectdown是一個更通用的事件，當點擊任何互動元素時觸發，它不在物件上觸發，而是在this.input上觸發： this.input.on('gameobjectdown', () => {})

学习如何在React应用中与事件进行交互 React提供了一种简单的方式来管理事件。准备与addEventListener说再见吧。 在关于状态的上一篇文章中，你看到了这个例子： const CurrencySwitcher = props => { return ( <button onClick={props.handleChangeCurrency}> 当前货币是{props.currency}。更改它！ </button> ) } 如果你已经使用JavaScript一段时间了，这就像是普通的JavaScript事件处理程序，只不过这次你是在JavaScript中定义一切，而不是在HTML中，并且你传递的是一个函数，而不是一个字符串。 实际的事件名称有一点不同，因为在React中你使用驼峰命名法，所以onclick变成了onClick，onsubmit变成了onSubmit。 作为参考，这是一个将JavaScript事件混合在一起的老派HTML： <button onclick="handleChangeCurrency()">...</button> 事件处理函数 在组件类中将事件处理函数定义为方法是一种惯例： class Converter extends React.Component { handleChangeCurrency = event => { this.setState({ currency: this.state.currency === '€' ? '$' : '€' }) } } 所有的处理函数都接收一个符合W3C UI Events规范的事件对象，可跨浏览器使用。 在方法中绑定this 不要忘记绑定方法。ES6类的方法默认情况下不绑定this。这意味着如果你不将方法定义为箭头函数，this将不会被定义： class Converter extends React.Component { handleClick = e => { /\* ... \*/ } //... } 使用Babel的属性初始化语法（在create-react-app中默认启用）时，或者需要在构造函数中手动绑定： class Converter extends React....

Vue.js允許我們透過在元素上使用v-on指令來攔截任何DOM事件。這個主題是使組件可以互動的關鍵。 什麼是Vue.js事件 存取原始事件對象 事件修飾符 什麼是Vue.js事件 Vue.js允許我們透過在元素上使用v-on指令來攔截任何DOM事件。 如果我們想要在這個元素上發生點擊事件時做一些事情： <template> <a>點擊我！</a> </template> 我們添加一個v-on指令： <template> <a v-on:click="handleClick">點擊我！</a> </template> Vue還提供了一種非常便捷的替代語法： <template> <a @click="handleClick">點擊我！</a> </template> 您可以選擇使用括號或不使用括號。@click="handleClick"等效於@click="handleClick()"。 handleClick是附加到組件的方法： <script> export default { methods: { handleClick: function(event) { console.log(event) } } } </script> 詳細的方法在我 Vue 方法教程中有更詳盡的解釋。 你在這裡需要知道的是，你可以從事件中傳遞參數：@click="handleClick(param)"，並且它們將在方法內被接收。 存取原始事件對象 在許多情況下，您希望對事件對象執行操作或查找其中的某些屬性。您如何訪問它？ 使用特殊的$event指令： <template> <a @click="handleClick($event)">點擊我！</a> </template> <script> export default { methods: { handleClick: function(event) { console.log(event) } } } </script> 如果你已經傳遞了一個變數： <template> <a @click="handleClick('something', $event)">點擊我！</a> </template> <script> export default { methods: { handleClick: function(text, event) { console....

Vue.js 使用一種超集的 HTML 樣板語言。我們可以使用插值和指令。本文將解釋指令。 v-text v-once v-html v-bind 使用 v-model 雙向綁定 使用運算式 條件語句 循環 事件 顯示或隱藏 事件指令修飾符 自定義指令 在Vue.js 模板和插值中，我們看到了如何在 Vue 模板中嵌入數據。 本文將解釋 Vue.js 在模板中提供的另一種技術：指令。 指令基本上就像是添加在模板內的 HTML 屬性。它們都以 v- 開頭，表示它們是 Vue 的特殊屬性。 讓我們逐一看一下每個 Vue 指令的詳細用法。 v-text 可以使用 v-text 指令來替代插值，它執行相同的工作： <span v-text="name"></span> v-once 你知道 {{ name }} 是綁定到組件數據的 name 屬性的。當你的組件數據中的 name 發生變化時，Vue 會在瀏覽器中更新該值。 除非使用 v-once 指令，它基本上就像是一個 HTML 屬性： <span v-once>{{ name }}</span> v-html 當你使用插值來打印數據屬性時，HTML 會被轉義。這是 Vue 自動保護免受 XSS 攻擊的一種很好的方式。 然而，有時你想要輸出 HTML 並讓瀏覽器解釋它。你可以使用 v-html 指令：...

本篇介紹在Vue.js應用程式中如何讓元件彼此通訊。 Props 從子元件到父元件透過事件通訊 使用事件巴士在任意元件之間通訊 其他替代方案 Vue元件可以使用不同的方式進行通訊。 Props 第一種方式是使用props。 父元件可以透過在元件宣告時加入參數，將資料傳遞給子元件： <template> <div> <Car color="green" /> </div> </template> <script> import Car from './components/Car' export default { name: 'App', components: { Car } } </script> Props是單向的，只能由父元件傳送資料給子元件。當父元件改變prop的值時，新的值會被傳送給子元件並重新渲染。 反過來是不行的，子元件不應該去修改prop的值。 使用事件在子元件到父元件之間通訊 事件允許你從子元件向父元件進行通訊： <script> export default { name: 'Car', methods: { handleClick: function() { this.$emit('clickedSomething') } } } </script> 在父元件的template中，可以使用v-on指令來攔截這個事件： <template> <div> <Car v-on:clickedSomething="handleClickInParent" /> <!-- 或者 --> <Car @clickedSomething="handleClickInParent" /> </div> </template> <script> export default { name: 'App', methods: { handleClickInParent: function() { //....