JavaScript DOM EventListener

فهرست مطالب

adEventListener() ﺪﺘﻣ

ﻝﺎﺜﻣ

:ﺩﻮﺷﯽﻣ ﻝﺎﻌﻓ ﺪﻨﮐﯽﻣ ﮏﯿﻠﮐ ﻪﻤﮐﺩ ﯼﻭﺭ ﺮﺑﺭﺎﮐ ﯽﺘﻗﻭ ﻪﮐ ﺪﯿﻨﮐ ﻪﻓﺎﺿﺍ ﺩﺍﺪﯾﻭﺭ ﻩﺪﻧﻮﻨﺷ ﮏﯾ

document.getElementById("myBtn").addEventListener("click", displayDate);

→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript addEventListener()</h2>

<p>This example uses the addEventListener() method to attach a click event to a button.</p>

<button id="myBtn">Try it</button>

<p id="demo"></p>

<script>
document.getElementById("myBtn").addEventListener("click", displayDate);

function displayDate() {
  document.getElementById("demo").innerHTML = Date();
}
</script>

</body>
</html>

.ﺪﻨﮐ ﯽﻣ ﻞﺼﺘﻣ ﻩﺪﺷ ﺺﺨﺸﻣ ﺮﺼﻨﻋ ﻪﺑ ﺍﺭ ﺩﺍﺪﯾﻭﺭ ﻩﺪﻨﻨﮐ ﻝﺮﺘﻨﮐ ﮏﯾ addE

.ﺪﻨﮐ ﯽﻣ ﻞﺼﺘﻣ ﺮﺼﻨﻋ ﮏﯾ ﻪﺑ ﺩﻮﺟﻮﻣ ﺩﺍﺪﯾﻭﺭ ﯼﺎﻫ ﻩﺪﻨﻨﮐ ﻝﺮﺘﻨﮐ ﯽﺴﯾﻮﻧﺯﺎﺑ ﻥﻭﺪﺑ ﺍﺭ ﺩﺍﺪﯾﻭﺭ ﻩﺪﻨﻨﮐ ﻝﺮ

.ﺪﯿﻨﮐ ﻪﻓﺎﺿﺍ ﺮﺼﻨﻋ ﮏﯾ ﻪﺑ ﺍﺭ ﯼﺩﺎﯾﺯ ﺩﺍﺪﯾﻭﺭ ﯼﺎﻫ ﻩﺪﻨﻨﮐ ﻝﺮﺘﻨﮐ ﺪﯿﻧﺍﻮﺗ ﯽﻣ

.ﺪﯿﻨﮐ ﻪﻓﺎﺿﺍ "ﮏﯿﻠﮐ" ﺩﺍﺪﯾﻭﺭ ﻭﺩ ﯽﻨﻌﯾ ،ﺮﺼﻨﻋ ﮏﯾ ﻪﺑ ﺍﺭ ﻉﻮﻧ ﮏﯾ ﺯﺍ ﺩﺍﺪﯾﻭﺭ ﯼﺎﻫ ﻩﺪﻨﻨﮐ ﻝﺮﺘﻨﮐ ﺯﺍ

.ﻩﺮﺠﻨﭘ ﯽﺷ ﯽﻨﻌﯾ .ﺪﯿﻨﮐ ﻪﻓﺎﺿﺍ HTML ﺮﺻﺎﻨﻋ ﺎﻬﻨﺗ ﻪﻧ ﻭ DOM ﯽﺷ ﺮﻫ ﻪﺑ ﺍﺭ ﺩﺍﺪﯾﻭﺭ ﻥﺎﮔﺪﻧﻮﻨﺷ ﺪﯿﻧﺍﻮ

.ﺪﻨﮐ ﯽﻣ ﺮﺗ ﻥﺎﺳﺁ ﺍﺭ ﻥﺩﺯ ﺏﺎﺒﺣ ﻪﺑ ﺩﺍﺪﯾﻭﺭ ﺶﻨﮐﺍﻭ ﻩﻮﺤﻧ ﻝﺮﺘﻨﮐ addE

