Как работает встроенный Javascript (в HTML)?

Я знаю, что это плохая практика. Не пишите такой код, если это вообще возможно.

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

Я преследую этот вопрос, чтобы полностью понять, что происходит (и потенциальные ловушки), когда написано что-то вроде этого:

<a href="#" onclick="alert('Hi')">Click Me</a>

Насколько я могу судить, функционально это то же самое, что и

<script type="text/javascript">
   $(function(){ // I use jQuery in this example
       document.getElementById('click_me').onclick = 
           function () { alert('Hi'); };
   });
</script>
<a href="#" id="click_me">Click Me</a>

Исходя из этого, кажется, что строка, назначенная атрибуту onclick, вставляется в анонимную функцию, которая назначается обработчику щелчка элемента. Так ли это на самом деле?

Потому что я начинаю делать такие вещи:

<a href="#" onclick="$(this).next().fadeIn(); return false;">Display my next sibling</a> <!-- Return false in handler so as not to scroll to top of page! --> 

Что работает. Но я не знаю, насколько это взлом. Это выглядит подозрительно, потому что нет явной функции, из которой возвращается!

Вы можете спросить, почему ты это делаешь, Стив? Встроенный JS - плохая практика!

Честно говоря, я устал редактировать три разных раздела кода только для того, чтобы изменить один раздел страницы, особенно когда я просто создаю прототип, чтобы посмотреть, будет ли это вообще работать. Это намного проще, а иногда даже имеет смысл, чтобы код, специально связанный с этим элементом HTML, был определен прямо внутри элемента: когда через 2 минуты я решаю, что это была ужасная, ужасная идея, я могу уничтожить весь div (или что-то еще ), и у меня нет кучи таинственного мусора JS и CSS, висящего на остальной части страницы, хоть сколько-нибудь замедляющего рендеринг. Это похоже на концепцию локальности ссылки, но вместо промахов кеша мы смотрим на ошибки и раздувание кода.

У вас почти все правильно, но вы не учли thisзначение, указанное во встроенном коде.

<a href="#" onclick="alert(this)">Click Me</a>

на самом деле ближе к:

<a href="#" id="click_me">Click Me</a>
<script type="text/javascript">
document.getElementById('click_me').addEventListener("click", function(event) {
    (function(event) {
        alert(this);
    }).call(document.getElementById('click_me'), event);
});
</script>

Встроенные обработчики событий устанавливаются thisравными цели события. Вы также можете использовать анонимную функцию во встроенном скрипте

<a href="#" onclick="(function(){alert(this);})()">Click Me</a>

Что делает браузер, когда у вас есть

<a onclick="alert('Hi');" ... >

заключается в том, чтобы установить фактическое значение «onclick» примерно таким:

new Function("event", "alert('Hi');");

То есть он создает функцию, которая ожидает параметр «событие». (В IE нет; это больше похоже на простую анонимную функцию.)

Кажется, существует много плохой практики , связанной с атрибутами обработчика событий. Плохая практика - это незнание и использование доступных функций там, где это наиболее целесообразно. Атрибуты событий полностью документированы W3C, и в них нет ничего плохого. Это ничем не отличается от размещения встроенных стилей, которые также документированы W3C и могут быть полезны в разы. Независимо от того, помещаете ли вы его в теги сценария или нет, он будет интерпретироваться одинаково.

https://www.w3.org/TR/html5/webappapis.html#event-handler-idl-attributes

Лучший способ ответить на ваш вопрос - увидеть его в действии.

<a id="test" onclick="alert('test')"> test </a> ​

В js

var test = document.getElementById('test');
console.log( test.onclick ); 

Как вы видите console, если вы используете хром, он печатает анонимную функцию с переданным объектом события, хотя в IE это немного отличается.

function onclick(event) {
   alert('test')
}

Я согласен с некоторыми из ваших замечаний о встроенных обработчиках событий. Да, их легко написать, но я не согласен с вашей точкой зрения о необходимости изменять код в нескольких местах, если вы хорошо структурируете свой код, вам не нужно этого делать.

Это выглядит подозрительно, потому что нет явной функции, из которой возвращается!

Это анонимная функция, которая была привязана к событию щелчка объекта.

зачем ты это делаешь, Стив?

Какого черта ты такой… Да ладно, как ты сказал, это действительно широко распространенная плохая практика :)

Попробуйте это в консоли:

var div = document.createElement('div');

div.setAttribute('onclick', 'alert(event)');

div.onclick

В Chrome это показывает:

function onclick(event) {
  alert(event)
}

... и нестандартное nameсвойство div.onclickIS "onclick".

Итак, анонимно это или нет, зависит от вашего определения «анонимности». Сравните с чем-то вроде var foo = new Function(), где foo.nameпустая строка, и foo.toString()выдаст что-то вроде

function anonymous() {

}