JavaScript_Basic 지식으로 이벤트 메커니즘에 대한 간략한 분석-JS 튜토리얼-php.cn

JavaScript_Basic 지식으로 이벤트 메커니즘에 대한 간략한 분석

WBOY

풀어 주다： 2016-05-16 15:56:44

원래의

1386명이 탐색했습니다.

무슨 이벤트인가요?

JavaScript는 사용자나 브라우저가 페이지를 조작할 때 페이지에서 발생하는 이벤트를 통해 HTML과 상호 작용합니다.

페이지가 로드되면 이벤트입니다. 사용자가 버튼을 클릭하면 이벤트가 발생합니다. 이벤트의 또 다른 예로는 아무 키 누르기, 창 닫기, 창 크기 조정 등이 있습니다.

개발자는 이러한 이벤트를 사용하여 JavaScript로 인코딩된 응답을 수행할 수 있습니다. 이로 인해 버튼이 창을 닫고, 메시지가 사용자에게 표시되고, 데이터가 검증되고, 발생할 수 있는 거의 모든 유형의 응답이 발생합니다.

이벤트는 DOM(문서 개체 모델)의 레벨 3입니다. 모든 HTML 요소에는 JavaScript 코드를 트리거할 수 있는 이벤트 집합이 있습니다.

예:

<html>
<head>
<script type="text/javascript">
<!--
function sayHello() {
  alert("Hello World")
}
//-->
</script>
</head>
<body>
<input type="button" onclick="sayHello()" value="Say Hello" />
</body>
</html>

로그인 후 복사

이 결과는 다음과 같습니다. "Hello" 버튼을 클릭하면 onclick 이벤트가 sayHello() 함수를 트리거합니다.

제출 시 이벤트 유형:

또 다른 가장 중요한 이벤트 유형은 제출 시입니다. 이 이벤트는 양식을 제출하려고 시도할 때 발생합니다. 따라서 이 이벤트 유형에 대한 양식 유효성 검사를 대상으로 지정할 수 있습니다.

다음은 사용법을 설명하기 위한 간단한 예입니다. 여기서는 양식 데이터를 웹 서버에 제출하기 전에 verify() 함수를 호출합니다. 유효성 검사() 함수는 양식이 제출되면 true를 반환하고, 그렇지 않으면 데이터가 제출되지 않습니다.
예:

<html>
<head>
<script type="text/javascript">
<!--
function validation() {
  all validation goes here
  .........
  return either true or false
}
//-->
</script>
</head>
<body>
<form method="POST" action="t.cgi" onsubmit="return validate()">
.......
<input type="submit" value="Submit" />
</form>
</body>
</html>

로그인 후 복사

onmouseover 및 onmouseout:

이 두 가지 이벤트 유형은 사진이나 텍스트로 멋진 효과를 만드는 데 도움이 됩니다. 마우스가 요소 위에 있을 때 마우스가 해당 요소 밖으로 이동할 때 onmouseout 이벤트가 발생하고 마우스가 요소 위로 이동할 때 onmouseover 이벤트가 발생합니다.
예:

다음 예는 그룹 응답이 다음과 같음을 보여줍니다.

<html>
<head>
<script type="text/javascript">
<!--
function over() {
  alert("Mouse Over");
}
function out() {
  alert("Mouse Out");
}
//-->
</script>
</head>
<body>
<div onmouseover="over()" onmouseout="out()">
<h2> This is inside the division </h2>
</div>
</body>
</html>

로그인 후 복사

이 두 가지 이벤트 유형을 사용하여 다양한 이미지를 변경하고 도움을 줄 사용자를 만들 수도 있습니다.
HTML 4 표준 이벤트

여기에는 참조용으로 표준 HTML4 이벤트가 나열되어 있습니다. 아래 스크립트는 이 이벤트에서 실행할 Javascript 함수를 표시합니다.

201564104949263.jpg (616×728)