The HTML DOM addEventListener() method is used to attach an event handler to the specified element.Following is the syntax −element.addEventListener(event, function, capture)Above, the parameters include −event: The name of the event. Required.function: The function to run when the event occurs. Required.capture: Whether the event should be executed in the capturing phase. This check and displays a boolean value; true or false.Let us now see an example to implement the DOM addEventListener() method −Example Live Demo Demo Heading Click var x = document.getElementById("btn"); x.addEventListener("mouseover", one); x.addEventListener("click", two); ... Read More

The autocomplete attribute of the element allows you to set whether the autocomplete for the form should be on or off. The web browser automatically fills the values if the autocomplete is on. This only happens if the user already entered values before.Following is the syntax −Above, on | off values are to be set for autocomplete to appear or not. Set on if you want the browser to complete the entries based on previously entered values, whereas off doesn’t allow to complete the entries.Let us now see an example to implement the autocomplete attribute of the element ... Read More

The HTML DOM activeElement property is a read-only property to return the currently focused element in the document.Following is the syntax −document.activeElementLet us now see an example to implement the DOM activeElement property −Example Live Demo Heading Two Click in the element to get the active element. function display() { var a = document.activeElement.tagName; document.getElementById("myid").innerHTML = a; } OutputNow, click the element to display the same currently active element −

The HTML DOM accessKey property is used to set the accessKey attribute of an element. However, the accesskey attribute in HTML is used to set a shortcut key to activate or focus on an element.Following is the syntax to set the accessKey property −HTMLElementObject.accessKey = charAbove, char is the shortcut key.Following is the syntax to return the accessKey property −HTMLElementObject.accessKeyOn Windows, set the access key for different browsers −Web BrowserWindows OSSafari[Alt] + accesskeyChrome[Alt] + accesskeyFirefoxAlt] [Shift] + accesskeyLet us now see an example to implement the accesskey property on Chrome web browser on Windows −Example Live Demo Google Get ... Read More

The shadowColor property of the HTML canvas is used to set the color for shadow. The default value is #000000.Following is the syntax −ctx.shadowColor=color;Above, set the color for shadow.Let us now see an example to implement the shadowColor property of canvas −Example Live Demo    var c = document.getElementById("newCanvas");    var ctx = c.getContext("2d");    ctx.shadowBlur = 20;    ctx.shadowColor = "gray";    ctx.fillStyle = "blue";    ctx.fillRect(40, 40, 200, 250); Output

The datetime attribute of the element is used to display the machine-readable date time.Following is the syntax −Above, the attribute datetime displays the datetime −YYYY - yearMM - monthDD - day of the monthhh - hourmm - minutesss - secondsTZD - Time Zone DesignatorYou can also set PTDHMS −P - prefix for "Period"D - prefix for "Days"H - prefix for "Hours"M - prefix for "Minutes"S - prefix for "Seconds"Let us now see an example to implement the datetime attribute of the element −Example Live Demo    Exam Results    Result would be announced on 6th June.    New ... Read More

The HTML DOM Object Width property is used to set or return the width of an object. This width is set in pixels. Following is the syntax to set the width of an object −objObject.widthFollowing is the syntax to return the width of an object −objObject.width = pixelsAbove, pixels is the value set for the width of object.Let us now see an example to implement the DOM object width property −Example Live Demo              Click to update the width.    Update Width               function display() {          document.getElementById("newObj").width = "550";       }     OutputNow, click the “Update Width” button to update the width −

The defaultPrevented event property in HTML is used to check whether the preventDefault() method was called or not. It returns a boolean value i.e. true if the preventDefault() method was called, else false.Following is the syntax −event.defaultPreventedLet us now see an example to implement the defaultPrevented event property in HTML −Example Live Demo Demo Heading Demo (click me)    document.getElementById("myid").addEventListener("click", function(event){       event.preventDefault()       alert("Was preventDefault() called: " + event.defaultPrevented);    }); OutputClick on the link and the following would get displayed in the alert box −

The HTML DOM Object Height property is used to set or return the height of an object. This height is set in pixels.Following is the syntax to set the height of an object: objObject.heightFollowing is the syntax to return the height of an object −objObject.height = pixelsAbove, pixels is the value set for the height of object.Let us now see an example to implement the DOM object height property −Example Live Demo Click to update the height. Update Height    function display() {       document.getElementById("newObj").height = "350";    } OutputNow, click the “Update Height” button to change the height −

The currentTarget event property in HTML is used to get the element whose event listeners triggered the event.Following is the syntax −event.currentTargetLet us now see an example to implement the currentTarget event property −Example Live Demo Get the element Click on this line to generate an alert box displaying the element whose eventlistener triggered the event.    function myFunction(event) {       alert("Element = "+event.currentTarget.nodeName);    } OutputNow double click on the line as shown in the above screenshot to generate an alert box that would display the element whose event listeners triggered the event −