찾다

집 >웹 프론트엔드 >JS 튜토리얼 >자바스크립트에서 이벤트를 바인딩하는 방법

자바스크립트에서 이벤트를 바인딩하는 방법

青灯夜游
青灯夜游원래의
2021-07-19 14:14:273878검색

방법: 1. HTML 태그의 onclick 이벤트 속성을 사용하여 핸들러를 바인딩합니다("onclick="event handler"" 구문). 2. 이벤트 소스의 이벤트 속성을 사용하여 핸들러를 바인딩합니다("obj 구문). .on 이벤트 이름= "Handling function"; 3. addEventListener()를 사용하여 핸들러를 바인딩합니다.

자바스크립트에서 이벤트를 바인딩하는 방법

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

이벤트 발생 시 브라우저가 해당 이벤트 핸들러를 자동으로 호출하여 이벤트를 처리하게 하려면 이벤트 핸들러를 이벤트 소스에 바인딩해야 합니다(바인딩된 이벤트 핸들러를 등록된 이벤트 핸들러라고도 합니다).

이벤트 핸들러를 바인딩하는 방법에는 3가지가 있습니다:

  • HTML 태그의 onclick 이벤트 속성을 사용하여 이벤트 핸들러를 바인딩합니다. 이 메소드는 태그의 이벤트 속성 값을 이벤트 핸들러로 설정합니다. 이 방법은 현재 권장되지 않습니다.

  • 이벤트 소스의 이벤트 속성을 사용하여 이벤트 핸들러 기능을 바인딩합니다. 이벤트 소스 객체의 이벤트 속성값을 이벤트 처리 함수로 설정하는 메소드이다.

  • 이벤트와 이벤트 핸들러를 바인딩하려면 addEventListener() 메서드를 사용하세요(IE9 이전 버전에서는 Attach Event() 메서드를 사용합니다.

1. HTML 태그의 이벤트 속성을 사용하여 핸들러를 바인딩합니다.

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

[예제 1] HTML 태그의 이벤트 속성을 사용하여 이벤트 핸들러를 바인딩합니다. 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>使用HTML标签的事件属性绑定事件处理程序</title>
</head>
<body>
     <input type="button" onclick="var name=&#39;PHP中文网&#39;;alert(name);" value="事件绑定测试"/>
</body>
</html>

위 코드의 버튼은 클릭 이벤트의 대상 객체이며, 이벤트 속성을 통해 두 개의 스크립트 코드를 바인딩합니다. 이벤트 처리를 위한 태그의 onclick. 위의 코드를 크롬 브라우저에서 실행한 후, 사용자가 버튼을 클릭하면 아래 그림과 같은 경고 대화상자가 나타납니다.

이벤트 핸들러에 2개 이상의 코드가 포함된 경우 예제 1과 같은 이벤트 핸들러를 바인딩하면 프로그램의 가독성이 떨어지게 됩니다. 대신 이벤트 핸들러를 함수로 정의한 다음 이벤트 속성에서 함수를 호출할 수 있습니다. [예제 2] ]HTML 태그의 이벤트 속성은 함수 호출입니다.

자바스크립트에서 이벤트를 바인딩하는 방법

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML标签的事件属性为函数调用</title>
<script>
     function printName(){
          var name = "PHP中文网";
          alert(name);
     }
</script>
</head>
<body>
     <input type="button" onClick="printName()" value="事件绑定测试"/>
</body>
</html>

위 코드의 실행 결과는 예제 1과 완전히 동일합니다. 위의 두 예에서 볼 수 있듯이 태그 이벤트 속성은 JS 스크립트 코드와 HTML 태그를 혼합하므로 웹 표준 JS와 HTML을 분리해야 합니다. 따라서 이벤트 핸들러를 바인딩하기 위해 HTML 태그의 이벤트 속성을 사용하는 것은 좋지 않으며 실제 응용에서는 피해야 합니다.

2. 이벤트 소스의 이벤트 속성 바인딩 사용

HTML과 JS를 분리하는 방법 중 하나는 이벤트 소스의 이벤트 속성을 사용하여 이벤트 핸들러 기능을 바인딩하는 것입니다. 

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

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

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

oBtn.onclick = function(){//oBtn为事件源对象，它的单击事件绑定了一个匿名函数定义
      alert(&#39;hi&#39;)
};
[예 3 ] 이벤트 소스의 이벤트 속성을 사용하여 이벤트 핸들러 함수를 바인딩합니다. 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>使用事件源的事件属性绑定事件处理函数</title>
<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>

위의 JS 코드는 세 가지 이벤트를 처리합니다. 문서 창 로딩 이벤트 로드와 이 세 가지 이벤트의 처리는 다음과 같습니다. 이벤트 소스의 이벤트 속성과 이벤트 핸들러 함수를 바인딩하면 달성됩니다. 여기서 로드 이벤트와 첫 번째 버튼의 클릭 이벤트는 익명 함수에 바인딩되고 두 번째 버튼의 클릭 이벤트는 함수 이름에 바인딩됩니다.

oBtn2에서는 바인딩할 수 없다는 점에 유의하는 것이 중요합니다. 함수 이름 뒤에 "()"를 추가하세요. 그렇지 않으면 바인딩된 함수가 함수 호출이 되어 JS 엔진이 이 코드 줄을 실행할 때 자동으로 호출되고 실행됩니다. , 그러나 이벤트가 트리거되면 실행되지 않습니다.

창 로딩 이벤트 기능은 문서의 모든 요소가 로드된 후 처리되며, 각 버튼을 클릭할 때 클릭 이벤트가 트리거됩니다. 첫 번째와 두 번째 버튼을 클릭하면 각각 "hi"와 "hello"가 표시된 두 개의 경고 대화 상자가 나타납니다.

3. addEventListener()를 사용하여 핸들러를 바인딩합니다

자바스크립트에서 이벤트를 바인딩하는 방법

이벤트 소스 객체의 이벤트 속성을 사용하여 이벤트 핸들러를 바인딩하는 것은 간단하지만 한 가지 단점이 있습니다. 바로 이벤트입니다. 하나의 핸들러를 바인딩할 수 있으며 나중에 바인딩된 이벤트 핸들러 함수가 이전에 바인딩된 이벤트 핸들러 함수를 덮어씁니다. 실제 애플리케이션에서는 이벤트 소스의 이벤트가 여러 함수에 의해 처리될 수 있습니다. 자바스크립트에서 이벤트를 바인딩하는 방법

当一个事件源需要使用多个函数来处理时，可以通过事件源调用 addEventListener()（针对标准浏览器）来绑定事件处理函数以实现此需求。一个事件源通过方法绑定多个事件函数的实现方式是：对事件源对象调用多次 addEventListener()，其中每次的调用只绑定一个事件处理函数。

addEventListener() 是标准事件模型中的一个方法，对所有标准浏览器都有效。使用 addEvent Liste ner() 绑定事件处理程序的格式如下：

事件源.addEventListener(事件名称,事件处理函数名,是否捕获);

参数“事件名称”是一个不带“on”的事件名；参数“是否捕获”是一个布尔值，默认值为 false，取 false 时实现事件冒泡，取 true 时实现事件捕获。

通过多次调用 addEventListener() 可以为一个事件源对象的同一个事件类型绑定多个事件处理函数。当对象发生事件时，所有该事件绑定的事件处理函数就会按照绑定的顺序依次调用执行。另外，需要注意的是，addEventListener() 绑定的事件处理函数中的 this 指向事件源。

addEventListener() 绑定处理程序示例：

document.addEventListener(&#39;click&#39;,fn1,false);//click事件绑定fn1函数实现事件冒泡
document.addEventListener(&#39;click&#39;,fn2,true);//click事件绑定fn2函数实现事件捕获

【例 4】使用 addEventListener() 绑定事件函数。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>使用addEventListener()/attachEvent()绑定事件函数</title>
<script>
     function fn1(){
          alert("fn1()");
     }
     function fn2(){
         alert("fn2()");
     }
     function bindTest(){
         document.addEventListener(&#39;click&#39;,fn1,false);//首先绑定fn1函数   
         document.addEventListener(&#39;click&#39;,fn2,false);   
     }
     bindTest();//调用函数
</script>
</head>
<body>
</body>
</html>

上述代码在浏览器中运行后，当单击文档窗口时，会依次弹出显示“fn1()”和“fn2()”的警告对话框。

자바스크립트에서 이벤트를 바인딩하는 방법

자바스크립트에서 이벤트를 바인딩하는 방법

【推荐学习：javascript高级教程】

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

성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：자바스크립트의 주요 프레임워크는 무엇인가요?다음 기사：자바스크립트의 주요 프레임워크는 무엇인가요?

관련 기사

더보기