#ON CLICK KEYUP SAME FUNCTION CODE#

Fundamentally, in this example the button is only aware of the click event, but not how it happened. There is no JavaScript to handle the keyboard functionality it’s a native feature of the browser. The same text appears and resets as well. You can also click somewhere else within the pen, tab to put focus on the button, and then use Space or Enter to “click” it. After a moment the original text will reset. In the example above, you can click the button and its text label will change. Yet the legacy feature does help a great deal with accessibility for obvious reasons. This is a bit of overlap with keyboard navigation and accessibility this native feature existed way before accessibility was a concern. For historical and usability reasons, one can “click” the button by putting focus on it with tabbing and then using the Space or Enter key on the keyboard. So consider just a simple button placed on the page for specific functionality when someone interacts with it.Ĭonsider that I said “interacts with it” instead of just clicking it. We are only really concerning ourselves over the basic clicking function of the element. As you may know, a button element can have native functionality within a form, for example it can submit a form in some situations. The part we’ll cover is obviously the “anywhere in a document for accessible, standard button functionality” part of that description. By default, HTML buttons are presented in a style resembling the platform the user agent runs on, but you can change buttons’ appearance with CSS. The HTML element represents a clickable button, used to submit forms or anywhere in a document for accessible, standard button functionality. The element, as described by MDN, is simply: How do we distinguish between different types of clicks? That’s what we’re diving into! First things first

I actually have run into situations (though not many) where distinguishing between those two types of clicks comes in handy. Seen this way, a click is not always a “click” the way it’s typically defined. There are nuances associated with button clicks and these nuances, like the difference between a “click” from a mouse pointer and “click” from the keyboard. Take, for example, the click event listening to the grandfather of interactive elements, the element. They are minor and probably most people would never even notice them in the majority of use cases. Some nuances with the click event are typically not much a concern. It works on just about every HTML element there is, a core feature of the DOM API.Īs often the case with the DOM and JavaScript, there are nuances to consider.

#ON CLICK KEYUP SAME FUNCTION CODE#

The click event is quite simple and easy to use you listen for the event and run code when the event is fired.

On click keyup same function