What is DOM addEventListener() ?

.addEventListener() एक method है जिसका use function और event के साथ किया जाता है।

What is the benifit of addEventListener() ?

1. इसमें एक event के द्वारा एक या multiple function को call कराया जाता है |

2. इसमें एक element के साथ एक या multiple event का use किया जाता है |

Syntax :

attributename.addEventListener("event_name", function, true/false)

Note :
1. First parameter event (जैसे की click , mousehover) के लिए use किया जाता है
2. Second parameter function callकरने के लिए use किया जाता है
3. Third parameter function को capture (जैसे की record) करने के लिए किया जाता है

Syntax without Capture :

attributename.addEventListener("event_name", function)

Note :-अगर किसी .addEventListener के last parameter में true या false का use नहीं किया जाता है तो उसका default value false होता है

Example 1.

Html Code


<article class="class_container" id="idcontainer" style="margin-top:35px">
<div class="content_class">
<h1>Set Dom Value</h1>

<div class="teach coders tutorial"> 
<h2>First heading</h2>
<p>First Paragraph Text. First Paragraph Text. First Paragraph Text. First Paragraph Text. First Paragraph Text. First Paragraph Text. First Paragraph Text. First Paragraph Text. First Paragraph Text. First Paragraph Text. First Paragraph Text. First Paragraph Text. First Paragraph Text. First Paragraph Text. First Paragraph Text. First Paragraph Text. First Paragraph Text. First Paragraph Text. First Paragraph Text. First Paragraph Text. First Paragraph Text. </p>
<a class="my-btn">More First</a>
</div>


<div class="teach coders tutorial">
<h2>Second heading</h2>
<p>Second Paragraph Text.  Second Paragraph Text.  Second Paragraph Text.  Second Paragraph Text.  Second Paragraph Text.  Second Paragraph Text.  Second Paragraph Text.  Second Paragraph Text.  Second Paragraph Text.  Second Paragraph Text.  Second Paragraph Text.  Second Paragraph Text.  Second Paragraph Text.  Second Paragraph Text.  Second Paragraph Text.  Second Paragraph Text.  Second Paragraph Text.  Second Paragraph Text.  Second Paragraph Text.  Second Paragraph Text. </p>
<a href="readsecond.html" class="my-btn">More Seond</a>
</div>

<div class="teach coders tutorial">
<h2>Third heading</h2>
<p>Third Paragrap Text. Third Paragrap Text. Third Paragrap Text. Third Paragrap Text. Third Paragrap Text. Third Paragrap Text. Third Paragrap Text. Third Paragrap Text. Third Paragrap Text. Third Paragrap Text. Third Paragrap Text. Third Paragrap Text. Third Paragrap Text. Third Paragrap Text. Third Paragrap Text. Third Paragrap Text. Third Paragrap Text. Third Paragrap Text. Third Paragrap Text. Third Paragrap Text. Third Paragrap Text. Third Paragrap Text. Third Paragrap Text. </p>
<a href="readthird.html" class="my-btn">More Third</a>
</div>

<div class="teach coders tutorial">
<h2>Forth  heading</h2>
<p>Forth Paragrap Text. Forth Paragrap Text. Forth Paragrap Text. Forth Paragrap Text. Forth Paragrap Text. Forth Paragrap Text. Forth Paragrap Text. Forth Paragrap Text. Forth Paragrap Text. Forth Paragrap Text. Forth Paragrap Text. Forth Paragrap Text. Forth Paragrap Text. Forth Paragrap Text. Forth Paragrap Text. Forth Paragrap Text. Forth Paragrap Text. Forth Paragrap Text. </p>
<a href="readforth.html" class="my-btn">More Forth</a>
</div>

<div class="teach coders tutorial">
<h2>Fifth  heading</h2>
<p>Fifth Paragrap Text. Fifth Paragrap Text. Fifth Paragrap Text. Fifth Paragrap Text. Fifth Paragrap Text. Fifth Paragrap Text. Fifth Paragrap Text. Fifth Paragrap Text. Fifth Paragrap Text. Fifth Paragrap Text. Fifth Paragrap Text. Fifth Paragrap Text. Fifth Paragrap Text. Fifth Paragrap Text. Fifth Paragrap Text. Fifth Paragrap Text. Fifth Paragrap Text. </p>

</div>
</div>
</article>

Javascript Code


<script>

//on click event
var a = document.querySelector(".content_class .teach .my-btn");
var b = document.querySelector(".content_class .teach");

a.addEventListener("click", myfunc);
a.addEventListener("click", myfunc2);
a.addEventListener("click", myfunc3);

function myfunc(){
  b.classList.add("set-background")
}

function myfunc2(){
  b.classList.add("border-padding")
}
function myfunc3(){
  b.classList.add("text-color")
}


