2017-01-31 3 views
1

Сначала извините, потому что я уверен, что это было задано много раз, я просто не знаю, как это искать.Как работает обработка событий в javascript?

<!doctype html> 
<html lang="en"> 
    <head> 
     <meta charset="utf-8"> 
    </head> 
    <body> 

     <form> 
      <button type="button" onclick="hello()">test1</button> 
      <button type="button" id="test2">test2</button> 
      <h1 id='myText'></h1> 

     <script type="text/javascript"> 
      function hello() { 
       document.getElementById('myText').innerHTML = 'test1'; 
      } 
      document.getElementById('test2').onclick = function(event) { 
       document.getElementById('myText').innerHTML = 'test2'; 
      } 
     </script> 
     </form>  
    </body> 
</html> 

Это мой код. Перед этой версией весь скрипт-тег находился в области головы, и только test1 работал, test2 ничего не делал.

  1. Можете ли вы указать мне, где следует читать, почему это так?
  2. Кроме того, есть ли предпочтительный метод для двух, чтобы вызвать событие?

ответ

0

Это порядок обработки элементов.

В очень простых условиях: материал в <head> нагрузки прежде, чем вещи в <body>, также, материал в верхней части <body> загрузит перед тем материалом в конце <body>. По этой причине, когда вы пытаетесь захватить элемент с идентификатором test2, ваш обработчик события #test2 будет работать только тогда, когда кнопка #test2 была загружена до вашего <script>; иначе он просто не существует на странице в этот момент.

Смежные вопросы