.ﺩﻮﺷ ﯽﻣ ﺍﺪﺟ HTML ﯼﺭﺍﺬﮔ ﻪﻧﺎﺸﻧ ﺯﺍ ﺮﺘﻬﺑ ﯽﯾﺎﻧﺍﻮﺧ ﯼﺍﺮﺑ ﺖﭙﯾﺮﮑﺳﺍ ﺍﻭﺎﺟ ،removeEve

`ﻮﺤﻧ`

element.addEventListener(event, function, useCapture);

"ﺱﻭﺎﻣ ﻪﺑ ﻥﺩﺍﺩ ﻥﺎﯾﺎﭘ<"code class="w3-codespan>" ﺎﯾ "ﮏﯿﻠﮐ<"code class="w3

.ﻢﯿﻨﮐ ﯽﻧﺍﻮﺧﺍﺮﻓ ﺩﺍﺪﯾﻭﺭ ﻉﻮﻗﻭ ﻡﺎﮕﻨﻫ ﻢﯿﻫﺍﻮﺧ ﯽﻣ ﻪﮐ ﺖﺳﺍ ﯽﻌﺑﺎﺗ ﻡﻭﺩ ﺮﺘﻣﺍﺭﺎﭘ

.ﺖﺳﺍ ﯼﺭﺎﯿﺘﺧﺍ ﺮﺘﻣﺍﺭﺎﭘ ﻦﯾﺍ .ﺩﻮﺷ ﻩﺩﺎﻔﺘﺳﺍ ﺩﺍﺪﯾﻭﺭ ﺖﺒﺛ ﺎﯾ ﺩﺍﺪﯾﻭﺭ ﺏﺎﺒﺣ ﺯﺍ ﺪﻨﮐ ﯽﻣ ﺺﺨﺸﻣ ﻪﮐ ﺖﺳﺍ

ﺪﯿﻨﮐ ﯽﻤﻧ ﻩﺩﺎﻔﺘﺳﺍ ﻥﺁ ﺯﺍ ﻪﮐ ﺪﯿﺷﺎﺑ ﻪﺘﺷﺍﺩ ﻪﺟﻮﺗ

`ﺪﯿﻨﮐ ﻪﻓﺎﺿﺍ ﺮﺼﻨﻋ ﮏﯾ ﻪﺑ ﺍﺭ Handler ﺩﺍﺪﯾﻭﺭ ﮏﯾ`

`ﻝﺎﺜﻣ`

:ﺪﻨﮐ ﯽﻣ ﮏﯿﻠﮐ ﺮﺼﻨﻋ ﮏﯾ ﯼﻭﺭ ﺮﺑﺭﺎﮐ ﯽﺘﻗﻭ "!ﻥﺎﻬﺟ ﻡﻼﺳ" ﺭﺍﺪﺸﻫ

element.addEventListener("click", function(){ alert("Hello World!"); });

→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript addEventListener()</h2>

<p>This example uses the addEventListener() method to attach a click event to a button.</p>

<button id="myBtn">Try it</button>

<script>
document.getElementById("myBtn").addEventListener("click", function() {
  alert("Hello World!");
});
</script>

</body>
</html>

:ﺪﯿﻨﮐ ﻪﻌﺟﺍﺮﻣ "ﺭﺍﺪﻣﺎﻧ" ﯽﺟﺭﺎﺧ ﻊﺑﺎﺗ ﮏﯾ ﻪﺑ ﺪﯿﻧﺍﻮﺗ ﯽﻣ ﻦﯿﻨﭽﻤﻫ

`ﻝﺎﺜﻣ`

:ﺪﻨﮐ ﯽﻣ ﮏﯿﻠﮐ ﺮﺼﻨﻋ ﮏﯾ ﯼﻭﺭ ﺮﺑﺭﺎﮐ ﯽﺘﻗﻭ "!ﻥﺎﻬﺟ ﻡﻼﺳ" ﺭﺍﺪﺸﻫ

 element.addEventListener("click",  myFunction);
function myFunction() {
  alert ("Hello World!");
}

→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript addEventListener()</h2>

<p>This example uses the addEventListener() method to execute a function when a user clicks on a button.</p>

<button id="myBtn">Try it</button>

<script>
document.getElementById("myBtn").addEventListener("click", myFunction);

function myFunction() {
  alert ("Hello World!");
}
</script>

</body>
</html>

`ﺪﯿﻨﮐ ﻪﻓﺎﺿﺍ ﺮﺼﻨﻋ ﻥﺎﻤﻫ ﻪﺑ ﺍﺭ ﺎﻫﺩﺍﺪﯾﻭﺭ ﺯﺍ ﯼﺭﺎﯿﺴﺑ`

ﺪﯿﻨﮐ ﻪﻓﺎﺿﺍ ﺩﺍﺪﯾﻭﺭ ﻥﺎﻤﻫ ﻪﺑ ﺍﺭ ﯼﺩﺎﯾﺯ ﯼﺎﻫﺩﺍﺪﯾﻭﺭ ﺪﻫﺩ ﯽﻣ ﻥﺎﮑﻣﺍ ﺎﻤﺷ ﻪﺑ

`ﻝﺎﺜﻣ`

element.addEventListener("click", myFunction);
 element.addEventListener("click", mySecondFunction);

→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript addEventListener()</h2>

<p>This example uses the addEventListener() method to add two click events to the same button.</p>

<button id="myBtn">Try it</button>

<script>
var x = document.getElementById("myBtn");
x.addEventListener("click", myFunction);
x.addEventListener("click", someOtherFunction);

function myFunction() {
  alert ("Hello World!");
}

function someOtherFunction() {
  alert ("This function was also executed!");
}
</script>

</body>
</html>

:ﺪﯿﻨﮐ ﻪﻓﺎﺿﺍ ﺮﺼﻨﻋ ﮏﯾ ﻪﺑ ﺍﺭ ﻒﻠﺘﺨﻣ ﻉﺍﻮﻧﺍ ﺯﺍ ﯽﯾﺎﻫﺩﺍﺪﯾﻭﺭ ﺪﯿﻧﺍﻮﺗ ﯽﻣ

`ﻝﺎﺜﻣ`

element.addEventListener("mouseover", myFunction);
element.addEventListener("click", mySecondFunction);
element.addEventListener("mouseout", myThirdFunction);

→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript addEventListener()</h2>

<p>This example uses the addEventListener() method to add many events on the same button.</p>

<button id="myBtn">Try it</button>

<p id="demo"></p>

<script>
var x = document.getElementById("myBtn");
x.addEventListener("mouseover", myFunction);
x.addEventListener("click", mySecondFunction);
x.addEventListener("mouseout", myThirdFunction);

function myFunction() {
  document.getElementById("demo").innerHTML += "Moused over!<br>";
}

function mySecondFunction() {
  document.getElementById("demo").innerHTML += "Clicked!<br>";
}

function myThirdFunction() {
  document.getElementById("demo").innerHTML += "Moused out!<br>";
}
</script>

</body>
</html>

`ﺪﯿﻨﮐ ﻪﻓﺎﺿﺍ ﻩﺮﺠﻨﭘ ﯽﺷ ﻪﺑ Event Handler ﮏﯾ`

ﺪﯿﻨﮐ ﻪﻓﺎﺿﺍ HTML ﺮﻫ ﺭﺩ ﺍﺭ ﺩﺍﺪﯾﻭﺭ ﻥﺎﮔﺪﻧﻮﻨﺷ ﺪﻫﺩ ﯽﻣ ﻥﺎﮑﻣﺍ ﺎﻤﺷ ﻪﺑ

`ﻝﺎﺜﻣ`

