Как получить вызывающий объект onclick?

Question

мне нужен обработчик для вызывающего объекта события onclick

е

<a href="123.com" onclick="click123(event);">link</a>
<script>
function click123(event)
{
//i need <a> so i can manipulate it with Jquery 
}
</script>

Я хочу сделать это без использования $ (). Click или $ (). Live of jquery, но с помощью метода, описанного выше.

Answer 1

передать this во встроенном обработчике кликов

<a href="123.com" onclick="click123(this);">link</a>

или используйте event.target в функции (в соответствии с моделью события W3C DOM Level 2 )

function click123(event)
{
    var a = event.target;
}

Но, конечно, IE отличается , так что ванильный JavaScript-способ справиться с этим -

function doSomething(e) {
    var targ;
    if (!e) var e = window.event;
    if (e.target) targ = e.target;
    else if (e.srcElement) targ = e.srcElement;
    if (targ.nodeType == 3) // defeat Safari bug
        targ = targ.parentNode;
}

или менее многословный

function doSomething(e) {

    e = e || window.event;
    var targ = e.target || e.srcElement;
    if (targ.nodeType == 3) targ = targ.parentNode; // defeat Safari bug
}

, где e - это event object, который передается функции в браузерах, отличных от IE.

Если вы используете jQuery, я бы настоятельно рекомендовал ненавязчивый JavaScript и использовать jQuery для привязки обработчиков событий к элементам.

Answer 2

Самый простой способ - передать this в функцию click123 или Вы также можете сделать что-то вроде этого (кросс-браузер):

function click123(e){
  e = e || window.event;
  var src = e.target || e.srcElement;
  //src element is the eventsource
}

Answer 3

http://docs.jquery.com/Events/jQuery.Event

Попробуйте с event.target

Содержит элемент DOM, который выпустил событие. Это может быть элементом который зарегистрирован на событие или дитя этого.

Answer 4

Суть метода заключается в том, что вы загромождаете свой HTML-код JavaScript. Если вы поместите свой javascript во внешний файл, вы сможете получить доступ к своему HTML ненавязчиво, и это намного лучше.

Позже вы можете расширить свой код с помощью addEventListener / attackEvent (IE) для предотвращения утечек памяти.

Это без jQuery

<a href="123.com" id="elementid">link</a>

window.onload = function () {
  var el = document.getElementById('elementid');
  el.onclick = function (e) {
    var ev = e || window.event;
    // here u can use this or el as the HTML node
  }
}

Вы говорите, что хотите манипулировать им с помощью jQuery. Таким образом, вы можете использовать jQuery. Чем это еще лучше сделать так:

// this is the window.onload startup of your JS as in my previous example. The difference is 
// that you can add multiple onload functions
$(function () {
  $('a#elementid').bind('click', function (e) {
    // "this" points to the <a> element
    // "e" points to the event object
  });
});

Answer 5

Я думаю, что он лучше всего использует currentTarget свойство вместо target свойство.

Свойство currentTarget только для чтения интерфейса события определяет текущая цель для события , поскольку событие проходит через DOM.Он всегда ссылается на элемент, к которому был прикреплен обработчик события, в отличие от Event.target, который идентифицирует элемент, на котором произошло событие .

Например:

<a href="#"><span class="icon"></span> blah blah</a>

Javascript:

a.addEventListener('click', e => {
    e.currentTarget; // always returns a element
    e.target; // may return span
})