Як працює вбудований 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! --> 

Який працює. Але я не знаю, скільки це хак. Це виглядає підозріло, оскільки немає видимої функції, з якої повертаються!

Ви можете запитати, чому ви це робите, Стів? Inline 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')
}

Я погоджуюся з деякими вашими пунктами щодо обробників inline подій. Так, їх легко написати, але я не згоден з вашою думкою про необхідність зміни коду в декількох місцях, якщо ви добре структуруєте свій код, вам це не потрібно робити.

Це виглядає підозріло, оскільки немає видимої функції, з якої повертаються!

Це анонімна функція, яка була прикріплена до події клацання об’єкта.

чому ти це робиш, Стів?

Чому на землі ти це робиш? ... Ну, ніколи, як ви вже згадували, це дійсно широко прийнята погана практика :)

Спробуйте це в консолі:

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

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

div.onclick

У Chrome це показує:

function onclick(event) {
  alert(event)
}

... і нестандартною nameвластивістю div.onclickє "onclick".

Отже, чи це анонімність чи ні, залежить ваше визначення "анонімного". Порівняйте з чимось подібним var foo = new Function(), де foo.nameпорожній рядок, і foo.toString()вийде щось подібне

function anonymous() {

}