JavaScript "Addeventlistener" Event Fires on Page Load

Javascript addEventListener Event Fires on Page Load

el.addEventListener("click", alert("clicktrack"), false);

When this line is executed, the alert will be called and return undefined. To pass the alert code you need to wrap it in a function.

el.addEventListener("click", function() { alert("clicktrack"); }, false);

AddEventListener. Event is triggered on page load

The parenteses after respondToClick are calling the function immediately.

You either need to remove the parenteses or wrap the function in another function:

boxDiv.addEventListener("click", (event) => respondToClick(event));
boxDiv.addEventListener("click", respondToClick);

addEventListener(click,...) firing immediately

When you are binding event you are calling the function document.getElementById("tooltip-link1").addEventListener("click",displayTooltip(2));

You need to pass reference to the function.

Change to below

document.getElementById("tooltip-link1").addEventListener("click", function(){
   displayTooltip(2)
});

event listener firing on its own on page load

When you use parenthesis like this, this.removeLoadingContent(this.tlRemoveLoading), it will fire at load.

You need it to be e.g. this.removeLoadingContent

---

Since all you do with this.tlRemoveLoading is pass a new TimelineMax(), instead try to do something like this

    //event listeners: ISSUE HERE
    this.jsLoadingCta.addEventListener('click', this.removeLoadingContent);

removeLoadingContent(){

    let jsLoadOverlay = document.querySelector('#js-overlay-load');
    let tl = new TimelineMax();

    tl
    .to(jsLoadOverlay, 1, {width: '100%', ease: Power4.easeInOut})
    .set(jsLoadOverlay, {left: 'auto', right: 0})
    .to(jsLoadOverlay, 1, {width: '0%', ease: Power4.easeInOut})

}

Javascript event listener firing on page load, not click event

You're calling the function rather than passing the function as an argument to addEventListener. Take the parentheses off the end of the function name:

this.addPhotoButton.addEventListener("click", this.launchMediaManager, false);

Javascript function firing on page load, not on click

You should put reference to callback function into your addEventListener. If you set display(fTContent) - you just run this function.
The right triggering is

firstTrimesterButton.addEventListener("click", function() {
    display(fTContent);
});

addeventlistener even firing multiple times

You're seeing the event fire multiple times because you're adding multiple event listeners - one every time the requestData() function runs as a result of the "oninput" event. And the removeEventListener command never fires because of the else { ... return... block just above it.

But I can't see why you need the "oninput" event at all. It doesn't do anything except add more and more event listeners. You can just declare the submit event directly, without this extra layer:

    <form name="search" id="getForm">
        Search customer:<br>
        <input type="text" name="user" id="name"><br>
        <input type="submit" value="submit">
    </form> 
</div>

<script>
document.getElementById('getForm').addEventListener('submit', ev);

function ev(e){
    e.preventDefault();

    var user = document.getElementById('name').value;
    if (user !== ""){
        var url = 'http://localhost:3000/users/'+user;
        var xhttp;
        if (window.XMLHttpRequest){
            xhttp=new XMLHttpRequest();
        }
        else{
            xhttp=new ActiveXObject("Microsoft.XMLHTTP");
        }
        xhttp.onprogress = function(){
            //this will print out on the 3rd ready state
            //good for if the application is hanging
        }

        xhttp.onload = function() {
            if (this.status == 200 || this.status == 304) {
                var response = JSON.parse(xhttp.responseText);
                var output = '';
                if(response.data[0] != null){
                    for(var i in response.data){
                        output += '<ul>' +
                        '<li>Name: '+response.data[i].customer_name+'</li>' +
                        '<li>Parent: '+response.data[i].parent+'</li>' +
                        '</ul>';
                        }
                        document.getElementById('customer_name').innerHTML = output;
                }
                else {
                    alert('Customer does not exist.');
                }
            }
        }

        xhttp.onerror = function(){
            console.log('Request error...');
        }

        xhttp.open("GET", url, true);
        xhttp.send();
    } else {
        alert("Name must be filled out");
        return false;
    }
}
</script>

Here's a little minimised working demo to show the event handling part of this in action:

document.getElementById('getForm').addEventListener('submit', ev);
function ev(e) {  e.preventDefault();
  console.log(document.getElementById('name').value);}

<form name="search" id="getForm">  Search customer:<br>  <input type="text" name="user" id="name"><br>  <input type="submit" value="submit"></form>

Why does addEventListener fire before the event if at all?

The root of your problem is here:

button.addEventListener("click", addTextNode(button.innerHTML))

You're executing the function rather than passing it to the event listener. Instead, pass the function by reference, then get the innerHTML inside the function.

function addTextNode() {
    var newtext = document.createTextNode(this.innerHTML),
        p1 = document.getElementById("p1");

    p1.appendChild(newtext);
}

var btns = document.getElementsByTagName("button");

for(i = 0; i < btns.length; i++){
    var button = btns[i]; 
    button.addEventListener("click", addTextNode);
}

http://jsfiddle.net/bn85J/

---

Related Topics