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 요소에 대해 고유한 이벤트 핸들러를 지정할 수 있습니다
방지할 수 있습니다. 이벤트가 발생하지 않도록 합니다.
잠깐...
