JavaScript 이벤트 개념 상세(정적 등록 및 동적 등록 구분)

3711 단어 JavaScript이벤트정적 등록동적 등록

js의 이벤트


무엇이 사건입니까?이벤트는 컴퓨터 입력 장치와 페이지가 상호작용하는 응답으로, 우리는 이벤트라고 부른다

이벤트 유형

  • 마우스 클릭: 예를 들어button을 클릭하고checkbox와 라디오 등 요소를 선택한다.마우스가 한 그림 위에 멈추거나table의 범위에 들어가거나
  • 키보드 버튼: 버튼을 누르거나 놓을 때;
  • HTML 이벤트: 예를 들어 페이지 바디가 로드될 때;양식에서 입력 상자를 선택하거나 입력 상자에서 텍스트의 내용을 변경합니다. 예를 들어 텍스트 상자의 내용을 선택하거나 수정했습니다
  • 돌연변이 이벤트: 주로 문서 하부 요소가 바뀔 때 발생하는 이벤트를 가리킨다. 예를 들어 DomSubtreeModified(DOM 하위 트리 수정)..

    • 자주 사용하는 이벤트

  • onload 불러오기 완료 이벤트: 페이지 불러오기 완료 후 페이지 js 코드 초기화 작업에 사용됩니다
  • onclick 클릭 이벤트: 단추의 클릭 응답 작업에 사용됩니다
  • onblur 초점 잃음 이벤트: 입력 상자가 초점을 잃은 후 입력 내용이 합법적인지 검증하는 데 자주 사용됩니다
  • onchange 내용 변경 이벤트: 밑에 있는 목록과 입력 상자의 내용이 변경된 후에 조작하는 데 사용됩니다
  • onsubmit 폼 제출 이벤트: 폼 제출 전에 모든 폼 항목이 합법적인지 검증하는 데 사용됩니다.

    • 이벤트 등록


    이벤트의 등록(귀속)은 무엇입니까?
    사실 브라우저에 이벤트 응답 후 어떤 조작 코드를 실행해야 하는지 알려줍니다. 이벤트 등록이나 이벤트 귀속이라고 합니다.
    이벤트의 등록은 정적 등록과 동적 등록 두 가지로 나뉜다
  • 정적 등록 이벤트: html 라벨의 이벤트 속성을 통해 이벤트 응답 후의 코드에 직접 부여한다. 이런 방식을 정적 등록이라고 부른다
  • 동적 등록 이벤트: js 코드를 통해 라벨을 얻은dom 대상을 말한 다음dom 대상을 통과한다.이벤트 이름 = function () {} 이벤트 응답 후 코드를 동적 등록이라고 합니다.
    • 동적 등록 기본 단계:
    1. 태그 객체 가져오기
    2. 태그 대상.이벤트 이름 =fucntion () {}

    정적 동적 등록 예


    온로드 완료 이벤트


    정적 바인딩:

    
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title> </title>
  <script type="text/javascript">
  // onload  
   function onloadFun() {
   alert(' onload  ， ');
   }
  </script>
</head>
<!-- onload  ,onload  ,body ， -->
<body οnlοad="onloadFun();">
</body>
</html>

    동적 바인딩:


    윈도우를 통해 고정된 쓰기.onload () {} 방법, 괄호 안에서 방법을 호출하는
    
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title> </title>
  <script type="text/javascript">
   // onload  。 
   window.onload = function () {
   alert(" onload  ");
   }
  </script>
</head>
<body>
</body>
</html>

    onclick 이벤트 클릭


    예를 들면, 이 예에서 양자 정의의 차이를 더욱 잘 체득하다

    onclick 정적 귀속 이벤트

    
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
 function onclickFun() {
  alert(" onclick  ");
 }
</script>
</head>
<body>
<!-- onClick  ， button onclick -->
<button onclick="onclickFun();"> 1</button>
</body>
</html>

    onclick 동적 귀속 이벤트

    
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
   window.onload = function () {
   //getElementById  id  
   var btnObj = document.getElementById("btn01");
   // 2  . = function(){}
   btnObj.onclick = function () {
    alert(" onclick  ");
   }
   }
</script>
</head>
<body>
 
<button id="btn01"> 2</button>
</body>
</html>
    다음은 JavaScript 이벤트 개념 상세(정적 등록과 동적 등록 구분)에 대한 상세한 내용입니다. JavaScript 이벤트에 대한 더 많은 자료는 다른 관련 글을 참고하세요!
    유니티의 다국어 도구인 Localization Tools를 만져봤어요.
    [BOJ] 1260 DFS와 BFS

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage