What is JavaScript HTML DOM EventListener?

The addEventListener() method allows you to add event listeners on any HTML DOM object such as HTML elements, the HTML document, the window object, or other objects that support events, like the XMLHttpRequest object.

——————————————————————————————————————–

These methods are used to register behaviors to take effect when the user interacts with the browser and to further manipulate those registered behaviors.

.bind()

Attach a handler to an event for the elements.

Example:-

const person = {
  firstName:”Roshan”,
  lastName: “Jha”,
  fullName: function () {
    return this.firstName + ” ” + this.lastName;
  }
}

const member = {
  firstName:”Amit”,
  lastName: “Kumar”,
}

let fullName = person.fullName.bind(member);

document.getElementById(“Id name”).innerHTML = fullName();

.blur()

Bind an event handler to the “blur” JavaScript event, or trigger that event on an element.

Example:-

$(“input”).blur(function(){
  alert(“This input field has lost its focus.”);
});

.change()

Bind an event handler to the “change” JavaScript event, or trigger that event on an element.

Example:-

$(“input”).change(function(){
  alert(“The text has been changed.”);
});

.click()

Bind an event handler to the “click” JavaScript event, or trigger that event on an element.

Example:-

$(“selector“).click(function(){
  alert(“The paragraph was clicked.”);
});

event.isDefaultPrevented()

Returns whether event.preventDefault() was ever called on this event object.

The event.preventDefault() method stops the default action of an element from happening.

Example:-

$(“a”).click(function(event){
  event.preventDefault();
});

.error()

Bind an event handler to the “error” JavaScript event.

Example:-

$(“selector“).error(function(){
  $(“selector“).replaceWith(“<p>Error loading image!</p>”);
});

event.data()

An optional object of data is passed to an event method when the current executing handler is bound.

Example:- Return the data passed with the on() method for each <p> element

$(“p”).each(function(i){
  $(this).on(“click”, {x:i}, function(event){
    alert(“The ” + $(this).index() + “. paragraph has data: ” + event.data.x);
  });
});

.focus()

Bind an event handler to the “focus” JavaScript event, or trigger that event on an element.

Example:-

$(“input”).focus(function(){
  $(“span”).css(“display”, “inline”).fadeOut(2000);
});

.hover()

Bind one or two handlers to the matched elements, to be executed when the mouse pointer enters and leaves the elements.

• handlerInType: Function( Event eventObject )A function to execute when the mouse pointer enters the element.

• handlerOutType: Function( Event eventObject )A function to execute when the mouse pointer leaves the element.
• The fadeOut() method gradually changes the opacity, for selected elements, from visible to hidden (fading effect).

Example:-

HTML PARTS:-

<ul> 
 <li>Start</li> 
 <li>End</li>  
<li class="fade">Starts</li>  
<li class="fade">Ends</li>
</ul>

<script>
$( "li" ).hover(  function() { 
   $( this ).append( $( "<span> ***</span>" ) );  
},
 function() {    $( this ).find( "span" ).last().remove(); 
 }); 
$( "li.fade" ).hover(function() { 
 $( this ).fadeOut( 100 );  $( this ).fadeIn( 500 );
});
</script>