![]() ![]() You'd also have to add the tabindex="-1" to the app-content element as well. ![]() ![]() This allows the pageup/pagedown scrolling to already be in the right section based on the content area being the only scrollable section. Īs a side note, I also added a touch of additional configuration to my vue-router to make sure the right element is focused when I transition pages. The way I'm dealing with that is setting a -1 tabindex and just declaring my super-hotkeys (mostly for debug purposes right now) on the parent element in my app. There is one catch that I believe is a hard requirement, the element has to be within the potentially focusable elements. In my case I'm using the actual app.vue entry point's initial div element. If you are using vue-router as I am on a current project, you would want to add to the outer-most element you want that applied to. Index.Short answer is yes, but how depends on your context. Be careful not to override or misspell as it is a protected name used by Vue.js to understand that this is not a custom argument but the Event object itself. Vue stores original DOM Event in a variable named, “ $event”. The important point to remember here is the naming. What if we want to pass our own arguments along with this automatically created Event object? Can we do that too? It is very easy to pass arguments to these methods by just specifying them within the parenthesis that follow the method name.The Event object gets created and passed automatically to the method that is being called when the event is triggered.Passing arguments along with Event object Using event.target would return “ ” and would return “ BUTTON”. The Event object has a “ target” method which returns the element that triggers the event and using this along with the element.tagName property returns the element’s HTML tag name. Thanks again to Vue! Let us see some examples to get a hold of this. Remember the native Event object from the JavaScript world? When an event is triggered, the Event object gets created and passed automatically to any method that is being called using the v-on directive. We are not done yet! Working with the Event object ![]() 'this' keyword refers to the current Vue instance Call this method when the mouseover event is triggered. Let’s say, when we hover our mouse pointer over a button, “ Hover over me!”, the text “ developer” should be displayed.Īdd “ role” to the Vue instance’s data object and define a method named “ showRole” to update this role property to the String, developer. In our previous article, we saw the most famous mouse event, THE CLICK EVENT. Cakewalk! More mouse event examples on their way! Here, when the key ‘a’ is released, a keyup event with keycode 65 is fired and the method “ greet()” is called. This is done with the global config.ke圜odes object.Īdd the below line to “ index.js” file to enable “ v-on:keyup.a”, 圜odes.a = 65 No rocket science or quantum physics stuff here! ? Custom key modifier aliasesĪpart from the key modifiers that get shipped with Vue, you can very well go ahead and set up your own custom aliases for any key codes of your choice. Sticky Note: Key modifiers work only with keyboard-related events such as keyup. Focusing on the button and clicking Enter on the keyboard will show an alert message that says, “ Hi”. Now, you can safely replace the keycode 13 with the key modifier. delete (captures both “Delete” and “Backspace” keys) self etc., Vue provides us with key modifiers for most of the frequently used keys. It is pretty cool!īut isn’t it a hassle to remember or google for key codes all the time? Don’t worry! Just like event modifiers such as. If not, try to get the keycode of any key on the keyboard. Wondering how I knew that key code? Frequently used ones, usually stay on top of our heads. So, let us mention its key code which is 13 by adding a dot after the keyup event. In this case, we want to listen for the Enter key in specific and not just any other key. Whenever the user releases a key or the key goes up, a keyup event is triggered. Vue allows adding key modifiers for v-on when listening for key events: You can directly use any valid key names exposed via KeyboardEvent.key as modifiers by converting them to kebab-case.When listening to key events with Vue, we can mention the required key modifiers with the usual v-on directive like so, When listening for keyboard events, we often need to check for specific keys. In the developer world, we often listen for the Enter key to make sure we perform the respective action even though the user doesn’t explicitly click on the HTML button that is provided on the page to handle this case. define all custom methods within the 'methods' object Because this is more of a continuation to what we already saw. Ready to listen for some key codes on your keyboard and some mouse buttons using Vue? Let’s dig deep then! Make sure you read up on “ Listening to DOM events and Event modifiers” if you haven’t already. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |