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

Question

Как работает встроенный 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 вставляется в анонимную функцию, которая назначается обработчик события click элемента. Это на самом деле?

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

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

444 6

javascript html html5

6 ответов:

Comments

Ничего не найдено.

apsillers · Accepted Answer · 2018-03-28 19:11:28

вы получили это почти правильно, но вы не учли, что this значение, указанное в HTML-код.
<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>

Pointy · Accepted Answer · 2012-05-15 22:59:55

что браузер делает, когда у вас есть
<a onclick="alert('Hi');" ... >
это установить фактическое значение "onclick" что-то эффективно, как:
new Function("event", "alert('Hi');");
то есть, он создает функцию, которая ожидает параметр "событие". (Ну, IE не делает; это больше похоже на простую анонимную функцию.)

Daniel B · Accepted Answer · 2016-02-15 10:23:09

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

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

aziz punjani · Accepted Answer · 2012-05-15 23:19:44

лучший способ ответить на ваш вопрос посмотреть его в действии.
<a id="test" onclick="alert('test')"> test </a> 
в js
var test = document.getElementById('test');
console.log( test.onclick ); 
как вы видите на console, Если вы используете chrome, он печатает анонимную функцию с переданным объектом события, хотя в IE это немного отличается.
function onclick(event) {
   alert('test')
}
Я согласен с некоторыми из ваших замечаний о встроенных обработчиках событий. Да, их легко писать, но я не согласен с вашей точкой зрения о необходимости изменения кода в несколько мест, если вы хорошо структурируете свой код, вам не нужно этого делать.

mattytommo · Accepted Answer · 2012-05-15 22:57:41

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

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

Dagg Nabbit · Accepted Answer · 2012-05-15 23:23:49

попробуйте это в консоли:
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() {

}