обработка событий JavaScript

Question

У меня есть запрос. Я использую для вызова функции на событие JavaScript двумя способами.

1. Внутри тега HTML как:

   <div id='someid' onmouseover='callFunc()'>Some Text</div>
   

2. Внешний тег, как в теге скрипта / внешнем файле:

   document.getElementById('someid').onmouseover=function(){
       alert('hi');    
   }
   

Теперь я думаю, что оба служат одной и той же цели, тогда есть ли разница между этими двумя способами? Какой из них лучше? Каковы плюсы и минусы обоих? Во-вторых, есть ли другой способ вызова этой функции?

Answer 1

Оба плохие. Вы хотите addEventListener . Библиотека типа jQuery сделает это намного проще, например:

$('#someid').mouseover(function() { alert('hi') });

Помещение JavaScript в строку HTML никогда не является хорошей идеей; трудно написать (вам нужно беспокоиться о побеге) и трудно поддерживать.

Назначение непосредственно на on* - это нормально, но тогда вы не можете иметь несколько обработчиков событий для одного и того же события в одном и том же элементе. Если какой-то другой код попытается добавить обработчик позже, он уничтожит ваш обработчик.

Answer 2

Это намного лучше отделить ваш код от html.

Когда весь ваш код хорошо организован в одном разделе или, что еще лучше, в отдельном файле, гораздо проще поддерживать ваш код.