> 웹 프론트엔드 > JS 튜토리얼 > 자바스크립트 관련 이벤트의 여러 개념_자바스크립트 스킬

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

WBOY
풀어 주다: 2016-05-16 15:58:08
원래의
1081명이 탐색했습니다.

클라이언트측 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);
로그인 후 복사

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

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