Skip to content
Advertisements

JavaScript addEventListener Examples

To better understand these examples, please read the article addEventListener. (click)

Exampe 1

addEventListener example 1
    <p id="demo"></p>

    <script>

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

    </script>

Example 2

addEventListener example 2
<button id="myBtn">Try it</button>	

<p id="demo">

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

function myFunction() {
  document.getElementById("demo").innerHTML = "Hello World";
}
</script>

Example 3

addEventListener example 3
<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>

Example 4

addEventListener example 4
<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>

Example 5

 addEventListener example 5
    <button id="myBtn">CLICK</button>
    <p id="demo"></p>

    <script>

        var num1 = 7;
        var num2 = 9;
        document.getElementById("myBtn").addEventListener("click", function() {
            myFunction(num1, num2);
        });
 
        function myFunction(num1, num2) {
            var result = num1 * num2;
            document.getElementById("demo").innerHTML = result;
        }

    </script>

Example 6

addEventListener example 6
    <button id="myBtn">Try it</button>

    <script>
        document.getElementById("body").addEventListener("click", function(){
             this.style.backgroundColor = "red";
        });
    </script>

Example 7

addEventListener example 7
<div id="myDiv">
  <p id="myP">Click this paragraph, I am Bubbling.</p>
</div><br>

<div id="myDiv2">
  <p id="myP2">Click this paragraph, I am Capturing.</p>
</div>

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

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

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

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

Example 8

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

<p><strong>Note:</strong> The addEventListener() and removeEventListener() methods are not supported in Internet Explorer 8 and earlier versions.</p>

<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>

Example 9

addEventListener example 9
<button id="myBtn">Try it</button>

<script>
var x = document.getElementById("myBtn");
if (x.addEventListener) {
  x.addEventListener("click", myFunction);
} else if (x.attachEvent) {
  x.attachEvent("onclick", myFunction);
}

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

Example 10

  let outer  = document.getElementsByClassName('outer') [0];
    let middle = document.getElementsByClassName('middle')[0];
    let inner1 = document.getElementsByClassName('inner1')[0];
    let inner2 = document.getElementsByClassName('inner2')[0];

    let capture = {
        capture : true
    };
    let noneCapture = {
        capture : false
    };
    let once = {
        once : true
    };
    let noneOnce = {
        once : false
    };
    let passive = {
        passive : true
    };
    let nonePassive = {
        passive : false
    };
    
    
    outer.addEventListener('click', onceHandler, once);
    outer.addEventListener('click', noneOnceHandler, noneOnce);
    middle.addEventListener('click', captureHandler, capture);
    middle.addEventListener('click', noneCaptureHandler, noneCapture);
    inner1.addEventListener('click', passiveHandler, passive);
    inner2.addEventListener('click', nonePassiveHandler, nonePassive);

    function onceHandler(event)
    {
        alert('outer, once');
    }
    function noneOnceHandler(event)
    {
        alert('outer, none-once, default');
    }
    function captureHandler(event)
    {
        //event.stopImmediatePropagation();
        alert('middle, capture');
    }
    function noneCaptureHandler(event)
    {
        alert('middle, none-capture, default');
    }
    function passiveHandler(event)
    {
        // Unable to preventDefault inside passive event listener invocation.
        event.preventDefault();
        alert('inner1, passive, open new page');
    }
    function nonePassiveHandler(event)
    {
        event.preventDefault();
        //event.stopPropagation();
        alert('inner2, none-passive, default, not open new page');
    }
Advertisements

1 Comment »

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: