Как правильно указать обработчик события?

[Ostic]

есть код, создающий следующую структуру:

<div>
  <p>
      <a>ссылка1</a>
  </p>
  <p>
      <a>ссылка2</a>
  </p>
  <p>
      <a>ссылка3</a>
  </p>
</div>

вот, собственно, скрипт:

var arr = localStorage.list ? JSON.parse(localStorage.list) : [];
var len = arr.length;
 
(function createHTML(){
    var div = document.createElement('div');
    div.className = "links-domain";
    document.body.appendChild(div);
    var p;
    var a;
    for (var i=0; i < len; i++){
        p = document.createElement('p');
        p.innerText = (i+1) + ".";
        div.appendChild(p);
        a = document.createElement('a');
        a.href = "http://www." + arr[i].domain;
        a.id = a.innerText = arr[i].name;
        p.appendChild(a);
    }
})();
 
document.addEventListener('DOMContentLoaded', addListener);
function addListener(){
    for (var j=0; j < len; j++){
            var elem = document. getElementById(arr[j].name);
            elem.onclick = clickHandler(elem.href);//function(){chrome.tabs.create({url: elem.href})};
                        //если сделать как в коментарии выше, то открывается только последняя ссылка
    };
}
 
function clickHandler(url_){
        chrome.tabs.create({url: url_});
}

почему открываются сразу все вкладки или
только какая-то одна при клике на любой ссылке?
как в подобных случаях правильно создавать обработчики, да и, вообще, структуры, указанные выше?

[Aetae]

clickHandler() - скобочки в конце имени функции значат вызов этой функции прямо сейчас. В elem.onclick попадает уже результат вызова данной функции(тут: undefined), тогда как сама функция сразу вызывается в цикле.

function addListener(){
  for (var j=0; j < len; j++){
    var elem = document. getElementById(arr[j].name);
    elem.onclick = clickHandler;
  };
}

function clickHandler(event){  
  chrome.tabs.create({url: this.href}); //this - ссылка на вызвавший событие elem
}

[Ostic]

да, Вы правы.