Что означает (e) в Javascript / jQuery?

Я новичок в JavaScript / jQuery и учился создавать функции. Многие функции отмечены (e) в скобках. Позвольте мне показать вам, что я имею в виду:

$(this).click(function(e) {
    // does something
});

Всегда кажется, что функция даже не использует значение (e), так почему же оно так часто встречается?

e- это короткая ссылка на переменную для eventобъекта, которая будет передана обработчикам событий.

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

В опубликованном вами примере это обработчик кликов, который является MouseEvent

$(<element selector>).click(function(e) {
    // does something
    alert(e.type); //will return you click
}

DEMO - События мыши DEMO используетe.whichиe.type

Некоторые полезные ссылки:

http://api.jquery.com/category/events/

http://www.quirksmode.org/js/events_properties.html

http://www.javascriptkit.com/jsref/event.shtml

http://www.quirksmode.org/dom/events/index.html

http://www.w3.org/TR/DOM-Level-3-Events/#event-types-list

ОТКАЗ ОТ ОТВЕТСТВЕННОСТИ: это очень поздний ответ на этот конкретный пост, но поскольку я читал различные ответы на этот вопрос, меня поразило, что в большинстве ответов используется терминология, которую могут понять только опытные программисты. Этот ответ представляет собой попытку ответить на исходный вопрос, имея в виду новичков.

вступление

Маленькая вещь ' (e) ' на самом деле является частью более широкой области действия того, что в Javascript называется функцией обработки событий. Каждая функция обработки событий получает объект события. Для целей этого обсуждения представьте себе объект как «вещь», которая содержит набор свойств ( переменных ) и методов ( функций ), во многом как объекты в других языках. Ручка, ' e ' внутри маленькой (e) штуки, похожа на переменную, которая позволяет вам взаимодействовать с объектом (и я использую термин переменная ОЧЕНЬ свободно).

Рассмотрим следующие примеры jQuery:

$("#someLink").on("click", function(e){ // My preferred method
    e.preventDefault();
});

$("#someLink").click(function(e){ // Some use this method too
    e.preventDefault();
});

Объяснение

• «#someLink» - это селектор вашего элемента (какой HTML-тег вызовет это).
• «щелчок» - это событие (при нажатии на выбранный элемент).
• «function (e)» - функция обработки события (при событии создается объект).
• «e» - это обработчик объекта (объект становится доступным).
• «preventDefault ()» - это метод (функция), предоставляемый объектом.

Что происходит?
Когда пользователь щелкает элемент с идентификатором «#someLink» (возможно, тег привязки), вызывает анонимную функцию «function (e)» и присваивает полученный объект обработчику «e» . Теперь возьмите этот обработчик и вызовите один из его методов, «e.preventDefault ()» , который должен предотвратить выполнение браузером действия по умолчанию для этого элемента.

Примечание: дескриптор можно назвать как угодно (например, « функция (billybob) »). «E» означает «событие», что кажется довольно стандартным для этого типа функций.

Хотя «e.preventDefault ()», вероятно, является наиболее распространенным использованием обработчика событий, сам объект содержит множество свойств и методов, к которым можно получить доступ через обработчик событий.

Некоторую действительно полезную информацию по этой теме можно найти на сайте обучения jQuery http://learn.jquery.com . Обратите особое внимание на разделы Использование jQuery Core и События .

eне имеет особого значения. Это просто соглашение об использовании в eкачестве имени параметра функции, когда параметр имеет значение event.

Может быть

$(this).click(function(loremipsumdolorsitamet) {
    // does something
}

также.

В этом примере eэто просто параметр для этой функции, но это eventобъект, который передается через нее.

eАргумент короток для объекта события. Например, вы можете захотеть создать код для якорей, отменяющий действие по умолчанию. Для этого вы должны написать что-то вроде:

$('a').click(function(e) {
    e.preventDefault();
}

Это означает, что при нажатии на <a>тег предотвращается действие по умолчанию для события щелчка.

Хотя вы можете часто видеть это, это не то, что вам нужно использовать в функции, даже если вы указали его в качестве аргумента.

В eсокращении jQuery event- текущий объект события. Обычно он передается как параметр для срабатывания функции события.

Демонстрация: события jQuery

В демо я использовал e

$("img").on("click dblclick mouseover mouseout",function(e){
        $("h1").html("Event: " + e.type);
}); 

Я мог также использовать event

 $("img").on("click dblclick mouseover mouseout",function(event){
            $("h1").html("Event: " + event.type);
    }); 

То же самое!

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

Сегодня я только что написал сообщение о том, «Почему мы используем буквы типа« e »в e.preventDefault ()?» и я думаю, что мой ответ будет иметь смысл ...

Сначала давайте посмотрим на синтаксис addEventListener

Обычно это будет: target.addEventListener (type, listener [, useCapture]);

И определение параметров addEventlistener:

type： Строка, представляющая тип события, которое нужно прослушать.

listener： Объект, который получает уведомление (объект, реализующий интерфейс Event), когда происходит событие указанного типа. Это должен быть объект, реализующий интерфейс EventListener, или функция JavaScript.

(Из MDN)

Но я думаю, что следует отметить одну вещь: когда вы используете функцию Javascript в качестве слушателя, объект, реализующий интерфейс Event (объектное событие), будет автоматически назначен «первому параметру» функции. Итак, если вы используете function (e), объект будет назначен на «e», потому что «e» - единственный параметр функции (определенно первый!), тогда вы можете использовать e.preventDefault, чтобы что-то предотвратить ....

давайте попробуем пример, как показано ниже:

<p>Please click on the checkbox control.</p>
<form>
    <label for="id-checkbox">Checkbox</label>
    <input type="checkbox" id="id-checkbox"/>

    </div>
</form>
<script>
    document.querySelector("#id-checkbox").addEventListener("click", function(e,v){
         //var e=3;
         var v=5;
         var t=e+v;
         console.log(t);
        e.preventDefault();

    }, false);
</script>

результат будет: [объект MouseEvent] 5 и вы предотвратите событие щелчка.

но если вы удалите знак комментария, например:

<script>
       document.querySelector("#id-checkbox").addEventListener("click", function(e,v){
            var e=3;
            var v=5;
            var t=e+v;
            console.log(t);
            e.preventDefault();

       }, false);
   </script>

вы получите: 8 и ошибку : «Uncaught TypeError: e.preventDefault не является функцией в HTMLInputElement. (VM409: 69)».

Конечно, на этот раз событие щелчка не будет предотвращено, поскольку в функции снова была определена буква "e".

Однако, если вы измените код на:

<script>
       document.querySelector("#id-checkbox").addEventListener("click", function(e,v){
            var e=3;
            var v=5;
            var t=e+v;
            console.log(t);
            event.preventDefault();

       }, false);
   </script>

все снова будет работать правильно ... вы получите 8, и событие щелчка будет предотвращено ...

Следовательно, «e» - это просто параметр вашей функции, и вам понадобится «e» в вашей функции (), чтобы получить «объект события», а затем выполнить e.preventDefault (). Это также причина, по которой вы можете заменить «e» на любые слова, не зарезервированные js.

Это ссылка на текущий объект события

$(this).click(function(e) {
    // does something
});

В отношении приведенного выше кода
$(this)это элемент, который в качестве некоторой переменной.
clickэто событие, которое необходимо выполнить.
параметр eавтоматически передается из js в вашу функцию, которая содержит значение $(this)value и может использоваться в дальнейшем в вашем коде для выполнения некоторых операций.