addEventListener로 복제하고 싶습니다.

Question

조금 넓은 사람이 궁금한 점이 있으면 죄송합니다.하지만 모든 것을 시도해 보니 대체 할 수있는 항목이 없습니다. 이건 내 것이 아니야. 단지)를 사용하여이와

function onlyNum(evt){ 

     evt = window.event; 
     var charCode = (evt.which) ? evt.which : evt.keyCode 
     if (charCode > 31 && (charCode < 48 || charCode > 57)){ 
      return false; 
     } 

     return true; 
    } 

// this INPUT will not accept anything but numbers now. 
<input type="text" id="idInput" onKeyPress="return onlyNum(event)"> 

: 나는 기능과 "반환"부분에 이벤트를 전달할 수있는 방법을 찾을 수 없습니다

function onlyNum(evt){ 

    evt = window.event; 
    var charCode = (evt.which) ? evt.which : evt.keyCode 
    if (charCode > 31 && (charCode < 48 || charCode > 57)){ 
     return false; 
    } 

    return true; 
} 

// this INPUT's with this event listeners will just acept numbers now. 
// like this code is cleaner since you just need to make a list of ids that will have this listeners. 
var input = document.getElementById('idTest'); 
input.addEventListener('keyDown', onlyNum, false); 

. 미안 그걸 설명하는 방법조차 모릅니다. 아마도이 문제에 대한 정보를 찾을 수없는 이유가 ...

Answer 1

addEventListener() 또는 attacheEvent()의 일반 이벤트 처리기를 사용하는 경우 기본값 인 return false을 사용할 수 없습니다 이벤트 처리기를 HTML에 넣으면 가능한 것처럼 동작합니다. 대신 대부분의 브라우저에서 evt.preventDefault() 및 아마도 evt.stopPropagation()으로 전화하거나 이전 버전의 IE에서는 window.event.returnValue = false 및 window.event.cancelBubble = true으로 설정해야합니다.

크로스 플랫폼을 간단히 수행하려면 모든 교차 플랫폼이 작동하는 addEvent() 함수 (IE6, IE7, IE8 포함)를 개발했습니다. 따라서, 이벤트 처리기를 추가하는 것을 사용하여, 당신이 할 수있는 모든이있다 :

addEvent("idTest", "keydown", onlyNum);​ 

근무 데모 : http://jsfiddle.net/jfriend00/2ATmz/.

// refined add event cross browser 
function addEvent(elem, event, fn) { 
    if (typeof elem === "string") { 
     elem = document.getElementById(elem); 
    } 


    // avoid memory overhead of new anonymous functions for every event handler that's installed 
    // by using local functions 
    function listenHandler(e) { 
     var ret = fn.apply(this, arguments); 
     if (ret === false) { 
      e.stopPropagation(); 
      e.preventDefault(); 
     } 
     return(ret); 
    } 

    function attachHandler() { 
     // set the this pointer same as addEventListener when fn is called 
     // and make sure the event is passed to the fn also so that works the same too 
     var ret = fn.call(elem, window.event); 
     if (ret === false) { 
      window.event.returnValue = false; 
      window.event.cancelBubble = true; 
     } 
     return(ret); 
    } 

    if (elem.addEventListener) { 
     elem.addEventListener(event, listenHandler, false); 
    } else { 
     elem.attachEvent("on" + event, attachHandler); 
    } 
} 

참고 : 여기에 크로스 플랫폼 이벤트 기능이있어,

function onlyNum(evt){ 
    var charCode = (evt.which) ? evt.which : evt.keyCode 
    if (charCode > 31 && (charCode < 48 || charCode > 57)){ 
     return false; 
    } 
    return true; 
} 

addEvent("test", "keydown", onlyNum);​ 

그리고 :

여기에 새 이벤트 기능을 사용하여 코드의이 이벤트 핸들러 함수는 항상을 통과하기 때문에 약간 onlyNum() 수정 이벤트 개체 (IE에서는 다르게 처리 할 필요가 없습니다).

Answer 2

이

window.onload=function(){ 
    var input = document.getElementById('idTest'); 
    if(input.addEventListener) input.addEventListener('keydown', onlyNum, false); 
    else input.attachEvent('onkeydown', onlyNum, false); 
} 

function onlyNum(e) 
{ 
    var e=e || window.event; 
    var charCode = (e.which) ? e.which : e.keyCode; 
    if (charCode > 31 && (charCode < 48 || charCode > 57)){ 
     if(e.preventDefault) e.preventDefault(); 
     else e.returnValue = false;  
    } 
} 

DEMO을 시도 할 수 있습니다.