집 > 기사 > 웹 프론트엔드 > 자바스크립트 등록 이벤트 처리 function_javascript 스킬 설명 예시

자바스크립트 등록 이벤트 처리 function_javascript 스킬 설명 예시

WBOY원래의: 2016-05-16 15:20:431391검색

이벤트는 JavaScript의 핵심 콘텐츠이므로 여기서는 그 중요성에 대해 소개하지 않습니다. 이벤트가 트리거된 후 이를 처리하려면 이벤트 처리 함수가 필요합니다. 예를 들어 버튼을 클릭하면 div의 배경이 녹색으로 설정되도록 정의할 수 있습니다. 그런 다음 먼저 달성 방법을 살펴보겠습니다. 이 효과는 다음과 같습니다.

<html> 
<head> 
<meta charset=" utf-8"> 
<title>javascript如何注册事件处理函数</title>
<style type="text/css">
#mydiv{
 width:100px;
 height:100px;
 background-color:red;
}
</style>
<script type="text/javascript"> 
function changebg(){
 var mydiv=document.getElementById("mydiv");
 mydiv.style.backgroundColor="green";
}
</script>
</head>
<body>
 <div id="mydiv"></div>
 <button id="bt">点击查看效果</button> 
</body>
</html>

위 코드에서 버튼을 클릭하면 div의 배경색이 녹색으로 설정됩니다. 이는 코드가 버튼의 onclick 이벤트에 대한 이벤트 핸들러 함수를 등록하기 때문입니다. 이 함수를 사용하면 div의 배경색을 설정할 수 있습니다. 녹색으로. 객체 이벤트에 대한 이벤트 처리 함수 등록 방법을 예시를 통해 간략하게 소개하겠습니다.
방법 1:
이벤트 처리 기능을 HTML 코드에 직접 등록합니다. 즉, 이벤트 처리 기능을 통해 실행할 코드를 HTML 속성 값으로 직접 설정하는 방식입니다. 기사. 장점과 단점은 다음과 같습니다.

1. 이해하기 쉽고 사용하기 쉽습니다.
2. 모든 주요 브라우저가 이 방법을 지원합니다.
3. HTML 코드와 혼합되어 페이지가 매우 복잡해지고 성능과 내용의 분리 원칙에 어긋납니다.
4. 동일한 객체에는 동일한 유형의 이벤트 핸들러를 하나만 등록할 수 있습니다.

방법 2:
이벤트 핸들 모드, 소위 이벤트 핸들은 이벤트 처리 기능이며 지정된 개체의 지정된 이벤트는 이벤트 핸들러에 해당합니다. 이런 방식으로 이벤트 처리 함수를 등록하려면 먼저 객체에 대한 참조를 얻은 다음 객체의 해당 이벤트 처리 함수 속성에 이벤트 핸들을 할당해야 합니다. 사실 방법 1도 일종의 이벤트 핸들러 방법이다.
코드 예시는 다음과 같습니다.

<html> 
<head> 
<meta charset=" utf-8"> 
<title>javascript如何注册事件处理函数</title>
<style type="text/css">
#mydiv{
 width:100px;
 height:100px;
 background-color:red;
}
</style>
<script type="text/javascript"> 
window.onload=function(){
 var mydiv=document.getElementById("mydiv");
 var bt=document.getElementById("bt");
 bt.onclick=function(){
  mydiv.style.backgroundColor="green";
 }
}
</script>
</head>
<body>
 <div id="mydiv"></div>
 <button id="bt">点击查看效果</button>
</body>
</html>

위 코드에서 먼저 document.getElementById("bt")를 사용하여 버튼 객체에 대한 참조를 얻은 다음 이벤트 핸들(이벤트 처리 기능)을 버튼 객체의 onclick 이벤트 속성에 할당합니다. onclick은 버튼을 클릭할 때 이벤트가 발생하고 이벤트 핸들러에서 코드를 실행합니다. 장점과 단점은 다음과 같습니다.

1. 간단하고 이해하기 쉽습니다.
2개의 브라우저에서 지원됩니다.
3. 동일한 객체에는 동일한 유형의 이벤트 핸들러를 하나만 등록할 수 있습니다.

방법 3:
좀 더 발전된 이벤트 등록 방법, 즉 이벤트 리스너(Event Listener)입니다. 이 방법은 지정된 이벤트 유형에 대해 하나의 핸들러 함수만 지정된 개체에 등록할 수 있다는 문제를 해결합니다. 그러나 아래에 소개된 특정 호환성 문제가 있습니다.
1).IE 브라우저:
IE 브라우저에서는 AttachEvent(), detachEvent() 메소드를 사용하여 지정된 객체에 대한 이벤트 처리 함수를 등록하고, 등록된 이벤트 처리 함수를 삭제할 수 있습니다.
구문 형식은 다음과 같습니다.
element.attachEvent("onevent",eventListener)
이 함수에는 두 개의 매개변수가 있는데 첫 번째 매개변수는 이벤트 유형의 이름이고 두 번째 매개변수는 등록할 이벤트 핸들러 함수입니다.
코드 예시는 다음과 같습니다.

