js 이벤트 리스너 사용법에 대한 자세한 설명-JS 튜토리얼-php.cn

js 이벤트 리스너 사용법에 대한 자세한 설명

WBOY

풀어 주다： 2016-05-16 15:57:13

원래의

1274명이 탐색했습니다.

이 기사의 예에서는 js 이벤트 리스너의 사용법을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 구체적인 분석은 다음과 같습니다.

1. 동일한 객체가 .onclick 쓰기 메소드를 사용하여 여러 메소드를 트리거하는 경우 후자의 메소드가 이전 메소드를 덮어씁니다. 즉, 객체의 onclick 이벤트가 발생하면 마지막 바인딩만 실행됩니다. . 방법. 이벤트 수신을 사용하면 덮어쓰기가 없으며 각 바인딩된 이벤트가 실행됩니다. 다음과 같습니다:

window.onload = function(){ 
  var btn = document.getElementById("yuanEvent"); 
  btn.onclick = function(){ 
    alert("第一个事件"); 
  } 
  btn.onclick = function(){ 
    alert("第二个事件"); 
  } 
  btn.onclick = function(){ 
    alert("第三个事件"); 
  } 
}

로그인 후 복사

마지막으로 세 번째 이벤트만 출력되는데, 후자의 방법이 이전 방법을 덮어쓰기 때문입니다.

원래 이벤트 바인딩 함수 addEventListener:

var eventOne = function(){ 
  alert("第一个监听事件"); 
} 
function eventTwo(){ 
  alert("第二个监听事件"); 
} 
window.onload = function(){ 
  var btn = document.getElementById("yuanEvent"); 
  //addEventListener：绑定函数 
  btn.addEventListener("click",eventOne); 
  btn.addEventListener("click",eventTwo); 
}

로그인 후 복사

출력: 첫 번째 청취 이벤트와 두 번째 청취 이벤트

2. 이벤트 모니터링을 사용하여 메소드를 객체에 바인딩한 후 해당 바인딩을 해제할 수 있습니다.

var eventOne = function(){ 
  alert("第一个监听事件"); 
} 
function eventTwo(){ 
  alert("第二个监听事件"); 
} 
window.onload = function(){ 
  var btn = document.getElementById("yuanEvent"); 
  btn.addEventListener("click",eventOne); 
  btn.addEventListener("click",eventTwo); 
  btn.removeEventListener("click",eventOne); 
}

로그인 후 복사

출력: 두 번째 청취 이벤트

3. 이벤트 바인딩을 해제할 때는 함수 핸들을 사용해야 합니다. 전체 함수를 작성해도 이벤트 바인딩이 해제되지는 않습니다.

잘못된 철자법:

btn.addEventListener("click",function(){ 
  alert(11); 
}); 
btn.removeEventListener("click",function(){ 
  alert(11); 
});

로그인 후 복사

정확한 표기:

btn.addEventListener("click",eventTwo); 
btn.removeEventListener("click",eventOne);

로그인 후 복사

요약: 기능 캡슐화 후 청취 이벤트는 다음과 같으며 모든 주요 주류 브라우저와 호환됩니다.

/* 
 * addEventListener:监听Dom元素的事件 
 *  
 * target：监听对象 
 * type：监听函数类型，如click,mouseover 
 * func：监听函数 
 */ 
function addEventHandler(target,type,func){ 
  if(target.addEventListener){ 
    //监听IE9，谷歌和火狐 
    target.addEventListener(type, func, false); 
  }else if(target.attachEvent){ 
    target.attachEvent("on" + type, func); 
  }else{ 
    target["on" + type] = func; 
  }  
} 
/* 
 * removeEventHandler:移除Dom元素的事件 
 *  
 * target：监听对象 
 * type：监听函数类型，如click,mouseover 
 * func：监听函数 
 */ 
function removeEventHandler(target, type, func) { 
  if (target.removeEventListener){ 
    //监听IE9，谷歌和火狐 
    target.removeEventListener(type, func, false); 
  } else if (target.detachEvent){ 
    target.detachEvent("on" + type, func); 
  }else { 
    delete target["on" + type]; 
  } 
} 
var eventOne = function(){ 
  alert("第一个监听事件"); 
} 
function eventTwo(){ 
  alert("第二个监听事件"); 
} 
window.onload = function(){ 
  var bindEventBtn = document.getElementById("bindEvent"); 
  //监听eventOne事件 
  addEventHandler(bindEventBtn,"click",eventOne); 
  //监听eventTwo事件 
  addEventHandler(bindEventBtn,"click",eventTwo ); 
  //监听本身的事件 
  addEventHandler(bindEventBtn,"click",function(){ 
    alert("第三个监听事件"); 
  }); 
  //取消第一个监听事件 
  removeEventHandler(bindEventBtn,"click",eventOne); 
  //取消第二个监听事件 
  removeEventHandler(bindEventBtn,"click",eventTwo); 
}

로그인 후 복사

예:

<!DOCTYPE html> 
<html> 
  <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
    <title>Event</title> 
    <script type="text/javascript"> 
      function addEventHandler(target,type,func){ 
        if(target.addEventListener){ 
          //监听IE9，谷歌和火狐 
          target.addEventListener(type, func, false); 
        }else if(target.attachEvent){ 
          target.attachEvent("on" + type, func); 
        }else{ 
          target["on" + type] = func; 
        }  
      } 
      function removeEventHandler(target, type, func) { 
        if (target.removeEventListener){ 
          //监听IE9，谷歌和火狐 
          target.removeEventListener(type, func, false); 
        } else if (target.detachEvent){ 
          target.detachEvent("on" + type, func); 
        }else { 
          delete target["on" + type]; 
        } 
      } 
      var eventOne = function(){ 
        alert("第一个监听事件"); 
      } 
      function eventTwo(){ 
        alert("第二个监听事件"); 
      } 
      window.onload = function(){ 
        var bindEventBtn = document.getElementById("bindEvent"); 
        //监听eventOne事件 
        addEventHandler(bindEventBtn,"click",eventOne); 
        //监听eventTwo事件 
        addEventHandler(bindEventBtn,"click",eventTwo ); 
        //监听本身的事件 
        addEventHandler(bindEventBtn,"click",function(){ 
          alert("第三个监听事件"); 
        }); 
        //取消第一个监听事件 
        removeEventHandler(bindEventBtn,"click",eventOne); 
        //取消第二个监听事件 
        removeEventHandler(bindEventBtn,"click",eventTwo); 
      } 
    </script> 
  </head> 
  <body> 
    <input type="button" value="测试" id="bindEvent"> 
    <input type="button" value="测试2" id="yuanEvent"> 
  </body> 
</html>

로그인 후 복사

이 기사가 모든 사람의 JavaScript 프로그래밍 설계에 도움이 되기를 바랍니다.