사용자함수 | 이벤트핸들러 1회 적용하고 제거하기 addEventListenr() / removeEventLitener(), on() / …

• 목록

네이티브자바스크립트

element.addEventListener(),

element.removeEventListener(),

 

등에 사용하는 이벤트핸들러를 선언한뒤에 제거하는 방법은..

사용자함수를 선언하여 삭제하도록 되어있다..

 

function aaa(){

  alert('사용자함수 실행');

}

 

element.addEventListener("click", aaa);

element.removeEventListener("click", aaa);

 

 

 

 

 

하지만 때에 따라서는 바로 익명함수를 콜백으로 써서 활용하게 된다면...

element.addEventListener("click", function(){

       alert('익명함수 실행');

});

위의 방법으로 이벤트핸들러를 적용했다면 적용된 함수를 제거할 방법이 없다.

 

물론, 다음과 같이 한다면 제거되겠지만 여러가지 클릭이벤트를 선언하고 추가했다면 클릭이벤트핸들러가 모두 제거가 되어버린다.

 

element.addEventListener("click", function(){

       alert('익명함수 실행');

       this.removeEventListener("click");

});

 

 

따라서 다음과 같이 특별한 클릭이벤트 핸들러를 특별히 실행후 제거해야 한다면 다음과 같이

arguments.callee 를 사용하여 스스로의 함수를 지정하여 제거하면 된다.

 

element.addEventListener("click, function(){

           alert('익명함수 실행');

           this.removeEventListener("click",arguments.callee);

});

 

 

 

 

 

 

 

제이쿼리를 사용한다면 다음과 같이

이벤트타입뒤에 오늘 네임스페이스를 활용하여 이름을 지정하고 선언한뒤에 제거하면 된다.

 

$("#main_article a").on("click",function(){

    alert("a click all");
    return false;

});

 

$("#main_article > div:eq(1) > article:eq(0) > h4 > a").on("click.notice",function(){

    alert("notice");

    $(this).off("click.notice");

    return false;

});

 

on(), off()외에도

이전 제이쿼리를 쓴다면

clcik()또는 bind(), unbind()

등을 위와 같이 응용하여 사용하면 된다.

 

 

 

 

 

 

 

 

다음의 예시를 참고해보자.

 

-------------------------------------------------------------------

 <div id="main_article">
     <div>
        <dl>
            <dt>고객센터</dt>
            <dd>063) 224-6160</dd>
        </dl>
        <div>
            <p>"언제든지 전화주시면<br /> 친절하게 답변드리겠습니다."</p>
            <dl>
                <dt>24시간 상담전화</dt>
                <dd>010-3678-4242</dd>
            </dl>
        </div>
      </div>
      <ul>
        <li>기계운반, 중량물 산업기계</li>
        <li>특수정밀 기계설치 운반, 상/하차</li>
        <li>산업기계 PLANT TANK 설치</li>
        <li>철구조물 제작 및 설치작업</li>
        <li>기계 도비작업</li>
      </ul>
      <div>
          <article>
            <h4><strong>알립니다</strong><a href="#">자세히 보기</a></h4>
            <ul>
                <li><a href="#"><span>홈페이지가 새롭게 오픈되었습니다.</span><span>2014/02/15</span></a></li>
                <li><a href="#"><span>홈페이지가 새롭게 오픈되었습니다.</span><span>2014/02/15</span></a></li>
                <li><a href="#"><span>홈페이지가 새롭게 오픈되었습니다.</span><span>2014/02/15</span></a></li>
            </ul>
        </article>
        <article>
            <h4><strong>시공실적</strong><a href="#">자세히 보기</a></h4>
            <ul>
                <li><a href="#"><span>홈페이지가 새롭게 오픈되었습니다.</span><span>2014/02/15</span></a></li>
                <li><a href="#"><span>홈페이지가 새롭게 오픈되었습니다.</span><span>2014/02/15</span></a></li>
                <li><a href="#"><span>홈페이지가 새롭게 오픈되었습니다.</span><span>2014/02/15</span></a></li>
            </ul>
        </article>
      </div>

 

----------------------------------

 

네이티브 자바스크립트 핸들러에서는 arguments.callee 를 사용하여 스스로의 함수를 제거.

▽▽▽▽▽▽▽▽▽▽▽▽▽▽▽▽▽

 

var aTag = document.getElementById("main_article").getElementsByTagName("article")[0].getElementsByTagName("a")[0];

 

aTag.addEventListener("click", function(){

           alert('공통 클릭 실행');

});

 

aTag.addEventListener("click", function(){

           alert('익명함수 실행');

           this.removeEventListener("click",arguments.callee);

});

 

 

----------------------------

 

 

제이쿼리 핸들러에서는 이벤트 핸들러의 네임스페이스 활용하여 제거

▽▽▽▽▽▽▽▽▽▽▽

 

$("#main_article a").on("click",function(){

    alert("a click all");
    return false;

});

 

$("#main_article > div:eq(1) > article:eq(0) > h4 > a").on("click.notice",function(){

    alert("notice");

    $(this).off("click.notice");

    return false;

});

http://bamtol.net/v5/bbs/board.php?bo_table=pp_js&wr_id=45