자바스크립트 이벤트

JavaScript는 브라우저에서 단일 스레드 모드로 실행됩니다. 페이지가 로드된 후 페이지의 모든 JavaScript 코드가 실행되면 트리거 이벤트를 통해서만 JavaScript 코드를 실행할 수 있습니다.

사용자의 마우스 또는 키보드 입력을 받은 후 브라우저는 해당 DOM 노드에서 해당 이벤트를 자동으로 트리거합니다. 노드가 해당 JavaScript 처리 함수에 바인딩된 경우 해당 함수가 자동으로 호출됩니다.

JavaScript 이벤트

JavaScript로 감지할 수 있는 웹페이지의 동작을 JavaScript 이벤트라고 합니다. 다음은 몇 가지 일반적인 JavaScript 이벤트 예입니다.

1. 페이지 콘텐츠가 브라우저에 의해 로드됩니다.

2. 사용자가 버튼을 클릭합니다.

3. 이벤트는 일반적으로 JavaScript 기능과 함께 사용됩니다. 즉, 이벤트 기반 기능을 사용하여 원하는 특정 기능을 수행합니다.

공통 HTML 이벤트

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

Event

Description

onchange HTML 요소 변경

onclick 사용자가 HTML 요소 클릭

onmouseover 사용자가 HTML을 사용 중입니다. 요소 마우스 이동

onmouseout 사용자가 HTML 요소에서 마우스를 이동합니다.

onkeydown 사용자가 키보드 키를 누릅니다.

onload 브라우저가 페이지 로드를 완료했습니다.

onclick 이벤트 객체 onclick 다음 예와 같이 이벤트가 트리거됩니다.

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<script type="text/javascript">
function hello(){
    var name = document.getElementById("name").value;
    if( name == "") {
        alert("请输入你的姓名！");
        return false;
    } else {
        alert(name + "，你好！");
    }
}
</script>
</head>
<body>
  姓名：<input type="text" id="name" />
  <input type="button" onclick="hello()" value="确定" />
</body>
</html>

위 예에서 onclick 이벤트 속성은 확인 버튼에 대해 설정되었으며 해당 값은 "hello()" JavaScript 함수입니다. 클릭하면 onclick 이벤트 속성이 설정됩니다.

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>
<button onclick="displayDate()">点这里</button>
<script>
function displayDate(){
document.getElementById("demo").innerHTML=Date();
}
</script>
<p id="demo"></p>
</body>
</html>

JavaScript는 무엇을 할 수 있나요?

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

페이지가 로드되면 이벤트가 발생합니다. 사용자가 버튼을 클릭하면 사용자 입력 내용의 합법성을 확인하는 등의 작업이 수행됩니다.

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

HTML 이벤트 속성은 JavaScript 코드를 직접 실행할 수 있습니다.

HTML 이벤트 속성은

HTML 요소에 대해 자체 이벤트 핸들러를 지정할 수 있습니다.

이벤트가 발생하는 것을 방지할 수 있습니다.

잠깐...

지속적인 학습

새로운 파일

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> <script type="text/javascript"> function hello(){ var name = document.getElementById("name").value; if( name == "") { alert("请输入你的姓名！"); return false; } else { alert(name + "，你好！"); } } </script> </head> <body> 姓名：<input type="text" id="name" /> <input type="button" onclick="hello()" value="确定" /> </body> </html>

제출하다 코드 재설정

자동운전