Добавление прослушивателей событий на элементах - Javascript - PullRequest
Новая
       27

Добавление прослушивателей событий на элементах - Javascript

13 голосов
/ 22 июня 2011

Есть ли способы прослушивать события onblur или onclick в javascript из функции onload?вместо того чтобы делать это в самом элементе. 

<input type="button" id="buttonid" value="click" onclick="func()">

чтобы стать чем-то вроде 

function onload() {
      var button = document.getElementById("buttonid");
      button.addEventListener("onclick", function() { alert("alert");});
}

РЕДАКТИРОВАТЬ 

<html>

<head>

     <script>

     function onload() {

        var button = document.getElementById("buttonid");

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

          window.onload = onload;


     </script>

</head>

<body>

<input type="button" id="buttonid" value="click">


</body>

</html>

ОБНОВЛЕНИЕ 

 <script type="text/javascript">

 function on_load() {

    var button = document.getElementById("buttonid");

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

      window.onload = on_load();


 </script>

Ответы [ 5 ]

17 голосов
/ 22 июня 2011

То, как вы это делаете, прекрасно, но ваш прослушиватель событий для события click должен выглядеть следующим образом: 

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

Обратите внимание, к событию click следует присоединить "click", а не "onclick".

Вы также можете попробовать сделать это по-старому: 

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

Обновление 1

Вам также необходимо отслеживать IE <9, потому чтоэти против использования <code>attachEvent().Присоедините событие так, чтобы оно работало с браузерами динозавров: 

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

Обновление 2

В зависимости от ваших правок должно работать работает простоштраф . 

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

Пожалуйста, не используйте window.onload = on_load();, это предотвратит срабатывание всех других прослушивателей onload или вы рискуете перезаписать прослушиватель событий.Подумайте о том, чтобы прикрепить событие onload так, как я предлагаю выше.

1 голос
/ 29 июня 2015

Лучший способ использовать DOM (работает отлично), как это.Первые пишут Вашу функцию / класс и используют ее в: 

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>

Неважно, где Вы использовали эти несколько строк.Вы можете положить его в голову или в тело.

0 голосов
/ 05 апреля 2014 
<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 голосов
/ 22 июня 2011

для продолжения моего разговора в разделе комментариев ...

@ упрощено, попробуйте поместить это в вашей страницы 

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

и посмотри, что получится. Также, пожалуйста, сообщите нам, какой браузер вы используете. https://developer.mozilla.org/en/DOM/element.addEventListener

0 голосов
/ 22 июня 2011

Лучшим способом динамического добавления обработчиков событий было бы использование библиотеки JavaScript, такой как jQuery, поскольку она будет абстрагировать любые специфичные для браузера детали.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...