发表新帖
发表新帖

Adding Event Listeners on Elements - Javascript

前端 未结
关注
5 1236
误落风尘
误落风尘 2020-12-03 17:22

Are there ways for me to listen for onblur or onclick events in javascript from an onload function? instead of doing it in the element itself.
相关标签:
5条回答
  • 暗喜
    2020-12-03 17:43

    The way you are doing it is fine, but your event listener for the click event should be like this:

    button.addEventListener("click", function() { alert("alert");});

    Notice, the click event should be attached with "click", not "onclick".

    You can also try doing this the old way:

    function onload() {
   var button = document.getElementById("buttonid");
   // add onclick event 
   button.onclick = function() { 
        alert("alert");
   }
}

    Update 1

    You need to also monitor for IE < 9, because those Vs use attachEvent(). Attach the event like this, so it will work with dinosaur browsers:

    if(button.addEventListener){
    button.addEventListener('click', function() { alert("alert");});    
} else if(button.attachEvent){ // IE < 9 :(
    button.attachEvent('onclick', function() { alert("alert");});
}

    Update 2

    Based on your edit, this should work works just fine.

    <html>
    <head>
        <script type="text/javascript">
            function init() {
                var button = document.getElementById("buttonid");
                if(button.addEventListener){
                    button.addEventListener("click", function() { alert("alert");}, false);
                } else if(button.attachEvent){
                    button.attachEvent("onclick", function() { alert("alert");});
                }
            };
            if(window.addEventListener){
                window.addEventListener("load", init, false);
            } else if(window.attachEvent){
                window.attachEvent("onload", init);
            } else{
               document.addEventListener("load", init, false);
            }
        </script>
    </head>
    <body>
        <input type="button" id="buttonid" value="click">
    </body>
</html>

    Please, do not use window.onload = on_load();, this will prevent all other onload event listeners from getting fired, or you are risking for your event listener to get overwritten. Consider attaching the onload event the way I am suggesting above.

    0 讨论(0)
  • 小蘑菇
    2020-12-03 17:43

    to further my conversation in the comments section...

    @simplified, try putting this in the < head > of your page

    <script type="text/javascript">
function my_onload() {
  var button = document.getElementById("buttonid");
  if(button.addEventListener){
    button.addEventListener("click", function() { alert("alert");}, true);
  }else{
    button.attachEvent("click", function() { alert("alert");});
  };
};
window.onload = my_onload;
</script>

    and see what happens. also, please advise us on which browser you are using. https://developer.mozilla.org/en/DOM/element.addEventListener

    0 讨论(0)
  • 别跟我提以往
    2020-12-03 17:45

    A better way to dynamically add event handlers would be to use a JavaScript library like jQuery, because it will abstract away any browser-specific details.

    0 讨论(0)
  • 无人及你
    2020-12-03 17:50 
    <script>
var click = document.getElementById("click");
click.addEventListener("click", function() {
  var required = document.getElementById("required").value;
  if (required===null || required==="") {
    alert("Please make sure all required field are completed");
  }
  else  {
    alert("Thank you! \nYour sumbission has been accepted and you will receive a conformation email shortly! \nYou will now be taken to the Home page.");
  }
});
</script><html>
<body>
<div id="popup">
    <textarea cols="30" rows="2" name="required" id="required"></textarea>
    <input type="submit" id="click" value="Submit">
           <input type="reset" value="Reset" />
</div>
</body>
</html>
    0 讨论(0)
  • 情歌与酒
    2020-12-03 17:54

    The better way it's used DOM (works perfectly) like this. Firs write Yours function/class and use it in:

    document.addEventListener('DOMContentLoaded', function(){
  // put here code
});
    <!DOCTYPE html>
<html>
<head>
  <script type="text/javascript">
    function myFunc(){ alert('Hellow there!'); }
    
    document.addEventListener('DOMContentLoaded', function(){
        document.getElementById('mybtn').addEventListener('click', myFunc);
    });
  </script>
</head>
  <body>
    <button id="mybtn">Cklik!</button>
  </body>
</html>

    It's doesn't matter where You used this few lines. You can put it in head or in body.

    0 讨论(0)
 看不清?
提交回复
热议问题