javascript: onClick = "" vs. jQuery.Click()

У меня есть много страниц с onClick-Events (на каждой странице есть другие элементы с собственным onClick-Event). Все страницы получить включены в один основной страницы (index.php)javascript: onClick = "" vs. jQuery.Click()

Таким образом, я не могу поставить все JQuery OnClick-событий в голове страницы (потому что <head> только в index.php, не включенных страниц)

Теперь лучше либо сделать <script>...</script> на каждой странице, которую я включил? Потому что это не будет в <head>.

Или использовать HTML -трибут onClick=""?

источник

2014-02-21 Quantm

Скрипты обычно не идут в голову, они идут непосредственно перед. Если вы не можете добавить элемент скрипта на каждую страницу за один раз, вам нужно переосмыслить свою архитектуру кода. –

Теперь лучше либо сделать ... на каждой странице I включить? Потому что этого не было бы.

<script> теги не должны быть в голове, на самом деле, самое лучшее место (производительность мудрый) прямо перед закрытием </body>. И да, вы также хотите использовать внешние JS-файлы как можно больше.

Должен ли я использовать HTML-атрибут onClick = ""? [...] я не могу поставить все JQuery OnClick-событий в голове страницы (потому что только в index.php, не включенных страниц)

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

Пример использования может быть:

$(document).ready(function() { 
    $('body').on('click', '.myselector', function(e) { 
     alert('Parameter: ' + $(this).attr('data-param')); 
    }); 
});

Вы HTML будет выглядеть примерно так:

<a href="#" class="myselector" data-param="Hello!">This is a button</a>

Это будет связывать только один событие, на теле. Когда вы нажимаете на что-либо внутри тела, событие будет пузыриться до тела и выполняться, если вы щелкнули внутри этого селектора. Если на странице нет .myselector, это ничего не сделает, так что все будет в порядке.

источник

2014-02-21 13:16:51 Carpetsmoker

Это хорошая идея. Но мне нужны разные параметры для функции, которую я вызываю с помощью 'onClick'-Event. Например, кнопка 1 отправляет параметр «XY» в функцию при нажатии, а кнопка 2 отправляет параметр «AB» в функцию. Можно ли это достичь? – Quantm

@Akeno Общий шаблон для этого использует атрибуты 'data-' на ваших кнопках. Я обновил свой ответ, чтобы включить пример. – Carpetsmoker

спасибо за этот пример. Это звучит многообещающе. Последний вопрос. Возможно ли иметь в одном элементе несколько параметров data-param? Например, если мне нужно больше параметров для функции? – Quantm

Читайте о Unobstrusive Javascript:

http://en.wikipedia.org/wiki/Unobtrusive_JavaScript

источник

2014-02-21 13:10:40 Hackerman

Да, но я работаю с Ajax, и я не знаю другого способа работы с Ajax. Потому что я хочу избежать перезагрузки страницы для некоторых вещей. Думаю, многие страницы пытаются. Все ли они используют другие трюки? – Quantm

Действительно, все JavaScript должны быть помещены во внешних файлах. Это касается производительности и ремонтопригодности.

Производительность, так как внешние скрипты могут кэшироваться браузером, уменьшая время загрузки.

Поддержание работоспособности, потому что вам не нужно тралить через массивные документы HMTL, чтобы получить немного JavaScript.

JavaScript в HMTL также может взаимодействовать с парсером, о котором вы должны знать.

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

источник

2014-02-21 13:13:39

спасибо. Я не знаю, как я мог изменить свою архитектуру. Просто я загружаю контент через Ajax. У меня есть index.php, и когда вы нажимаете на кнопку1, $ .ajax() вызывает page1.php, который отображает содержимое страницы1.php. То же самое с кнопкой2 и так далее. Я не могу представить себе другого пути. Даже с «нормальными» страницами без каких-либо включений мне понадобится другой javascript на странице. Думаю, что – Quantm

Вы все равно можете включить их в основной файл JavaScript, вам просто нужно связать события '.Click()' для определенного страницы, только когда он загружен (после завершения вызова AJAX). –

javascript: onClick = "" vs. jQuery.Click()

ответ

Смежные вопросы