</script>

Javascript Css


<tyle type="text/css">
  .set-background{
  background:lightblue;
  }
 
</style>

Example 2.

Html Code


<article class="class_container" id="idcontainer" style="margin-top:35px">
<div class="content_class">
<h1>Set Dom Value</h1>

<div class="teach coders tutorial"> 
<h2>First heading</h2>
<p>First Paragraph Text. First Paragraph Text. First Paragraph Text. First Paragraph Text. First Paragraph Text. First Paragraph Text. First Paragraph Text. First Paragraph Text. First Paragraph Text. First Paragraph Text. First Paragraph Text. First Paragraph Text. First Paragraph Text. First Paragraph Text. First Paragraph Text. First Paragraph Text. First Paragraph Text. First Paragraph Text. First Paragraph Text. First Paragraph Text. First Paragraph Text. </p>
<a class="my-btn">More First</a>
</div>


<div class="teach coders tutorial">
<h2>Second heading</h2>
<p>Second Paragraph Text.  Second Paragraph Text.  Second Paragraph Text.  Second Paragraph Text.  Second Paragraph Text.  Second Paragraph Text.  Second Paragraph Text.  Second Paragraph Text.  Second Paragraph Text.  Second Paragraph Text.  Second Paragraph Text.  Second Paragraph Text.  Second Paragraph Text.  Second Paragraph Text.  Second Paragraph Text.  Second Paragraph Text.  Second Paragraph Text.  Second Paragraph Text.  Second Paragraph Text.  Second Paragraph Text. </p>
<a href="readsecond.html" class="my-btn">More Seond</a>
</div>

<div class="teach coders tutorial">
<h2>Third heading</h2>
<p>Third Paragrap Text. Third Paragrap Text. Third Paragrap Text. Third Paragrap Text. Third Paragrap Text. Third Paragrap Text. Third Paragrap Text. Third Paragrap Text. Third Paragrap Text. Third Paragrap Text. Third Paragrap Text. Third Paragrap Text. Third Paragrap Text. Third Paragrap Text. Third Paragrap Text. Third Paragrap Text. Third Paragrap Text. Third Paragrap Text. Third Paragrap Text. Third Paragrap Text. Third Paragrap Text. Third Paragrap Text. Third Paragrap Text. </p>
<a href="readthird.html" class="my-btn">More Third</a>
</div>

<div class="teach coders tutorial">
<h2>Forth  heading</h2>
<p>Forth Paragrap Text. Forth Paragrap Text. Forth Paragrap Text. Forth Paragrap Text. Forth Paragrap Text. Forth Paragrap Text. Forth Paragrap Text. Forth Paragrap Text. Forth Paragrap Text. Forth Paragrap Text. Forth Paragrap Text. Forth Paragrap Text. Forth Paragrap Text. Forth Paragrap Text. Forth Paragrap Text. Forth Paragrap Text. Forth Paragrap Text. Forth Paragrap Text. </p>
<a href="readforth.html" class="my-btn">More Forth</a>
</div>

<div class="teach coders tutorial">
<h2>Fifth  heading</h2>
<p>Fifth Paragrap Text. Fifth Paragrap Text. Fifth Paragrap Text. Fifth Paragrap Text. Fifth Paragrap Text. Fifth Paragrap Text. Fifth Paragrap Text. Fifth Paragrap Text. Fifth Paragrap Text. Fifth Paragrap Text. Fifth Paragrap Text. Fifth Paragrap Text. Fifth Paragrap Text. Fifth Paragrap Text. Fifth Paragrap Text. Fifth Paragrap Text. Fifth Paragrap Text. </p>

</div>
</div>
</article>

Javascript Code


<script>
//first event (on click)
var a = document.querySelector(".content_class .teach .my-btn");
var b = document.querySelector(".content_class .teach");

a.addEventListener("click", myfunc);
a.addEventListener("click", myfunc2);
a.addEventListener("click", myfunc3);

function myfunc(){
  b.classList.add("set-background")
}

function myfunc2(){
  b.classList.add("border-padding")
}
function myfunc3(){
  b.classList.add("text-color")
}


//second event (mouse over) 
a.addEventListener("mouseover", removebackground);
function removebackground(){
  b.classList.remove("set-background")
}
a.addEventListener("mouseover", removetext);
function removetext(){
  b.classList.remove("text-color")
}

a.addEventListener("mouseover", removeborder);
function removeborder(){
  b.classList.remove("border-padding")
}
</script>

Javascript Css


<tyle type="text/css">
  .set-background{
  background:lightblue;
  }
  .border-padding{
  border:solid 10px #777;
  padding:15px;
  }
  .text-color{
  color:red;
  }
</style>