Разница между использованием ID и onClick

Question

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

Представьте, что мы имеем

<button class="sample-class" role="button" tabindex="0" id="onEvent">play</button> 

, а затем Javascript, чтобы вызвать его, как так

<script> 
    $("#onEvent").click(function(){ 
     //do something 
    }) 
<script> 

Теперь, если мы имеем то же самое, такой

<button class="sample-class" role="button" tabindex="0" onClick="foo()">play</button> 

и мы вызываем на

<script> 
    function foo() 
    { 
    //Do something 
    } 
</script> 

Может ли кто-нибудь сказать мне разницу между использованием двух? С точки зрения того, что вы вызываете первым, что более эффективно, и если я буду использовать их оба, они будут работать?

Спасибо!

Answer 1

Если вы думаете об этом так же, как работает CSS,

onclick= : id= :: style= : class= 

Под этим я имею в виду первый каждого перемешивает фактическую функциональность, что вы пытаетесь сделать с декларацией и презентации страница. «Чистый» подход заключается в том, чтобы использовать подход разделения проблем - позволяя HTML быть презентатором и JavaScript для обработки функциональных возможностей, так же, как таблица стилей CSS учитывает аспекты стилизации, в отличие от объявления стилей в очереди.

Результат, за некоторыми исключениями, обычно более переносимый и обслуживаемый. Это также избавляет вас от небольших головных болей в будущем. Например, если вы должны были переименовать функцию foo в bar, и вы объявите onclick='foo()' в 50 местах на своем веб-сайте, это 50 изменений атрибутов onclick. Если вы используете альтернативу (привязка элемента к javascript через идентификатор), у вас есть однострочное изменение.

Также обратите внимание на то, что вы не ограничены соответствием идентификаторам. Вы можете прикрепить методы javascript к классам или их комбинации, поэтому у вас есть большая гибкость, без дополнительной разметки для вашего HTML.

Для получения дополнительной информации по общей концепции, имеющей отношение к вашему вопросу, см: https://en.wikipedia.org/wiki/Unobtrusive_JavaScript#Separation_of_behavior_from_markup

Answer 2

Может ли кто-нибудь сказать мне разницу между использованием двух?

Первый код использует внешний скрипт для выполнения задачи. Но второй код использует встроенный скрипт для выполнения задачи. В обработчике событий нет никакой разницы, но просто разница между тем, как вы используете код для вызова события.

Большинство из нас использует второй метод, т.е. сказать избежать встроенного скрипта.

В терминах которых один вызывается первым

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

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

Оба будут работать. Но что, если у вас есть разные вещи, связанные с этим событием? Помещая это в встроенный скрипт, он будет настороженно относиться к этому.

Вам не нужно беспокоиться об использовании внешнего сценария, т.е. если кто-то беспокоится о том, отключил ли пользователь браузер, сценарий не будет работать. Потому что современные веб-сайты созданы с помощью javascript/jquery. Таким образом, вы можете заставить посетителя включить javascript для правильной работы сайта.

Answer 3

Оба эти действия одинаковы. Но чтобы получить 1-й рабочий, вам нужно добавить ссылку на файл jquery.

Я предпочитаю идти с 1-м, просто по одной причине просто потому, что он слишком прост, так как он говорит: «jQuery - это легкий,« писать меньше, делать больше », библиотеку JavaScript».

Если вы хотите добавить функцию click на несколько div, если вы хотите использовать функцию onclick, вам придется писать onclick всюду, и слишком большая часть кода в html не является хорошей практикой. Но если вы используете функцию click, вы может дать общий класс и вызвать функцию щелчка для всего.