Тег и события клика href = "javascript: my_function ()" vs onclick = "my_function ()" или - PullRequest
Новая
       31

Тег и события клика href = "javascript: my_function ()" vs onclick = "my_function ()" или

2 голосов
/ 22 августа 2010

Есть несколько способов определить действие клика по тегу привязки, например: 

<a href="javascript: void(0)" onclick="funciton_X()">click here</a>

или 

<a href="javascript: funciton_X()">click here</a>

или 

<a id="a_tag" href="javascript: void(0)">click here</a>  
<script type="text/javascript">  
$('#a_tag').click(function(){})  
</script>

Есть ли значительная разница, какую я буду использовать? Каковы их преимущества и недостатки. Есть ли четвертый вариант?

Ответы [ 3 ]

3 голосов
/ 22 августа 2010

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

Как отметил @David Dorward в разделе комментариев, если вы используете последний метод, рекомендуетсяиметь атрибут href, указывающий на некоторый реальный URL, чтобы клиент был перенаправлен, например, если у него отключен JavaScript.Этот метод называется прогрессивное улучшение , когда вы определяете минимальную разметку вашего сайта и основываясь на возможностях клиентского браузера, которые вы обогащаете функциональностью, недоступной в разметке, такой как AJAX и некоторыми другими приятными эффектами пользовательского интерфейса.

Итак, подведем итог: 

<a id="a_tag" href="basic.htm">click here</a>

, а затем в отдельном файле javascript (пример с jQuery , но вы можете использовать все, что захотите): 

$(function() {
    $('#a_tag').click(function() {
        // TODO: some nice effect
        return false;
    });
});
0 голосов
/ 22 августа 2010

Вам нужно даже добавить this.preventDefault(); в функцию.

// жаль, что я не знаю, как добавить комментарий к ответу Дарина Димитрова.

0 голосов
/ 22 августа 2010

Я предпочитаю последнее.Отделение вашего javascript от html является хорошей практикой и облегчает сопровождение кода.Библиотеки, такие как JQuery, Prototype, Mootools и т. Д., Очень помогают в этом.Это очень похоже на выполнение CSS во внешней таблице стилей и в сравнении со встроенными стилями.Предпочтение состоит в том, чтобы хранить их отдельно, что позволяет создавать чистый и семантический html.

Возьмем другой пример: 

<form id="myForm"> .... </form>

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

...