:ﺩﻮﺷ ﻝﺎﻌﻓ ﺮﺑﺭﺎﮐ ﻂﺳﻮﺗ ﻩﺮﺠﻨﭘ ﻩﺯﺍﺪﻧﺍ ﺮﯿﯿﻐﺗ ﺎﺑ ﻪﮐ ﺪﯿﻨﮐ ﻪﻓﺎﺿﺍ ﺩﺍﺪﯾﻭﺭ ﻩﺪﻧﻮﻨﺷ ﮏﯾ

window.addEventListener("resize", function(){
  document.getElementById("demo").innerHTML = sometext;
});

→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript addEventListener()</h2>

<p>This example uses the addEventListener() method on the window object.</p>

<p>Try resizing this browser window to trigger the "resize" event handler.</p>

<p id="demo"></p>

<script>
window.addEventListener("resize", function(){
  document.getElementById("demo").innerHTML = Math.random();
});
</script>

</body>
</html>

`ﺎﻫﺮﺘﻣﺍﺭﺎﭘ ﺭﻮﺒﻋ`

ﺪﯿﻨﮐ ﻩﺩﺎﻔﺘﺳﺍ ،ﺮﺘﻣﺍﺭﺎﭘ ﺮﯾﺩﺎﻘﻣ ﻝﺎﻘﺘﻧﺍ ﻡﺎﮕﻨﻫ

`ﻝﺎﺜﻣ`

element.addEventListener("click", function(){ myFunction(p1, p2); });

→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript addEventListener()</h2>

<p>This example demonstrates how to pass parameter values when using the addEventListener() method.</p>

<p>Click the button to perform a calculation.</p>

<button id="myBtn">Try it</button>

<p id="demo"></p>

<script>
let p1 = 5;
let p2 = 7;
document.getElementById("myBtn").addEventListener("click", function() {
  myFunction(p1, p2);
});

function myFunction(a, b) {
  document.getElementById("demo").innerHTML = a * b;
}
</script>

</body>
</html>

`؟ﺩﺍﺪﯾﻭﺭ ﺖﺒﺛ ﺎﯾ ﺩﺍﺪﯾﻭﺭ ﺏﺎﺒﺣ`

.ﻂﺒﺿ ﻭ ﯽﺑﺎﺒﺣ ،ﺩﺭﺍﺩ ﺩﻮﺟﻭ HTML DOM ﺭﺩ ﺩﺍﺪﯾﻭﺭ ﺭﺎﺸﺘﻧﺍ ﯼﺍﺮﺑ ﻩﺍﺭ ﻭﺩ

.ﺖﺳﺍ ﺩﺍﺪﯾﻭﺭ ﮏﯾ ﻉﻮﻗﻭ ﻡﺎﮕﻨﻫ ﺮﺻﺎﻨﻋ ﺐﯿﺗﺮﺗ ﻒﯾﺮﻌﺗ ﯼﺍﺮﺑ ﯽﻫﺍﺭ ﺩﺍﺪﯾﻭﺭ ﺭﺎﺸﺘﻧﺍ

:ﺩﻮﺷ ﯽﻣ ﯽﺳﺭﺮﺑ ﯽﻧﻭﺮﯿﺑ ﺲﭙﺳ ﻭ ﺍﺪﺘﺑﺍ ﺮﺼﻨﻋ ﻦﯾﺮﺗ ﯽﻧﻭﺭﺩ ﺩﺍﺪﯾﻭﺭﯽﺑﺎﺒﺣ ﺭﺩ

:ﺩﻮﺷ ﯽﻣ ﻡﺎﺠﻧﺍ ﯽﻧﻭﺭﺩ ﺲﭙﺳ ﻭ ﺍﺪﺘﺑﺍ ﺮﺼﻨﻋ ﻦﯾﺮﺗ ﯽﺟﺭﺎﺧ ﺩﺍﺪﯾﻭﺭﻦﺘﻓﺮﮔ ﺭﺩ

:ﺪﯿﻨﮐ ﺺﺨﺸﻣ "useCapture" ﺮﺘﻣﺍﺭﺎﭘ ﺯﺍ ﻩﺩﺎﻔﺘﺳﺍ ﺎﺑ ﺍﺭ ﺭﺎﺸﺘﻧﺍ ﻉﻮﻧ ﺪﯿﻧﺍﻮﺗ ﯽﻣ()addEventListe

