В чем разница между использованием jQuery onclick и атрибута onclick?

Question

В чем разница между следующими двумя частями HTML (извините, если есть какие-либо опечатки, когда я набираю этот от руки)?

Использование jQuery:

<script type="text/javascript">
    $(document).ready(function() {
        $("#clickme").click(function() {
            alert("clicked!");
        });
    });
</script>

<a id="clickme" href="javascript:void(0);">click me</a>

Не используется jQuery:

<a id="clickme" href="javascript:void(0);" onclick="alert('clicked!');">click me</a>

Answer 1

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

<script type="text/javascript">
    $(document).ready(function() {
        $("#clickme").click(function() {
            alert("clicked!");
        });
        $("#clickme").click(function() {
            alert("I concur, clicked!");
        });
    });
</script>

Они оба будут вызваны на событие click в указанном порядке. «Реальное» событие onClick переопределяется системой, управляемой реестром jQuery. В ванильной структуре документа без такой системы, как jQuery, может быть только одно onClick событие.

Answer 2

Это также более четкое разделение кода пользовательского интерфейса (HTML) и логического кода (JavaScript). Это облегчает чтение каждого.

Answer 3

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