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


98

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

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

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

Ответы:


105

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


lol, это почти кажется глупым вопросом, но тем не менее, он в нужном месте., Вы можете дополнительно ответить на примере его использования по сравнению с обычными js (не то, что есть разница, но как это используется в jQuery
аналогично

@ SpYk3HH Согласен. Планирую это сделать.
Сельвакумар Арумугам

@SelvakumarArumugam Я не уверен, что это одно и то же. Кажется, один возвращает w.Event, а другой возвращает MouseEvent. В приведенном выше примере я думаю, что они достаточно похожи, но в случае $ (document) .on ('click', '.btn', e => {console.log (e); console.log (event)} ); эти два разные. Специально для e.currentTarget и event.currentTarget. В этом случае e.currentTarget предоставит вам то, что вам нужно, но event.currentTarget возвращает документ, а не кнопку, на которую вы нажали.
Адам Янгерс

Глядя на ответы, я бы сказал, что event === e.originalEvent, и что e содержит немного больше деталей.
Адам Янгерс


46

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

вступление

Маленькая вещь ' (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 и События .


29

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

Может быть

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

также.


8

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


7

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

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

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

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


4

В 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);
    }); 

То же самое!

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


4

Сегодня я только что написал сообщение о том, «Почему мы используем буквы типа« 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.



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

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


e в обработчике кликов содержит событие javascript для элемента, по которому был выполнен щелчок, а не значение $ (this).
Гербен Йонгериус
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.