Как получить в функции данные объекта её вызвавшего?

380
07 марта 2017, 16:40

Есть ссылка:

<a title="Заголовок" href="javascript:someFunc()">ссылка</a>

Соответственно вызывается функция. Вопрос: можно ли в этой функции получить данные об объекте, которая вызвала функцию? В частности получить title, или текст ссылки?

Ссылок будет много, хотелось бы обойтись без дублирования информации из ссылки в параметрах функции. Также, знаю, что можно присвоить ссылкам id, передавать его параметром, а в функции уже использовать getElementById(), но опять же, конечный пользователь не слишком умён, хотелось бы, что бы он просто создавал ссылки, а дальше всё делалось в скрипте.

Answer 1

Не самое лучшее решение ставить функцию в тег href

Так лучше: 

<a href="#" onclick="MyFunction();">text</a>

Так еще лучше:

<a href="#" onclick="MyFunction();return false;">text</a>

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

Вы можете сделать так 

function someFunc(sender){ 
alert(sender.text) 
alert(sender.title); 
}
<a title="Заголовок" href="#" onclick="someFunc(this); return false;">ссылка</a>

Answer 2

Способ 1. Передача this

function foo(el){ 
  console.log(el.title, el.innerHTML); 
}
<a title="Заголовок" href="javascript:" onclick="foo(this)">ссылка</a>

Способ 2. Обработка события.

В этом случае нужно только уточнить, какие именно объекты нуждаются в обработке.

Например, обработка всех тегов a:

document.addEventListener('click', function(e) { 
  var el = e.target; 
  if (el.tagName !== 'A') return; 
  console.log(el.title, el.innerHTML); 
});
<a title="Заголовок" href="javascript:">ссылка</a>

Способ 2+. Обработка события.

Если шаблон править нельзя, вы можете также проверять аттрибут href, чтобы оперировать нужными ссылками.

document.addEventListener('click', function(e) { 
  var el = e.target; 
  if (el.tagName !== 'A') return; 
  if (el.href !== 'javascript:someFunc()') return; 
  console.log(el.title, el.innerHTML); 
  e.preventDefault(); // отменяем действие по href 
});
<a title="Заголовок" href="javascript:someFunc()">ссылка</a>

Способ 3. document.activeElement

function foo() { 
  var el = document.activeElement; 
  console.log(el.title, el.innerHTML); 
}
<a title="Заголовок" href="javascript:foo()">ссылка</a>

READ ALSO
Почему &ldquo;return&rdquo; не возвращает значение?
javascript

Почему “return” не возвращает значение?

Код выше определенно находит необходимый Cell (так как consolelog() выводит то, что необходимо)

 258
если js отключен, подключаем php
javascript

если js отключен, подключаем php

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

 372
дожидаться выполнения Ajax [дубликат]
javascript

дожидаться выполнения Ajax [дубликат]

На данный вопрос уже ответили:

 324
Yii2 ActiveForm submit
javascript

Yii2 ActiveForm submit

У меня есть 2 формы одна обычная

 514