자바스크립트에서 이벤트 처리 방법은 무엇입니까?-JS 튜토리얼-php.cn

자바스크립트에서 이벤트 처리 방법은 무엇입니까?

青灯夜游

풀어 주다： 2021-10-08 15:30:31

원래의

3846명이 탐색했습니다.

JavaScript의 이벤트 처리 방법은 다음과 같습니다. 1. 태그의 이벤트 속성에 이벤트를 추가합니다. 구문은 ""입니다. 2. 이벤트 속성을 사용합니다. 이벤트 소스 이벤트 처리 함수 바인딩, 구문 "이벤트 소스 객체.on 이벤트 이름 = 이벤트 처리 함수".

자바스크립트에서 이벤트 처리 방법은 무엇입니까?

이 튜토리얼의 운영 환경: Windows 7 시스템, JavaScript 버전 1.8.5, Dell G3 컴퓨터.

Javascript 이벤트 처리 방법

방법 1. 태그의 이벤트 속성에 이벤트를 추가합니다.

HTML 태그의 이벤트 속성을 사용하여 핸들러를 바인딩합니다. 이벤트 핸들러를 바인딩하기 위해 HTML 태그의 이벤트 속성을 사용할 때 이벤트 속성의 스크립트 코드는 함수 선언을 포함할 수 없지만 함수 호출 또는 세미콜론으로 구분된 일련의 스크립트 코드일 수 있습니다.

예:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script>
     function printName(){
          var name = "张三";
          alert(name);
     }
</script>
</head>
<body>
     <input type="button" onClick="printName()" value="事件绑定测试"/>
</body>
</html>

로그인 후 복사

자바스크립트에서 이벤트 처리 방법은 무엇입니까?

방법 2. 이벤트 소스의 이벤트 속성을 사용하여 핸들러를 바인딩합니다.

HTML과 JS를 분리하는 방법 중 하나는 이벤트 속성을 사용하여 이벤트 핸들러를 바인딩하는 것입니다. 이벤트 소스 함수의 바인딩 형식은 다음과 같습니다. 형식의

obj.on事件名 = 事件处理函数

로그인 후 복사

obj는 이벤트 소스 개체입니다. 바인딩된 이벤트 프로그램은 일반적으로 익명 함수 또는 함수 이름의 정의문입니다.

이벤트 소스의 이벤트 속성에 핸들러를 바인딩하는 예:

oBtn.onclick = function(){//oBtn为事件源对象，它的单击事件绑定了一个匿名函数定义
      alert(&#39;hi&#39;)
};

로그인 후 복사

예: 이벤트 소스의 이벤트 속성을 사용하여 이벤트 핸들러 함수를 바인딩합니다.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script>
     window.onload = function(){//窗口加载事件绑定了一个匿名函数
          //定义一个名为fn的函数
          function fn(){
               alert(&#39;hello&#39;);
          }
          //获取事件源对象
          var oBtn1 = document.getElementById("btn1");
          var oBtn2 = document.getElementById("btn2");
         
          //绑定一个匿名函数
          oBtn1.onclick = function(){
               alert("hi");
          }
          //绑定一个函数名
          oBtn2.onclick = fn;
     };
</script>
</head>
<body>
   <input type="button" id="btn1" value="绑定一个匿名函数">
   <input type="button" id="btn2" value="绑定一个函数名">
</body>
</html>

로그인 후 복사

【추천 학습: javascript 고급 튜토리얼】

위 내용은 자바스크립트에서 이벤트 처리 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!