как получить атрибуты ссылки с помощью attachListener?

Question

Я пробовал jQuery и javascript, но ни один из них не может привести ссылку на ссылку. Вот код, который я использую - он ничего не печатает в предупреждении функции callme

function callMe() {
var ll = this;    
var id1 = ll.getAttribute('id');
alert('Inside callMe...'+id1);
}

function load() {   
 var lnk = new Array();
 lnk = document.getElementsByTagName("a");
 var len = lnk.length;

for (var i=5;i<len;i++){
var id = lnk[i].getAttribute('data-id');
lnk[i].attachEvent('onclick',callMe);
}

}

Я тоже пытался использовать следующий jQuery

$("a").click(function(){
alert(this.id); 
var shouldTrack = $(this).attr('id');
alert('Inside callMe...'+shouldTrack); }); 

Answer 1

Вы используете этот код до завершения загрузки страницы?Либо это должно быть в конце </body>, либо вызывается на window.onload, либо (в jQuery) $(document).ready

Также атташе не является кросс-браузерным.

И это прекрасно работает

.

Answer 2

> function callMe() {
>   var ll = this;

При использовании проприетарного MS attachEvent ключевое слово this вызываемого прослушивателя не задается для элемента, для которого был вызван прослушиватель (как, например, когда W3C addEventListener *) Используется метод 1007 * или встроенный обработчик событий HTML). Для этого есть ряд исправлений, обычно используется связанный объект event , поэтому функция становится такой:

function callMe(evt) {
  var evt = evt || window.event;
  var ll = evt.target || evt.srcElement;

>   var id1 = ll.getAttribute('id');

Нет необходимости использовать getAttribute для стандартных свойств DOM:

    var id1 = ll.id;

.

>   alert('Inside callMe...'+id1); 
> }
> 
> function load() {
>   var lnk = new Array();
>   lnk =  document.getElementsByTagName("a");

Нет особого смысла создавать массив и присваивать ему lnk только для немедленной замены его NodeList, возвращаемым getElementsByTagName . Кроме того, вы, похоже, следите за ссылками, поэтому лучше получить доступ к коллекции document.links , которая уже доступна и содержит только ссылки, тогда как getElementsByTagName ('a') будет включать все элементы A включая якоря.

Таким образом, две вышеупомянутые строки могут быть:

    var lnk = document.links;

.

>   var len = lnk.length;
> 
>   for (var i=5; i<len; i++) {
>     var id = lnk[i].getAttribute('data-id');
>     lnk[i].attachEvent('onclick',callMe);

Как отмечалось выше, attachEvent - это собственный метод MS, который поддерживается не всеми браузерами. Лучше иметь функцию, которая сначала пробует метод W3C addEventListener , затем attachEvent . Очень простая версия:

function addEvent(el, evt, fn) {
  if (el.addEventListener) {
    el.addEventListener(evt, fn, false);
  } else if (el.attachEvent) {
    el.attachEvent('on' + evt, fn);
  }
}

Отметив, что событие является эквивалентным внутренним именем события HTML без начального «on». Таким образом, присоединение слушателя становится:

      addEvent(lnk[i], 'click', callMe);

.

>   }
> }

Кроме того, функцию следует запускать после того, как документ будет готов, поэтому либо используйте атрибут onload тела, window.onload , либо поместите скрипт непосредственно перед закрывающим тегом тела.

Наконец, не забудьте позвонить load . Вот весь сценарий переделан:

<a href="#" id="link0">Link0</a>
<a href="#" id="link1">Link1</a>
<a href="#" id="link2">Link2</a>
<a href="#" id="link3">Link3</a>
<a href="#" id="link4">Link4</a>
<a href="#" id="link5">Link5</a>

<script type="text/javascript">

function addEvent(el, evt, fn) {
  if (el.addEventListener) {
    el.addEventListener(evt, fn, false);
  } else if (el.attachEvent) {
    el.attachEvent('on' + evt, fn);
  }
}

function callMe(evt) {
  var evt = evt || window.event;
  var ll = evt.target || evt.srcElement;
  var id1 = ll.id;
  alert('Inside callMe...'+id1); 
}

function load() {
  var lnk = document.links;
  var len = lnk.length;

  for (var i=5; i<len; i++) {
    var id = lnk[i].getAttribute('data-id');
    addEvent(lnk[i], 'click', callMe);
  }
}

load();

</script>