Получение идентификатора элемента, который вызвал событие
За исключением, конечно, что test var должен содержать идентификатор «aaa» , если событие запускается из первой формы и «bbb» , если событие запускается из второй формы.
Ваш пример немного странный. Вы прикрепляете событие щелчка к «а», но у вас нет привязок. Если изменить его на $ (‘input.title’). Click (. ), будущие читатели вашего вопроса будут немного понятнее.
Вы можете использовать event.target.id в обработчике событий, чтобы получить идентификатор элемента, который вызвал событие.
17 ответов
В jQuery event.target всегда ссылается на элемент, который инициировал событие, где ‘event’ — это параметр, переданный функции. http://api.jquery.com/category/events/event-object/
Обратите внимание, что также будет работать ‘this’ , но это не объект jQuery, поэтому, если вы хотите использовать на нем функцию jQuery, вы должны ссылаться на него как ‘$(this)’ , например:
Вот Это Да! Благодарю. Не понимал, что jQuery так хорошо это абстрагирует. Ты жжешь! Я думаю, что все равно будет разница между (this) и (event.target) — быть объектом, с которым вы связали событие, и объектом, который получил событие.
К сожалению, event.target не разрешает доступ к своим пользовательским атрибутам. Для этого нужно использовать $ (this) .attr («organization: thingy») ;.
@ZianChoy — я не совсем уверен, что вы подразумеваете под «пользовательскими атрибутами», но вы можете использовать $(event.target) если вам нужен метод jQuery, например, $(event.target).attr(«organisation:thingy»); ,
Я думаю, что стоит отметить, что если вам нужен доступ к цели события для управления dom, вы можете сделать что-то вроде этого: $ (event.target) .eq (0). Затем вы можете использовать любой метод, который вы обычно используете с элементом dom, например, $ (event.target) .eq (0) .find (‘li’).
Обратите внимание, что: event.target — это реальный элемент, по которому щелкают. Если вы, например, связываете событие click с div, и внутри этого div есть элемент P и элемент H2 — event.target вернет элемент H2 или P, если щелкнуть один из них. «this» действительно вернет div, на котором вы повесили событие, независимо от того, какой дочерний элемент вы щелкнули.
Иногда событие var target = e.originalEvent.explicitOriginalTarget || e.currentTarget[e.currentTarget.length — 1] || e.target; неочевидным элементом, тогда вы можете попытаться использовать это var target = e.originalEvent.explicitOriginalTarget || e.currentTarget[e.currentTarget.length — 1] || e.target;
Обратите внимание, как уже упоминалось @RobQuist выше, e.target на самом деле является элементом, на котором произошло событие, и он не всегда может быть элементом, вызвавшим событие. Таким образом, автору может потребоваться изменить предложение. В jQuery event.target всегда ссылается на элемент, вызвавший событие, где «событие», так как могут быть случаи, когда оно неверно. Кстати, во всех случаях e.currentTarget ссылается на элемент, к e.currentTarget был прикреплен обработчик события. Пожалуйста, прочитайте это: developer.mozilla.org/en-US/docs/Web/API/Event/currentTarget
Предупреждение для тех, кто использует ES6. Функции стрелок не устанавливают «это». Так что, в основном, не используйте функцию стрелки здесь.
@tomwrong: Ну, если вы не используете event.target этого event.target или event.currentTarget , так что вы можете использовать this для чего-то другого. Тогда функция стрелки имеет смысл.
После сумасшедших часов попыток и попыток я обнаружил, что если вы используете $(document).bind(‘click’,’myelement,function(event)<. >‘) то $(this) вернет document не myelement .
Для справки попробуйте это! Он работает!
jQuery("classNameofDiv").click(function() < var contentPanelId = jQuery(this).attr("id"); alert(contentPanelId); >); @dlackey это то же самое для меня, другое решение не работает на моем Firefox 12, но это сработало. Спасибо
Верхний ответ, кажется, не работает для получения идентификатора элемента во встроенном SVG. $(this).attr(«id»); делает.
Имейте в виду, что если ваше событие click относится к элементу с e.target элементами, e.target даст вам точный элемент, который вызвал событие, которое было инициировано, даже если это был дочерний элемент, тогда как this даст вам элемент, к которому прикреплено событие. к.
Хотя это упоминается в других сообщениях, я хотел бы сказать следующее:
$(event.target).id не определено
$(event.target)[0].id дает атрибут id.
event.target.id также дает атрибут id.
this.id указывает атрибут id.
Различия, конечно, заключаются между объектами jQuery и объектами DOM. «id» — это свойство DOM, поэтому вы должны быть на объекте элемента DOM для его использования.
(Это сбило меня с толку, так что, вероятно, он сработал кто-то другой)
@artaxerxe это означает, что у выбранного вами элемента нет идентификатора: P; также не используйте jquery для такого рода вещей . используйте атрибуты javascript для события, потому что это быстрее.
Для всех событий, не ограничиваясь только jQuery, вы можете использовать
var target = event.target || event.srcElement; var >Где event.target не работает, он возвращается на event.srcElement для IE. Для уточнения вышеуказанного кода не требуется jQuery, но также работает с jQuery.
Отказ от использования jQuery означает, что при получении точно такого же результата выполняется меньше строк кода, как показано выше. JQuery абстрагируется от JS. Это прямой ответ JS, и посмотрите на размер!
не лучше ли просто использовать ключевое слово this, которое всегда даст вам доступ к свойствам элемента, вызвавшего событие?
Просто нужно было копаться во всем дерьме jQuery, чтобы получить этот ответ. Благодарю. Это актуально как никогда: needsmorejquery.com
Вы можете использовать (this) для ссылки на объект, который запускал функцию.
‘this’ является элементом DOM, когда вы находитесь внутри функции обратного вызова (в контексте jQuery), например, вызывая методы click, each, bind и т.д.
если у вас есть такая функция, как $(html).click() (this) вернет объект html, а не элемент, по $(html).click() щелкнули
Я генерирую таблицу динамически из базы данных, получаю данные в JSON и помещаю ее в таблицу. Каждая строка таблицы получила уникальный ID , который необходим для дальнейших действий, поэтому, если DOM изменен, вам нужен другой подход:
$("table").delegate("tr", "click", function() < var alert("ID:"+id); >); Ах да, это то, что я искал. Это также работает для более новых «вкл», так как «делегат» теперь устарел. У меня были флажки, созданные динамически из данных БД, и, конечно, все они имели разные идентификаторы, которые мне нужно было использовать, чтобы что-то делать при нажатии. Я использовал этот метод здесь, чтобы узнать, какой идентификатор был фактически нажат. В JS старой школы я просто передавал идентификатор из каждого флажка в HTML-коде флажка, но не могу сделать это таким образом с моделью обработчика событий jQuery.
Элемент, который активировал событие, которое мы имеем в событии.
Мы получаем объект DOM node, на который был установлен обработчик событий.
Наиболее вложенные node, которые начали процесс барботирования, который мы имеем в
Объект события всегда является первым атрибутом обработчика события, например:
document.querySelector("someSelector").addEventListener(function(event)< console.log(event.target); console.log(event.currentTarget); >); Исходный элемент как объект jQuery должен быть получен через
Это дает вам источник щелчка, а не элемент, которому была назначена функция щелчка. Может быть полезно, когда событие click находится на родительском объекте EG.a щелкните событие в строке таблицы, и вам понадобится ячейка, на которую была нажата кнопка
Использование может использовать .on event
В случае делегированных обработчиков событий, где у вас может быть что-то вроде этого:
Скорее всего вы обнаружите, что itemId undefined , поскольку содержимое LI завернуто в , что означает, что , вероятно, будет целью события. Вы можете обойти это с небольшой проверкой, например:
Или, если вы предпочитаете максимизировать читаемость (а также избегать ненужного повторения вызовов упаковки jQuery):
При использовании делегирования событий метод .is() неоценим для проверки того, что ваша цель события (между прочим) на самом деле то, что вам нужно. Используйте .closest(selector) для поиска дерева DOM и используйте .find(selector) (обычно в сочетании с .first() , как и в .find(selector).first() ), чтобы выполнить поиск по нему. Вам не нужно использовать .first() при использовании .closest() , так как он возвращает только первый соответствующий элемент предка, а .find() возвращает всех соответствующих потомков.
Полезно! Я настроил в моем случае, потому что я только что получил простой
Просто будьте осторожны при использовании простого атрибута идентификатора, так как каждый идентификатор должен быть уникальным на этой странице. Поэтому, если вам по какой-то причине нужно иметь два таких списка на этой странице, вы, скорее всего, получите дубликаты идентификаторов, что плохо. Вот почему я склонен всегда использовать data-id только для будущего.
var buttons = document.getElementsByTagName('button'); var buttonsLength = buttons.length; for (var i = 0; i < buttonsLength; i++)< buttons[i].addEventListener('click', clickResponse, false); >; function clickResponse() < // do something based on button selection here. alert(this.id); >Как в функции определить элемент, по которому кликнули?
У меня есть функция и есть какие-то элементы на странице, которые по onclick вызывают эту функцию. Можно ли как-то без передачи id элемента в качестве доп. параметра определить, какой элемент вызвал функцию?
В те древние времена, когда использовались атрибуты onclick и прочие, первым аргументом обработчика передавали this: https://jsfiddle.net/m2zfhreh/
> В те древние времена, когда использовались атрибуты onclick и прочие
А сейчас что передают?
Роман: а не будет ли слишком много лишних строк для addEventListener? У меня вот много блоков вызывают одну и ту же функцию и я что-то побаиваюсь добавлять для них всех addEventListener.
Андрей Галко: если не хотите лезть в дебри кроссбраузерного навешивания обработчиков событий, писать свою прослойку для ивентов, с возможностью убрать обработчик и прочими плюшками, то используйте jQuery, метод .on(). Ну или свой код, с атрибутом onclick. Только он, во-первых, не очень красив, в плане дублирования кода вызова в html, во-вторых, не позволяет навесить несколько обработчиков события. Вот небольшая вводная статья на эту тему: javascript.ru/tutorial/events/intro
Андрей Галко: кстати, можно повесить 1 обработчик клика на родителя, в котором варятся все ваши элементы, и потом получать информацию по кому кликнули через event.target , кода будет гораздо меньше.
Войдите, чтобы написать ответ
Как ускорить итерацию в два раза?
Как правильно отслеживать состояние формы?
Курсы javascript
Вроде всё просто но никак не могу разобраться а сроки поджимают(
При нажатие на ссылку вызывается функция некоего объекта, в этой фунции по указатею this я имею доступ к данному объекту, а как получить доступ к указателю ссылки вызвавшей функцию.
Пробовал e.target | e.srcElement, но если в ссылку что то вложено, к примеру имидж, то я получаю уазатель на имидж, а мне нужна именно ссылка, которая вызвало функцию.
this.MyClass = function() < this.prop1 = 100; this.init = function() < addEvent(document.getElementById("link"), "click", function(e)); > this.ActionOnClick = function(e) < //Я могу получить свойство prop используя this alert(this.prop1); //Как мне получить дескриптор ссылки которая вызвала эту функцию. >return this; > addEvent = function (elem, evType, fn) < if (elem.addEventListener) < elem.addEventListener(evType, fn, false); >else if (elem.attachEvent) < elem.attachEvent('on' + evType, fn) >else < elem['on' + evType] = fn >> myObject = MyClass(); myObject.init(); так не получиться в данном случае alert(this) выведен [object Window] , а не элемент html на который нажали.
var addEvent = document.addEventListener ? function (element, eventType, listener, useCapturing) < element.addEventListener(eventType, listener, useCapturing == true); return listener; >: function (element, eventType, listener) < var _listener = function () < listener.call(element, window.event) >; element.attachEvent("on" + eventType, _listener); return _listener; >; к сожалению результат тот же. получаю доступ к объекту, но нет доступа к ссылке( неужели нет решения?
иначе this будет ссылаться на window как я понял потому и срабатвает функция ActionOnClick(e) хотя по идее она должна быть не определена.
Во вторых
MyClass = function() < var T = this; this.prop1 = 100; this.init = function() < addEvent(document.getElementById("link"), "click", function(e)); > this.ActionOnClick = function(e) < // this = елемент с событием, т.е. A //а обьект вам доступен по прежнему под переменной T; //Я могу получить свойство prop используя T alert(T.prop1); //Как мне получить дескриптор ссылки которая вызвала эту функцию. alert(this.tagName); >; return this; > Настоящий программист думает и осознает сам решение задачи, а не копирует другие мысли, не осознавая их (c)
Относись к человеку так же, как хотелось бы отношения к себе (с)
Все нужно там, где оно нужно, а все не нужно нигде (с) Gozar
B~Vladi: А кто такой JavaScript стрелок?! micscr: это тот, кто не jQuery танкист.
Программы становятся медленнее быстрее, чем компьютеры становятся быстрее (с) Никлаус Вирт