Global Attributes

Global Attributes

Along with the element-specific attributes listed with the individual HTML elements, the following global attributes can be applied to all HTML elements where applicable.

Core Attributes

The core attributes are used for specifying the characteristics or behavior of an element. When we interface with these attributes in JavaScript, they are represented as properties of the HTML element objects.

accesskey – keyboard shortcut access key that brings focus to the element.

 

class – bind one or more classes to an element

 

contenteditable – specify whether or not the content inside of the element is editable

 

contextmenu – bind a context menu to the element.

 

dir – specify the direction that content is going in the element.

 

draggable – specify whether or not the element can be dragged

 

possible values: “true”, “false” <div id="paper" draggable="true"></div>

 

dropzone – specify the operation and type of content that can be dropped in the element possible values: “copy”, “move”, “link”, “string:string”, “file:string” <div id="trash" dropzone="move"></div>

 

 

hidden – Set the element as hidden

 

possible values: value not required <a href="services.html" hidden>Services</a>

 

id – Unique element identifier. Only one tag in the document can have the identifier you specify possible values: “identifier that you specify” <div id="box1">Box 1 content</div>

 

lang – The primary language for the content in the element

 

possible values: “any vaild RFC language code” <html lang="en-us"> </html>

 

spellcheck – Specify spelling and grammar checking of the text in a content editable element possible values: “true”, “false”, “” <textarea spellcheck="false">tekt in da text area</textarea> style – specify inline CSS properties for an element

 

possible values: one or more CSS properties and their values <div style="background:skyblue; padding:20px;">Content</div>

 

tabindex – specify the tab order(when people hit their Tab key) for the element

 

possible values: “integer” <input tabindex="1" name="field1"> <input tabindex="3" name="field2"> <input tabindex="2" name="field3">

 

title – text that renders when the user is hovering over the element

 

possible values: “string” <a title="HTML Global Attributes" href="attributes.html">Attributes</a>

 

translate – specify if the element should be translated upon localization

 

possible values: yes, no <code translate=no> code goes here </code>

Event Attributes

 

 

The event attributes are all triggers to make JavaScript code run when certain things happen. The code gets placed directly in the value portion for the attribute. You may find it cleaner to write a custom function that can run many lines of code and perform complex operations. Calling a function also keeps your HTML markup cleaner and allows you to dynamically access the element that made the function run.

 

 

Example 1 – Code put directly into the event value parameter.

 

<button onclick="window.location = 'http://www.renewcoder.com'">

Renew Coder

 

</button>

 

Example 2 – Code put into a custom event handling function. <script> function doSomething(el){ el.style.padding = "40px"; window.location = "http://www.renewcoder.com"; } </script> <button onclick="doSomething(this);">Renew Coder</button>

 

Example 3 – Adding event handling to objects using addEventListener() method. <script> window.addEventListener("load", function(){ alert("document is fully loaded into the DOM and ready"); }); </script>

 

Example 4 – Adding events to form components. <input onblur="alert('focus left me')">

 

Example 5 – Adding events to media elements. <audio src="tune.mp3" oncanplaythrough="alert('fully buffered in')"></audio>

 

onabort – fires when element loading is aborted by the user

 

onblur – fires when the element loses focus

 

oncanplay – fires when the user agent can process playback of media

 

oncanplaythrough – fires when user agent sees media is fully buffered in

 

onchange – fires when changes to the value of the element occurs

 

onclick – fires when the user clicks the element

 

oncontextmenu – fires when context menu is requested(right click of element)

 

ondblclick – fires when the user double clicks the element

 

ondrag – fires when user continues the drag operation

 

ondragend – fires when the drag operation is finished

 

ondragenter – fires when user mouse enters the element while dragging

 

ondragleave – fires when user mouse leaves the element while dragging

 

ondragover – fires when user is hovering over the element while dragging

 

ondragstart – fires when user initially begins dragging the element

 

ondrop – fires when user drops dragged item into the element

 

ondurationchange – fires when the duration attribute value changes for media(audio/video) elements

 

onemptied – fires when media returns to an uninitialized state

 

onended – fires when the end of media is reached

 

onerror – fires when the element has an error loading

 

onfocus – fires when the element gets focus

 

oninput – fires when the user changes the value of a form input

 

oninvalid – fires when form element fails to validate to specified constraints

 

onkeydown – fires when the user presses a keyboard key down

 

onkeypress – fires when the user presses a key associated with a character value

 

onkeyup – fires when the user releases a downpressed keyboard key

 

onload – fires when the element is finished loading

 

onloadeddata – fires when browser can render media at current playback position

 

onloadedmetadata – fires when browser determines media dimensions and duration

 

onloadstart – fires when browser starts looking for media data in a media element

 

onmousedown – fires when the user presses down over the element with left mouse button

 

onmousemove – fires when the mouse moves while over the element

 

onmouseout – fires when the mouse leaves the element

 

onmouseover – fires when the mouse goes over the element

 

onmouseup – fires when the user releases from a click operation while over the element

 

onmousewheel – fires when the user scrolls their mouse wheel while over the element

 

onpause – fires when user pauses media playback

 

onplay – fires when user agent initiates media playback

 

onplaying – fires when playback of media element has started

 

onprogress – fires when user agent is retrieving media data

 

onratechange – fires when playback rate attributes update for the media element

 

onreadystatechange – fires when the element and its subrecources are finished loading

 

onreset – fires when the form element is reset

 

onscroll – fires when the element view is scrolled

 

onseeked – fires when a seek operation has ended on the media element

 

onseeking – fires when the seeking event for the media element fires off

 

onselect – fires when the user selects some text in the element

 

onshow – fires when user requests the element be shown as a context menu

 

onstalled – fires when the media data transmission of a media element is choking

 

onsubmit – fires when the form element is submitted

 

onsuspend – fires when access of media data is suspended during buffering of media element

 

ontimeupdate – fires when playback position of the media element changes

 

onvolumechange – fires when the volume is changed or muted for the media element

 

onwaiting – fires when the media element playback stops while waiting for more data

 

Tip #1: JavaScript can set and adjust the values of any core attributes at any time via property settings. Using the JavaScript addEventListener() method we add events to elements in the document through code instead of adding the event attribute directly in the element’s HTML markup. JavaScript is also capable of creating HTML elements on the fly using the document.createElement() method.

 

Tip #2: CSS level 3 selectors allow developers to target elements for styling by these attributes and their values.

renewdev

I Am Developer And Want To Share My Knowledge With The World..:) ;) . I Have Another Social Networking Website (Renewchat) And For Designing Or Developing Of Website Purpose You Can Contact Me On Renew Coder .. :) ;)

Leave a Reply

Your email address will not be published. Required fields are marked *