자바스크립트 관련 이벤트의 여러 개념_자바스크립트 스킬

클라이언트측 JavaScript 프로그램은 비동기 이벤트 중심 프로그래밍 모델을 채택합니다.

관련 이벤트의 여러 컨셉:

　이벤트 유형: 어떤 유형의 이벤트가 발생했는지 설명하는 데 사용되는 문자열입니다.

　

이벤트 대상 : 이벤트가 발생하는 개체

　

이벤트 핸들러: 이벤트를 처리하거나 이에 응답하는 함수입니다. 　

이벤트 개체:

특정 이벤트와 관련이 있고 해당 이벤트에 대한 자세한 정보를 포함하는 개체입니다. 　이벤트 전파:

브라우저가 이벤트 핸들러를 트리거하는 개체를 결정하는 프로세스입니다.

이벤트 핸들러 등록:

1. JavaScript 개체 속성을 설정합니다. 2. html 태그 속성 설정

　3. addEventListener 또는 attachmentEvent (후자는 IE용)

이벤트 전파의 3단계:

 function addEvent(target,type,handler){
   if(target.addEventListener){
     target.addEventListener(type,handler,false);
   }else{
     target.attachEvent("on"+type,function(event){return handler.call(target,event)});
   }
 }

1. '캡처' 단계라고 하는 대상 처리 기능 이전에 발생합니다. 2. 객체 자체의 처리 이벤트 호출

3. 버블링 이벤트 단계

자바스크립트에서는 요소에

이벤트를

지정할 수 있습니다.

을 지정하는 방법에는

이 있습니다. 1. html에서는 onclick 속성을 사용하세요 2. 자바스크립트에서는 onclick 속성 을 사용하세요. 3. javascipt에서 addEvenListener() 메소드를 사용하세요

세 가지 방법 비교

(1) 두 번째와 세 번째 방법에서는 이벤트 객체를 함수에 전달하고 해당 속성을 읽을 수 있지만 방법 1에서는 그렇지 않습니다.

(2) 두 번째와 세 번째 옵션이 선호됩니다. 첫 번째 옵션은 이벤트에서 콘텐츠를 분리하는 데 도움이 되지 않으며 이벤트 개체의 관련 콘텐츠를 사용할 수 없습니다.

몇 가지 문법 설명

(1) 첫 번째 방법에서는 onclick이 대소문자를 구분하지 않지만, 두 번째 방법에서는 소문자를 사용해야 합니다. HMTL은 대소문자를 구분하지 않지만 JS는 대소문자를 구분합니다.

(2) 두 번째와 세 번째 방법은 함수명을 지정할 때 큰따옴표가 없고, 첫 번째 방법은 HTML 속성으로 큰따옴표가 필요합니다. (3) 첫 번째 방법에는 괄호가 필요하지만 두 번째와 세 번째 방법에는 괄호가 필요하지 않습니다.

전체 코드:

 onclick="clickHandler()"
 document.getElementById("jsOnClick").onclick = clickHandler2; 
 document.getElementById("addEventListener").addEventListener("click", clickHandler2);

위 내용은 이 글의 전체 내용입니다. 모두 마음에 드셨으면 좋겠습니다.