자바스크립트 이벤트
HTML 이벤트는 HTML 요소에 발생하는 일입니다.
JavaScript는 HTML 페이지에서 사용될 때 이러한 이벤트를 트리거할 수 있습니다.
HTML 이벤트
HTML 이벤트는 브라우저 동작일 수도 있고 사용자 동작일 수도 있습니다.
다음은 HTML 이벤트의 예입니다.
HTML 페이지 로드 완료
HTML 입력 필드 변경
HTML 버튼 클릭
보통 이벤트가 발생하면 뭔가를 할 수 있습니다.
JavaScript는 이벤트가 트리거될 때 일부 코드를 실행할 수 있습니다.
이벤트 속성을 HTML 요소에 추가할 수 있으며 JavaScript 코드를 사용하여 HTML 요소를 추가할 수 있습니다.
작은따옴표:
큰따옴표:
다음 예에서는 onclick 속성(및 코드)이 버튼 요소에 추가됩니다.
예
<!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="demo" 요소.
다음 인스턴스에서 코드는 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代码通常是几行代码。比较常见的是通过事件属性来调用： |
|---|
인스턴스
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<p>点击按钮执行 <em>displayDate()</em> 函数.</p>
<button onclick="displayDate()">点这里</button>
<script>
function displayDate(){
document.getElementById("demo").innerHTML=Date();
}
</script>
<p id="demo"></p>
</body>
</html>인스턴스 실행»
온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요
공통 HTML 이벤트
다음은 일반적인 HTML 이벤트 목록입니다:
| 事件 | 描述 |
|---|---|
| onchange | HTML 元素改变 |
| onclick | 用户点击 HTML 元素 |
| onmouseover | 用户在一个HTML元素上移动鼠标 |
| onmouseout | 用户从一个HTML元素上移开鼠标 |
| onkeydown | 用户按下键盘按键 |
| onload | 浏览器已完成页面的加载 |
추가 이벤트 목록: JavaScript 참조 매뉴얼 - HTML DOM 이벤트.
JavaScript는 무엇을 할 수 있나요?
이벤트는 양식 유효성 검사, 사용자 입력, 사용자 행동 및 브라우저 작업을 처리하는 데 사용할 수 있습니다.
페이지가 로드될 때 이벤트가 발생합니다
페이지가 닫힐 때 이벤트가 발생합니다
사용자가 버튼을 클릭하여 작업을 수행합니다.
사용자 입력의 유효성 확인
등...
여러 개를 사용할 수 있습니다. JavaScript 이벤트 코드 실행 방법:
HTML 이벤트 속성은 JavaScript 코드를 직접 실행할 수 있습니다
HTML 이벤트 속성은 JavaScript 함수를 호출할 수 있습니다
HTML 요소에 대한 자체 이벤트 핸들러를 지정할 수 있습니다.
이벤트 발생을 방지할 수 있습니다.
잠깐...
| 在 HTML DOM 章节中你将会学到更多关于事件及事件处理程序的知识。 |
|---|
