Menu
Vue.js allow apply event on element:
<div id="app"> <button @click="play()">Play</button> </div> But how to apply event on window object? it is not in DOM.
for example:
<div id="app"> <div @mousedown="startDrag()" @mousemove="move($event)">Drag me</div> </div> in this example, how to listen mousemove event on window ?
348
We add an argument to the v-on directive, which will be the name of the event we want to handle. In the above example case, it is a click event. After that, we have to bind an expression to the directive, which will normally be a method you want to use to handle the event. In this case, we've called it clickHandler.
You can add event listeners to any DOM object not only HTML elements. i.e the window object. The addEventListener() method makes it easier to control how the event reacts to bubbling.
Listening to Events We can use the v-on directive, which we typically shorten to the @ symbol, to listen to DOM events and run some JavaScript when they're triggered. The usage would be v-on:click="handler" or with the shortcut, @click="handler" .
We can listen to the window scroll event in a Vue. js component by calling the window. addEventListener method to listen to the scroll event on the browser window. We call window.
You should just do it manually during the creation and destruction of the component
... created: function() { window.addEventListener('mousemove',this.move); }, destroyed: function() { window.removeEventListener('mousemove', this.move); } ... If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
