addEventListener에서 dupliacte를 제거하는 방법

Question

addEventListener에서 중복을 제거하는 방법.

나는 사용자가 특정 호출을 할 때 다른 div의를 채우기 위해 아약스를 사용하는 사이트가 있습니다. 나는 또한 URL을 필터링 할 수 있도록 모든 링크를 잡고 URL을 addEventListener으로 만들고 사용자가 특정 링크를 클릭하면 경고를 표시하는 자바 스크립트 기능이 있습니다. 다음은 어떤 링크가 새로 인구에있는 경우 내용 중 일부는()가 호출되어 supportfunction 후 아약스를 사용하여 채워지기로, 나는이 직면하고있는 addEventListener

function supportFunction() { 
    var myFunction = function(e) { 
    var regExp = new RegExp('//'+location.hostname+'($|/)'); 
    var href = this.href; 

    if (regExp.test(href)) { 
     e.preventDefault(); 
     alert('same domain link'); 
    } 
    } 
    var links = document.querySelectorAll('a'); 

    for (var i = 0; i < links.length; i++) { 
    links[i].addEventListener('click', myFunction); 
    } 
} 

문제를 만들어 내 자바 스크립트 함수는 내용은 addEventListener에 추가되지 않습니다. 아약스 호출이 만들어 질 때마다 supportfunction을 호출 해 보았습니다. 그러나이 경우에는 중복이 eventlistener에 추가됩니다. 즉, 누군가가 동일한 도메인 링크를 클릭하면 2 개의 경고를 받게되고, 일부 경우 3-4는 supportfunction()이 호출 된 시간에 따라 경고합니다.

나는 내 문제가 무엇인지 설명 같아요. 너희들이 문제에 대해 더 많은 설명을 원한다면 알려줘.

나는 대답을 googleing 시도 하고이 링크를 발견 http://dean.edwards.name/weblog/2005/10/add-event/하지만 내 경우에는 그것을 사용하는 방법을 알아낼 수 없습니다.

참고 : 나는 순수 자바 스크립트 솔루션이 아닌 JQuery와 솔루션을 찾고 있어요. 당신은 하나의 리스너를 추가하는 경우

Answer 1

모든 링크는 이벤트 바인드가 한 번만 발생합니다. 이벤트 바인드 된 경우 플래그를 만들 수 있습니다. 그래서 코드는 아래와 같습니다.

function supportFunction() { 
    var myFunction = function(e) { 
     var regExp = new RegExp('//'+location.hostname+'($|/)'); 
     var href = this.href; 
     if (regExp.test(href)) { 
      e.preventDefault(); 
      alert('same domain link'); } 
    } 
    var links = document.querySelectorAll('a'); 
    for (var i = 0, len = links.length; i < len; i++) { 
     var link = links[i]; 
     // make sure add-event only once 
     if(!link.getAttribute('data-added')) { 
      link.setAttribute('data-added', 1); 
      link.addEventListener('click', myFunction); 
     } 
    } 
} 

Answer 2

(내가 :) 여기 요구하고 있지 않다 희망) 더 다른 사람이없는, 당신은 할 수있다 :;

links[i].onclick = myFunction; 

요소를 추가 할 때마다 함수를 실행하십시오. 링크에 이미 청취자가있는 경우 해당 방법은 myFunction으로 바뀝니다. (IE를 (아마도 사업부) 모든 주제 링크의 부모에 클릭 리스너를 넣고 event target (W3C DOM 모델)을 테스트하거나 srcElement :

if (!links[i].onclick) { 
    links[i].onclick = myFunction; 
} 

을하지만 대표단은 가능성이 가장 좋은 솔루션입니다 : 또는 당신은 할 수 모델)을 확인하여 관심있는 링크에서 왔는지 확인하십시오.

관련 MDN 기사 : event.target.