Как работает встроенный 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 cruft, висящих на остальной части страницы, что замедляет рендеринг. Это похоже на концепцию локальности ссылки, но вместо промахов кэша мы смотрим на ошибки и раздувание кода.

Ответ 1

У вас это почти правильно, но вы не учли значение 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>

Обработчики событий Inline устанавливают this равным цели события.

Ответ 2

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

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

заключается в том, чтобы установить фактическое значение "onclick" на что-то эффективное:

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

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

Ответ 3

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

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

Ответ 4

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

<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-событий. Да, их легко написать, но я не согласен с тем, что вам нужно менять код в нескольких местах, если вы хорошо структурируете свой код, вам не нужно это делать.

Ответ 5

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

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

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

Зачем ты делай..... Ах, как ни странно, как вы уже упоминали, на самом деле это широко распространенная плохая практика:)

Ответ 6

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

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() {

}