자바스크립트 이벤트

HTML 이벤트는 HTML 요소에 발생하는 것입니다.

JavaScript는 HTML 페이지에서 사용될 때 이러한 이벤트를 트리거할 수 있습니다.

HTML 이벤트

HTML 이벤트는 브라우저 작업 또는 사용자 작업일 수 있습니다.

다음은 HTML 이벤트의 예입니다.

HTML 페이지 로딩 완료
HTML 입력 필드 변경
HTML 버튼 클릭

보통 이벤트가 발생하면 뭔가를 할 수 있습니다.

JavaScript는 이벤트가 트리거될 때 일부 코드를 실행할 수 있습니다.

이벤트 속성은 HTML 요소에 추가할 수 있으며 HTML 요소는 JavaScript 코드를 사용하여 추가할 수 있습니다.

작은따옴표:

<some-HTML-element some-event='some JavaScript'>

큰따옴표:

<some-HTML-element some-event="some JavaScript"> ;

다음 예에서는 onclick 속성(및 코드)이 버튼 요소에 추가됩니다.

Example

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>
<button onclick="getElementById('demo').innerHTML=Date()">现在的时间是?</button>
<p id="demo"></p>
</body>
</html>

위 예에서 JavaScript 코드는 id="의 내용을 수정합니다. 데모' 요소입니다.

코드를 실행하고 시도해 보세요

다음 인스턴스에서 코드는 자체 요소의 콘텐츠를 수정합니다(this.innerHTML 사용).

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>
<button onclick="this.innerHTML=Date()">现在的时间是?</button>
</body>
</html>

코드를 실행하고 사용해 보세요

팁: JavaScript 코드 일반적으로 몇 줄의 코드입니다. 더 일반적인 이벤트는 이벤트 속성을 통해 호출됩니다.

Common HTML events

다음은 몇 가지 일반적인 HTML 이벤트 목록입니다.

Event	Description
onchange	HTML 요소 변경
onclick	사용자가 HTML 요소를 클릭합니다
onmouseover	사용자가 HTML 요소 위로 마우스를 이동합니다
onmouseout	사용자가 HTML 요소에서 마우스를 멀리 이동합니다
onkeydown	사용자가 키보드 키를 눌렀습니다
onload	브라우저에서 페이지 로드가 완료되었습니다

JavaScript는 무엇을 할 수 있나요?

이벤트는 양식 유효성 검사, 사용자 입력, 사용자 동작 및 브라우저 작업을 처리하는 데 사용할 수 있습니다.

페이지가 로드될 때 트리거됨
이벤트는 페이지가 닫힘
이벤트 사용자가 버튼을 클릭하여 작업을 수행합니다
사용자 입력의 유효성을 확인합니다
etc...

여러 가지 방법을 사용하여 JavaScript 이벤트 코드를 실행할 수 있습니다.

HTML 이벤트 속성은 JavaScript 코드를 직접 실행할 수 있습니다
HTML 이벤트 속성은 JavaScript 함수를 호출할 수 있습니다.
HTML 요소에 대해 고유한 이벤트 핸들러를 지정할 수 있습니다
방지할 수 있습니다. 이벤트가 발생하지 않도록 합니다.
잠깐...

지속적인 학습

새로운 파일

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> </head> <body> <button onclick="getElementById('demo').innerHTML=Date()">现在的时间是?</button> <p id="demo"></p> </body> </html>

제출하다 코드 재설정

자동운전