addEventListener(event, function, useCapture);

.ﺪﻨﮐﯽﻣ ﻩﺩﺎﻔﺘﺳﺍ ﺮﯾﻮﺼﺗ ﺭﺎﺸﺘﻧﺍ ﺯﺍ ﺩﺍﺪﯾﻭﺭ ،ﺩﻮﺷ ﻢﯿﻈﻨﺗ true ﯼﻭﺭ ﺭﺍﺪﻘﻣ ﻪﮐ ﯽﻧﺎﻣﺯ ،ﺪﻨﮐu20

`ﻝﺎﺜﻣ`

document.getElementById("myP").addEventListener("click", myFunction, true);
document.getElementById("myDiv").addEventListener("click", myFunction, true);

→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ

<!DOCTYPE html>
<html>
<head>
<style>
#myDiv1, #myDiv2 {
  background-color: coral;
  padding: 50px;
}

#myP1, #myP2 {
  background-color: white; 
  font-size: 20px;
  border: 1px solid;
  padding: 20px;
}
</style>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
</head>
<body>

<h2>JavaScript addEventListener()</h2>

<div id="myDiv1">
  <h2>Bubbling:</h2>
  <p id="myP1">Click me!</p>
</div><br>

<div id="myDiv2">
  <h2>Capturing:</h2>
  <p id="myP2">Click me!</p>
</div>

<script>
document.getElementById("myP1").addEventListener("click", function() {
  alert("You clicked the white element!");
}, false);

document.getElementById("myDiv1").addEventListener("click", function() {
  alert("You clicked the orange element!");
}, false);

document.getElementById("myP2").addEventListener("click", function() {
  alert("You clicked the white element!");
}, true);

document.getElementById("myDiv2").addEventListener("click", function() {
  alert("You clicked the orange element!");
}, true);
</script>

</body>
</html>

`.()removeEventListener ﺪﺘﻣ`

ﺪﻨﮐ ﯽﻣ ﻑﺬﺣ ﺍﺭ ﺩﺍﺪﯾﻭﺭ ﯼﺎﻫ ﻩﺪﻨﻨﮐ ﻝﺮﺘﻨﮐ removeEventListener()<

`ﻝﺎﺜﻣ`

element.removeEventListener("mousemove", myFunction);

→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ

<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {
  background-color: coral;
  border: 1px solid;
  padding: 50px;
  color: white;
  font-size: 20px;
}
</style>
</head>
<body>

<h2>JavaScript removeEventListener()</h2>

<div id="myDIV">
  <p>This div element has an onmousemove event handler that displays a random number every time you move your mouse inside this orange field.</p>
  <p>Click the button to remove the div's event handler.</p>
  <button onclick="removeHandler()" id="myBtn">Remove</button>
</div>

<p id="demo"></p>

<script>
document.getElementById("myDIV").addEventListener("mousemove", myFunction);

function myFunction() {
  document.getElementById("demo").innerHTML = Math.random();
}

function removeHandler() {
  document.getElementById("myDIV").removeEventListener("mousemove", myFunction);
}
</script>

</body>
</html>

`HTML DOM ﺩﺍﺪﯾﻭﺭ ﯽﺷ ﻊﺟﺮﻣ`

.ﺪﯿﻨﮐ ﻩﺎﮕﻧ ﺎﻣ HTML DOM ﺩﺍﺪﯾﻭﺭ ءﯽﺷ ﻞﻣﺎﮐ ﻊﺟﺮﻣ ﻪﺑ ،HTML DOM ﯼﺎﻫﺩﺍﺪﯾﻭﺭ ﻪﻤﻫ ﺯﺍ ﯽﺘﺳﺮﻬﻓ ﯼﺍﺮﺑ


  
    
      ← صفحه قبلی
    
    
      صفحه بعد →