<html> 
<head> 
<meta charset=" utf-8"> 
<title>javascript如何注册事件处理函数</title>
<style type="text/css">
#mydiv{
 width:100px;
 height:100px;
 background-color:red;
}
</style>
<script type="text/javascript"> 
window.onload=function(){
 var mydiv=document.getElementById("mydiv");
 var bt=document.getElementById("bt");
 
 bt.attachEvent("onclick",changebg);
 
 function changebg(){
  mydiv.style.backgroundColor="green";
 }
}
</script>
</head>
<body>
 <div id="mydiv"></div>
 <button id="bt">点击查看效果</button>
</body>
</html>

위 코드는 attachmentEvent() 함수를 사용하여 버튼에 대한 onclick 이벤트 핸들러를 등록하지만 IE 브라우저에서만 유효합니다. 원래 등록된 이벤트 처리 함수를 분리하려면 detachEvent() 함수를 사용하십시오. 구문 형식은 다음과 같습니다.
element.detachEvent("onevent",eventListener)
형식은 attachmentEvent() 함수와 동일합니다.
특별 참고 사항: 첫 번째 매개변수에는 on이 포함되어야 합니다. 예를 들어 클릭 이벤트는 "onclick"으로 작성되어야 합니다.
2) 표준 브라우저:
표준 브라우저(IE9 및 IE9 이상 브라우저 포함)에서는 addEventListener(), RemoveEventListener() 함수를 사용하여 등록 처리 기능을 등록하고 삭제합니다.
구문 형식은 다음과 같습니다.
element.addEventListener('event', eventListener, useCapture);
이 함수에는 세 가지 매개변수가 있습니다. 첫 번째 매개변수는 이벤트 유형 이름이고, 두 번째 매개변수는 등록할 이벤트 처리 함수입니다. 세 번째 함수는 이벤트 전달 프로세스의 캡처 단계에서 이 처리 함수를 호출할지 여부를 지정합니다. 단계가 호출됩니다. 기본 조건에서 이 속성의 값은 false입니다. 즉, 버블링 단계 중에 이벤트 핸들러가 호출됩니다.
특별 참고 사항: 첫 번째 매개변수는 on을 포함할 수 없습니다. 예를 들어 클릭 이벤트는 "onclick"으로 쓸 수 없지만 "click"으로 써야 합니다.
코드 예시는 다음과 같습니다.

<html> 
<head> 
<meta charset=" utf-8"> 
<title>javascript如何注册事件处理函数</title>
<style type="text/css">
#mydiv{
 width:100px;
 height:100px;
 background-color:red;
}
</style>
<script type="text/javascript"> 
window.onload=function(){
 var mydiv=document.getElementById("mydiv");
 var bt=document.getElementById("bt");
 
 bt.addEventListener("click",changebg);
 
 function changebg(){
  mydiv.style.backgroundColor="green";
 }
}
</script>
</head>
<body>
 <div id="mydiv"></div>
 <button id="bt">点击查看效果</button>
</body>
</html>

以上代码在IE9和IE9以上或者其他标准浏览器中，点击按钮可以将div的背景颜色设置为绿色。使用removeEventListener()函数可以解除原来注册的事件处理函数，语法格式如下:
element.removeEventListener('event', eventListener, useCapture);
格式和addEventListener()函数式一样的。
跨浏览器注册事件处理函数:
只要加个判断语句即可，代码如下:

var EventUtil={
  //注册
  addHandler: function(element, type, handler){
   if (element.addEventListener){
    element.addEventListener(type, handler, false);
   } else if (element.attachEvent){
    element.attachEvent("on" + type, handler);
   } else {
    element["on" + type] = handler;
   }
  },
  //移除注册
  removeHandler: function(element, type, handler){
   if (element.removeEventListener){
    element.removeEventListener(type, handler, false);
   } else if (element.detachEvent){
    element.detachEvent("on" + type, handler);
   } else {
    element["on" + type] = null;
   }
  }       
 };

以上就是本文的详细内容，希望对大家的学习有所帮助。

성명：

이전 기사：텍스트 상자 내용을 지우고 텍스트 상자가 복원되고 마우스가 텍스트 상자를 떠날 때 js를 트리거하는 JS 메서드_javascript 기술다음 기사：텍스트 상자 내용을 지우고 텍스트 상자가 복원되고 마우스가 텍스트 상자를 떠날 때 js를 트리거하는 JS 메서드_javascript 기술

자바스크립트 등록 이벤트 처리 function_javascript 스킬 설명 예시

관련 기사