Почему использование onClick () в HTML является плохой практикой?

если вы используете jQuery, то:

HTML:

 <a id="openMap" href="/map/">link</a>

JS:

$(document).ready(function() {
    $("#openMap").click(function(){
        popup('/map/', 300, 300, 'map');
        return false;
    });
});

это имеет преимущество по-прежнему работает без JS, или если пользователь средний нажимает на ссылку.

это также означает, что я мог бы обрабатывать общие всплывающие окна, переписывая снова:

HTML:

 <a class="popup" href="/map/">link</a>

JS:

$(document).ready(function() {
    $(".popup").click(function(){
        popup($(this).attr("href"), 300, 300, 'map');
        return false;
    });
});

это позволит вам добавить всплывающее окно к любой ссылке, просто давая ему всплывающий класс.

эта идея может быть расширился еще дальше вот так:

HTML:

 <a class="popup" data-width="300" data-height="300" href="/map/">link</a>

JS:

$(document).ready(function() {
    $(".popup").click(function(){
        popup($(this).attr("href"), $(this).data('width'), $(this).data('height'), 'map');
        return false;
    });
});

теперь я могу использовать один и тот же бит кода для большого количества всплывающих окон на всем моем сайте без необходимости писать множество материалов onclick! Ура для повторного использования!

это также означает, что если позже я решу, что всплывающие окна-плохая практика, (что они и есть!) и что я хочу заменить их модальным окном стиля лайтбокса, я могу изменение:

popup($(this).attr("href"), $(this).data('width'), $(this).data('height'), 'map');

до

myAmazingModalWindow($(this).attr("href"), $(this).data('width'), $(this).data('height'), 'map');

и все мои всплывающие окна на моем месте сейчас работают совершенно по-разному. Я мог бы даже сделать обнаружение функций, чтобы решить, что делать с всплывающим окном, или сохранить предпочтения пользователей, чтобы разрешить их или нет. С помощью встроенного onclick это требует огромных усилий по копированию и вставке.

это не хорошо по нескольким причинам:

• он смешивает код и разметки
• код, написанный таким образом, проходит через eval
• и работает в глобальной области

проще всего было бы добавить name атрибут <a> элемент, то вы могли бы сделать:

document.myelement.onclick = function() {
    window.popup('/map/', 300, 300, 'map');
    return false;
};

хотя современная лучшая практика будет использовать id вместо имени, и использовать addEventListener() вместо onclick С тех пор позволяет привязать несколько функций к одному событию.

С очень большими приложениями JavaScript программисты используют больше инкапсуляции кода, чтобы избежать загрязнения глобальной области. И чтобы сделать функцию доступной для действия onClick в HTML-элементе, она должна быть в глобальной области.

возможно, вы видели файлы JS, которые выглядят так...

(function(){
    ...[some code]
}());

они немедленно вызываются функциональными выражениями (IIFEs), и любая функция, объявленная в них, будет существовать только в их внутренней области.

если вы объявляете function doSomething(){} в течение IIFE, а затем сделать doSomething() действие onClick элемента на вашей HTML-странице, вы получите сообщение об ошибке.

если, с другой стороны, вы создаете eventListener для этого элемента в этом IIFE и вызываете doSomething() когда слушатель обнаруживает событие щелчка, Вы хороши, потому что слушатель и doSomething() долю сферы жизни.

для маленьких веб-приложений с минимальным количеством кода, это не имеет значения. Но если вы стремитесь писать крупно, сопровождаемость программы, onclick="" - Это привычка, которую вы должны избегать.

есть несколько причин:

1. Я считаю, что это помогает поддерживать отдельную разметку, т. е. HTML и клиентские скрипты. Например, jQuery позволяет легко добавлять обработчики событий программно.

2. пример, который вы даете, будет нарушен в любом агенте пользователя, который не поддерживает javascript или отключил javascript. Понятие постепенное повышение поощрял бы простую гиперссылку на /map/ для агентов пользователей без JavaScript, то при добавлении обработчика события click prgramatically для агентов пользователя, поддерживающих JavaScript.

например:

разметка:

<a id="example" href="/map/">link</a>

Javascript:

$(document).ready(function(){

    $("#example").click(function(){
        popup('/map/', 300, 300, 'map');
        return false;
    });

})

Это new парадигма под названием "Ненавязчивый JavaScript". Текущий "веб-стандарт" говорит о разделении функциональности и презентации.

Это не совсем "плохая практика", просто большинство новых стандартов хотят, чтобы вы использовали прослушиватели событий вместо встроенного JavaScript.

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

ваш вопрос вызовет дискуссию, я полагаю. Общая идея заключается в том, что хорошо отделить поведение и структуру. Кроме того, afaik, встроенный обработчик кликов должен быть evalпривело к "стать" реальной функцией javascript. И это довольно старомодно, несмотря на то, что это довольно шаткий аргумент. Ну что ж, почитайте немного об этом @quirksmode.org