JavaScript로 이벤트를 바인딩하는 방법 [3가지 방법]

JavaScript가 사용자 작업에 응답하도록 하려면 먼저 이벤트 핸들러를 DOM 요소에 바인딩해야 합니다. 소위 이벤트 처리 기능은 사용자 작업을 처리하는 기능입니다.

JavaScript에는 이벤트 바인딩에 일반적으로 사용되는 세 가지 방법이 있습니다.

• DOM 요소에 직접 바인딩

• JavaScript 코드에서

• 바인딩 이벤트 수신 기능.

1.

을 DOM 요소에 직접 바인딩합니다. 여기서 DOM 요소는 HTML 태그로 이해될 수 있습니다. JavaScript는 태그에서 이벤트 바인딩을 직접 지원합니다. 구문은 다음과 같습니다.
onXXX="JavaScript Code"

여기서,

onXXX는 이벤트 이름입니다. 예를 들어 클릭 시 마우스 클릭 이벤트, 더블 클릭 시 마우스 더블 클릭 이벤트, 마우스 오버 시 마우스 이동 이벤트, 마우스 아웃 시 마우스 이동 이벤트 등이 있습니다.

JavaScript 코드는 이벤트를 처리하기 위한 JavaScript 코드로, 일반적으로 함수입니다.

예를 들어 버튼을 클릭했을 때 알림창을 띄우는 코드는 다음 두 가지 방법으로 작성할 수 있습니다.

1. 기본 기능

<input  onclick="alert('谢谢支持')"  type="button"  value="点击我，弹出警告框" />

예시 데모:

2. 🎜>

<input  onclick="myAlert()"  type="button"  value="点击我，弹出警告框" />
<script type="text/javascript">
function myAlert(){
    alert("谢谢支持");
}
</script>

JavaScript 코드에서 이벤트 바인딩 구문은 다음과 같습니다.
elementObject.onXXX=function(){
// 이벤트 처리 코드
}

여기서:

예를 들어 id="demo"인 버튼에 이벤트를 바인딩하고 해당 유형 속성을 표시합니다.

<input  id="demo"  type="button"  value="点击我，显示 type 属性" />
<script type="text/javascript">
document.getElementById("demo").onclick=function(){
    alert(this.getAttribute("type"));  //  this 指当前发生事件的HTML元素，这里是<div>标签
}
</script>

3. 이벤트 수신 함수 바인딩

이벤트를 바인딩하는 또 다른 방법은 addEventListener() 또는 attachmentEvent()를 사용하여 이벤트 수신 함수를 바인딩하는 것입니다.

addEventListener() 함수 구문:
elementObject.addEventListener(eventName,handle,useCapture);

attachEvent() 함수 구문:
elementObject.attachEvent(eventName,handle);

참고: 이벤트 핸들 함수는 "함수 이름"을 참조하며 괄호를 포함할 수 없습니다.

addEventListener()는 이벤트 수신 기능을 바인딩하는 표준 방법이며 W3C, FireFox, Opera, Safari, IE9.0 이상에서 지원되지만 IE8 이하에서는 이 기능을 지원합니다. 이 메소드는 지원하지 않습니다. 이벤트 수신 기능을 바인딩하기 위해 attachmentEvent()를 사용합니다. 따라서 이 이벤트 바인딩 방법은 브라우저 호환성 문제를 처리해야 합니다.

아래 바인딩 이벤트 코드는 호환성을 위해 처리되었으며 모든 브라우저에서 지원될 수 있습니다.

function addEvent(obj,type,handle){
    try{  // Chrome、FireFox、Opera、Safari、IE9.0及其以上版本
        obj.addEventListener(type,handle,false);
    }catch(e){
        try{  // IE8.0及其以下版本
            obj.attachEvent('on' + type,handle);
        }catch(e){  // 早期浏览器
            obj['on' + type] = handle;
        }
    }
}

try{ ... } catch(e){ ... } 여기에서 사용하세요. if...else... 브라우저 오류 메시지를 피하기 위한 문입니다.

예를 들어 id="demo"인 버튼에 이벤트를 바인딩하면 마우스를 클릭할 때 경고 상자가 나타납니다.

addEvent(document.getElementById("demo"),"click",myAlert);
function myAlert(){
    alert("又是一个警告框");
}

예시 데모: