이벤트 처리 중의this:attachEvent,addEventListener,onclick

이벤트 처리 함수에서 현재 실행 중인 대상을 가져오려면 this 를 사용합니다.이것은 의심할 여지없이 매우 편리한 특성이지만 서로 다른 이벤트 귀속 방식에 대해 this는 반드시 현재 조작된 대상이 아닐 수도 있다.본고는 서로 다른 방식으로 이벤트 처리 함수를 귀속할 때 함수 중this의 차이를 분석하고자 한다.일반적인 이벤트 바인딩 방식은 4가지에 불과합니다.attachEvent: IE9 이하 MSIE 에 있습니다. addEventListener: DOM Level 2 Event를 지원하는 브라우저입니다. el.onclick=function(){}: 이것은 오래된 이벤트 귀속 방식입니다. <a onclick='handle()'>: 이것은 가장 오래된 이벤트 귀속 방식입니다.
jQuery: jQuery도 이벤트를 쉽게 연결할 수 있는 많은 방법을 제공합니다. addEventListener는 현대 웹 응용 프로그램에서 이벤트를 귀속시키는 궁극적인 방법이다. jQuery는 버전 2에서부터 호출addEventListener을 통해 이벤트 귀속 논리를 실현한다. (원본 분석 참조: DOM Level 2 Event와 jQuery 원본 참조).jQuery의 모든 시간 귀속 최종 호출은 on 방법입니다. 참고: jQuery 이벤트:bind,delegate,on의 행위와 성능.

attachEvent와 addEventListener의 차이

솔직히 말해서 나는 사용하지 않는다attachEvent. jQuery마저 버전 2로 업데이트되었지만 IE를 지원하는 습관이 없다.그러나 면접에서 자주 물어본 바에 근거하여 attachEvent와addEventListener의 차이점을 이야기해 봅시다!그것과addEventListener는 어떤 차이가 있습니까?
물론 지원하는 브라우저가 다르고attachEvent IE9 이하 버전에서 지원됩니다.다른 것은 모두 지원addEventListener.
매개변수가 다릅니다.addEventListener 세 번째 파라미터는 포획 여부를 지정할 수 있지만 attachEvent는 포획을 지원하지 않는다.
이벤트 이름이 다릅니다.attachEvent 첫 번째 매개 변수 이벤트 이름 앞에 on를 추가해야 한다. 예를 들어 el.attachEvent('onclick', handleClick);this다르다.우리는 this 한마디로 현재 함수를 가리키는 호출자가 사건 처리 함수에 대해 비교적 복잡하다는 것을 알고 있는데 이것이 본고의 중점이다.

attachEvent 방식의 이벤트 바인딩

attachEvent의this는 항상Window이다.예를 들면 다음과 같습니다.

el.attachEvent('onclick', function(){
    alert(this);
});

실행하면 대화 상자가 팝업됩니다: [object Window].

스크립트 설정 onclick 방식의 이벤트 귀속

자바스크립트에서 DOM 대상의 onclick 속성을 설정합니다. this 항상 설정된 DOM 요소를 가리킵니다.예를 들면 다음과 같습니다.

document
  .getElementById('l1')
  .onclick = function(){
    console.log(this);
  };

클릭div#l1 후 콘솔 출력:

<div id="l1">...</div>

HTML에서 onclick 방식의 이벤트 바인딩 설정

HTML에서 설정onclick 속성은 윈도우가 이 처리 함수를 호출하는 것과 같아서 this 항상Window.예를 들면 다음과 같습니다.

<div onclick="clickHandler()"></div>
<script>
function clickHandler(){
    console.log(this);
}
</script>

이것div을 누르면 콘솔이 다음과 같이 출력됩니다.

Window {top: Window, location: Location, document: document, window: Window, external: Object…}

addEventListener 방식의 이벤트 바인딩

addEventListener의this는 항상 현재 사건을 처리하고 있는 DOM 대상입니다.DOM Level 2 Event Model에서 언급한 바와 같이 이벤트 처리는 포획 단계, 목표 단계와 거품 단계를 포함한다(포획과 거품 메커니즘에 대한 자세한 내용은 DOM Level 2 Event와 jQuery 원본 참조).다음 그림은 다음과 같습니다.
그림 출처:http://www.w3.org/TR/DOM-Level-3-Events/#dom-event-architecture
이벤트가 현재 흐르는 원소 this 는 어느 원소를 가리킨다.예를 들어, 두 레벨 DOM의 경우

<div id="l1">
  <div id="l2"></div>
</div>
<script type="text/javascript">
  var l1 = document.getElementById('l1'),
      l2 = document.getElementById('l2');

  l1.addEventListener('click', function () {
    console.log('l1 capture', this);
  }, true);
  l1.addEventListener('click', function () {
    console.log('l1 bubbling', this);
  });
  l2.addEventListener('click', function () {
    console.log('l2 target', this);
  });
</script>

클릭div#l2 후 콘솔 출력:

l1 capture <div id=​"l1">​…​</div>​
l2 target <div id=​"l2">​</div>​
l1 bubbling <div id=​"l1">​…​</div>​

target 및 currentTarget

addEventListener의 이벤트 처리 함수this는 사실상 클릭된 요소를 가리키지 않지만 이벤트 처리 함수의 매개 변수인 이벤트 대상은 target과 currentTarget 속성을 제공하여 현재 대상과 목표 대상을 구분한다.우리는 그것들을 모두 출력할 수 있다.

l1.addEventListener('click', function (e) {
  console.log('l1 capture', this, e.currentTarget, e.target);
}, true);
l2.addEventListener('click', function (e) {
  console.log('l2 target', this, e.currentTarget, e.target);
});
l2.addEventListener('click', function (e) {
  console.log('l2 target, invalid capture', this, e.currentTarget, e.target);
}, true);

결과:

l1 capture  <div id=​"l1">​…​</div>​  <div id=​"l1">​…​</div>​  <div id=​"l2">​</div>​
l2 target   <div id=​"l2">​</div>​   <div id=​"l2">​</div>​   <div id=​"l2">​</div>​
l1 bubbling <div id=​"l1">​…​</div>​  <div id=​"l1">​…​</div>​  <div id=​"l2">​</div>​

이를 통해 알 수 있듯이 currentTarget는 항상 this와 같고 target는 사실상 클릭된 목표의 DOM 대상을 가리킨다.
주석이 없는 한 본 블로그 글은 모두 오리지널입니다. 전재는 링크 형식으로 본문의 주소를 표시하십시오.http://harttle.com/2015/08/14/event-and-this.html