오늘의 골때리는 js 현상: alert 창을 닫아도 클릭 이벤트가 계속 trigger되어 alert가 무한히 나옴

텍스트박스에서 엔터를 치면 자동으로 입력되게 하려고 keyup 이벤트 핸들러를 등록했다.

잘 동작하는 듯했는데  alert창을 닫아도 닫아도 계속 열리는 것이다.

크롬이어서 다행이지 IE였으면 무한히 열렸을 거야...스페이스바로 눌러보길 잘했지*

$('<input/>', { type: "text", id: "myInput" })

.appendTo(myForm)

.keyup(function (event) {

if (event.keyCode == 13) {  // 13=ENTER

// $(this).blur();

$("#myButton").click();

} 

});

$('<button/>', { type: "button", text: "입력", id: "myButton" })

                .appendTo(myForm)

                .click(myButton_Click);

function myButton_Click() {

   alert("이거 무한 반복됨");

}

해결책: 저 코드의 주석을 해제하여 $(this).blur()로 포커스를 강제 해제하면 된다. alert 창이 닫힌 후 focus가 돌아오지 않는다는 게 문제지만 그건 나중에 해결하고.

아무튼 javascript는 콜백함수에서 입력한 게 콜백함수를 호출한 쪽에도 영향을 미치는 병맛나는신박한 언어다. 아니, jQuery의 문제인가? 뭔가 event.preventDefault() 같은 게 있는 거 같은데 해도 안 되고 그건 나중에 알아보기로.

*사실은 ok 버튼을 엔터키로 누를 때만 그렇다. 마우스로 클릭하거나 스페이스바로 확인하면 그러지 않는다(이벤트가 발생하지 않으므로 당연하다).