JavaScript 이벤트 처리 : 이 키워드 및 이벤트 처리 메커니즘

효율적인 클라이언트 웹 응용 프로그램은 JavaScript 이벤트 처리 메커니즘과 분리 할 수 ​​없습니다. 이벤트는 JavaScript가 마우스 호버, 링크 클릭, 페이지 스크롤, 창 크기 조정, 객체 드래그 등과 같은 사용자 동작을 감지 할 수 있도록 허용합니다. JavaScript 코드는 특정 이벤트가 발생할 때 트리거하는 이벤트 핸들러를 등록 할 수 있습니다. 대부분의 브라우저는 주요 정보, 마우스 커서 위치 등과 같은 이벤트 정보를 포함하는 단일 객체를 기능으로 전달합니다. 그런 다음 애니메이션 요소, AJAX 요청 시작 또는 브라우저의 기본 동작을 차단하는 것과 같은 특정 작업을 수행 할 수 있습니다. 또한 이 키워드도 설정 될 수 있습니다. 일반적으로 이것은 가 이벤트를 트리거하는 요소를 가리키지 만 항상 그런 것은 아닙니다.

인라인 이벤트 핸들러 사용을 피하십시오

인라인 이벤트 처리기 (예 : 나를 클릭하면 ]가 간단하지만 많은 단점이 있습니다. 이벤트 통화 및 처리기는 다른 위치에서 정의되므로 유지하기가 복잡합니다. 마지막으로, 페이지가로드 될 때 이벤트가 호출 될 수 있으므로 스크립트 태그는 하단이 아닌 HTML 상단에 배치해야합니다.

전통적인 dom0 이벤트 ]

link.onclick = eventhandler; )는 이벤트 유형 당 하나의 핸들러 만 할당 할 수 있습니다. 참고 : link.onclick = eventHandler (); 를 사용하지 마십시오. eventHandler 함수를 즉시 실행하고 onclick 링크 노드의 onclick 속성에 반환 값 (undefined)을 할당합니다. 오류는보고되지 않지만 클릭 이벤트가 발생하면 핸들러가 호출되지 않습니다.

Modern Dom2 이벤트

최신 이벤트 처리를 통해 동일한 이벤트에 여러 핸들러를 지정할 수 있습니다. 그러나 Microsoft와 W3C 간의 구현의 차이로 인해 IE9 이상의 지원 addeventListener () . 객체 감지를 사용하여 크로스 브라우저 이벤트를 만들 수 있습니다. 추가 기능 :

AttachEvent(link, "click", EventHandler);

function AttachEvent(element, type, handler) {
  if (element.addEventListener) element.addEventListener(type, handler, false);
  else element.attachEvent("on"   type, handler);
}

DOM0 이벤트와 유사하게, 모든 브라우저는 이 를 IE8 이하를 제외하고 이벤트를 트리거하는 요소로 설정합니다. IE8 이하에서 이 는 항상 전역 창 객체입니다. 다행히도 이벤트 객체에서 대상 요소를 결정할 수 있습니다.

function EventHandler(e) {
  e = e || window.event;
  var target = e.target || e.srcElement;
  console.log(target);
}

키워드의 의미 javaScript 이벤트 핸들러에서

]]]] 이 키워드는 함수가 호출되는 컨텍스트를 나타냅니다. 이벤트 핸들러에서 이

사용 사용 은 다른 변수를 사용하는 것과 마찬가지로 간단합니다.

는 첨부 된 이벤트 핸들러의 HTML 요소를 가리 킵니다. javaScript의 다른 이벤트 유형

javaScript는 클릭 ,

마우스 오버 , 마우스 아웃 , keydown , 와 같은 여러 이벤트를 지원합니다. 이벤트 핸들러를 요소에 첨부하는 방법 addeventListener 메소드를 사용하여 이벤트 핸들러를 요소에 첨부 할 수 있습니다. 이 메소드는 두 가지 매개 변수를 수용합니다. 이벤트의 이름과 이벤트가 발생할 때 실행할 기능이 있습니다.

javaScript의 이벤트 개체

이벤트 객체는 이벤트가 발생할 때 생성 된 특수 객체입니다. 이 개체에는 이벤트 유형, 대상 요소, 이벤트 발생 시간 등과 같은 이벤트에 대한 정보가 포함되어 있습니다. 이벤트 핸들러 기능에서 이벤트 객체에 액세스 할 수 있습니다.