如何使用attachListener获取链接的属性

How to get attributes of a link using attachListener?

本文关键字：属性 链接 获取 何使用 attachListener      更新时间：2023-09-26

我尝试过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); });

是否在页面加载完成之前运行此代码?这必须在</body>的末尾或在window.onload或(在jQuery中)$(document).ready上调用。

attachevent也不能跨浏览器。

这个很好

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

当使用MS专有的attachEvent时，被调用的侦听器的this关键字不会设置为调用侦听器的元素(就像使用W3C addEventListener方法或HTML内部事件处理程序时一样)。有很多方法可以解决这个问题，通常的方法是使用关联的事件对象，因此函数变成:

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");

创建一个数组并将其赋值给 link 只是为了立即用getElementsByTagName返回的NodeList替换它并没有多大意义。此外，您似乎是在链接之后，所以最好访问文档。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);

. 

>   }
> }

而且，该函数应该在文档准备好之后运行，所以可以使用body的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>
相关文章：