javascript - 호출 - 자바스크립트 파일 실행




하나의 JS FILE에서 다중 키 이벤트 (5)

그러나 대부분의 사람들의 대답은 단순히 코드 중복과 'IF'구문이 까다로운 것을 피하기 위해 작동합니다. switch 문을 다음과 같이 사용합니다.

document.body.onkeyup = function(e){
    switch(e.keyCode) {
        case 49:
            window.location.href = "http://localhost:1337/trail";
            break;
        case 50:
            window.location.href = "foo";
            break;
        case 51:
            window.location.href = "http://localhost:1337/topten";
            break;
        case 52:
            window.location.href = "foo";
            break;
    }
}

내 HTML 웹 페이지 용 JS 파일이 있습니다. 나는 4 가지를 확인하고 싶다. 그들이 키패드에서 숫자 1 ~ 4를 누르면 지정된 URL로 이동합니다. 스크립트가 작동하지만, 스크립트가있는 경우에만 작동합니다.

js 파일에 4 개의 이벤트를 모두 넣으면 마지막 이벤트 / 가장 최근 이벤트 만 작동합니다. 내가 잘못하고있는 어떤 종류의 문법이 있습니까? 4 명이 모두 작동하지 않습니다.

더 자세히 설명하기 위해이 코드를 사용하면 스크립트의이 부분 만 실행됩니다.

//If they hit keypad number 4
document.body.onkeyup = function(e){
    if(e.keyCode == 52){
        window.location.href = "foo";

JS :

//If they hit keypad number 1
document.body.onkeyup = function(e){
    if(e.keyCode == 49){
        window.location.href = "http://localhost:1337/trail";
    }
}
//If they hit keypad number 2
document.body.onkeyup = function(e){
    if(e.keyCode == 50){
        window.location.href = "foo";
    }
}
//If they hit keypad number 3
document.body.onkeyup = function(e){
    if(e.keyCode == 51){
        window.location.href = "http://localhost:1337/topten";
    }
}
//If they hit keypad number 4
document.body.onkeyup = function(e){
    if(e.keyCode == 52){
        window.location.href = "foo";
    }
}

모든 기능을 동일한 기능에 넣으면 잘 작동합니다. 그렇지 않으면 매 번 기능을 덮어 씁니다. 그래서 유일한 이벤트가 마지막 이벤트였던 곳에 문제가 발생했습니다. 마지막으로, if 와 then을 사용 else if . 그렇지 않으면 아무런 이유없이 모든 조건을 매번 확인하게됩니다.

//If they hit keypad number 1
document.body.onkeyup = function(e){
    if(e.keyCode == 49){
        window.location.href = "http://localhost:1337/trail";
    }
    else if(e.keyCode == 50){
        window.location.href = "foo";
    }
    else if(e.keyCode == 51){
        window.location.href = "http://localhost:1337/topten";
    }
    else if(e.keyCode == 52){
        window.location.href = "foo";
    }
}


어쩌면 모든 이벤트를 하나의 이벤트 리스너에 추가 할 수 있습니다.

document.body.addEventLister("keydown", function(e) {
    if (e.key == "Digit1") {
        window.location.href = "http://localhost:1337/trail";
    }
    if (e.key == "Digit2") {
        window.location.href = "foo";
    }
     if (e.key == "Digit3") {
        window.location.href = "http://localhost:1337/topten";
    }
    if (e.keyCode == "Digit4") {
        window.location.href = "foo";
    }
}

예, 다른 이벤트 핸들러가 서로 오버라이드 (override)하지 않고 동일한 오브젝트에 추가 될 수 있도록하는 대체 구문이 있습니다.

addEventListener('keyup', functionHere );

/*
// This will work without overriding other functions...
//If they hit keypad number 1
document.body.addEventListener("keyup", function(e){
    if(e.keyCode == 49){
        window.location.href = "http://localhost:1337/trail";
    }
});
//If they hit keypad number 2
document.body.addEventListener("keyup", function(e){
    if(e.keyCode == 50){
        window.location.href = "foo";
    }
});
//If they hit keypad number 3
document.body.addEventListener("keyup", function(e){
    if(e.keyCode == 51){
        window.location.href = "http://localhost:1337/topten";
    }
});
//If they hit keypad number 4
document.body.addEventListener("keyup", function(e){
    if(e.keyCode == 52){
        window.location.href = "foo";
    }
});
*/

// It may be best to combine them all even when using this method...
document.body.addEventListener("keyup", function(e) {
  //If they hit keypad number 1
  if (e.keyCode == 49) {
    window.location.href = "http://localhost:1337/trail";
  }
  //If they hit keypad number 2
  if (e.keyCode == 50) {
    window.location.href = "foo";
  }
  //If they hit keypad number 3
  if (e.keyCode == 51) {
    window.location.href = "http://localhost:1337/topten";
  }
  //If they hit keypad number 4
  if (e.keyCode == 52) {
    window.location.href = "foo";
  }
});


이벤트 처리기를 재정의하고 있습니다. 거기에 하나의 함수가 있어야합니다. 이 옵션을 시도하십시오.

//If they hit keypad number 1
document.body.onkeyup = function(e){
    if(e.keyCode == 49){
        window.location.href = "http://localhost:1337/trail";
    } else if(e.keyCode == 50){
        window.location.href = "foo";
    } else if(e.keyCode == 51){
        window.location.href = "http://localhost:1337/topten";
    } else if(e.keyCode == 52){
        window.location.href = "foo";
    }
}

또는 대신 스위치를 사용할 수 있습니다.





javascript-events