초보 개발자

[JavaScript] 이벤트 개념/종류/처리하기

부자는나야나 2020. 7. 8. 14:28

Event Handle(이벤트 처리)

Event : 사용자가 하는 행동을 의미한다. 예를 들어 마우스 클릭/이동, 키보드 입력...

Event Handle : 이벤트가 발생했을 때, 프로그래머가 원하는 동작을 할 수 있도록 선언하는 것

Event Handler : 이벤트가 발생했을 때, 실행할 문장을 작성한 부분

이벤트의 종류

[마우스 이벤트]

  • mouseover : 요소에 마우스가 올라갔을때

  • mouseout : 요소에서 마우스가 벗어났을 때

  • mousemove : 요소에서 마우스가 움직일 때

  • click : 요소를 클릭할 때

  • dbclick : 요소를 더블클릭할 때

[키보드 이벤트]

  • keypress : 키보드가 눌림

  • keydown : 키보드가 눌림

  • keyup : 키보드 올라옴

[기타 이벤트]

  • focus : 요소가 포커스를 얻었을 때

  • blur : 요소가 포커스를 잃었을때

  • change : 요소의 속성값이 변경되었을 때

  • load : 요소가 로딩이 완료되었을 때

  • submit :  form 요소의 reset 버튼이 눌렸을 때

  • reset : form 요소의 reset 버튼이 눌렸을 때

  • resize :  요소의 사이즈가 변경되었을 때

  • error : 요소 로딩 중에 에러가 발생했을 때

이벤트 처리하기!!

  1. 요소에 직접 event를 작성
    <button id="btn" onclick="btnEvent()">버튼1</button>
    function btnEvent(){alert("btn3 클릭!!");};

  2. 스크립트 요소 선택 후, 핸들러 등록
    2-1. 요소.이벤트 = 핸들러;
    btn2.onclick = function(){alert("버튼2 클릭!!");};
    onclick : click 이벤트를 등록하겠다.

    2-2. 요소.addEventListner(이벤트,실행함수,false);
    div1.addEventListener("click",function(){alert("div클릭!!");},false);
    Event Handler와 Listener는 비슷해보이지만 다르다. 핸들러를 사용하기 위해서는 객체에 해당 이벤트가 발생했는지 체크해주는 리스너가 반.드.시 필요하다. 지금까지 리스너 없이 핸들러를 사용할 수 있었던 것은 해당  핸들러의 리스너가 이미 만들어져 있어 우리가 따로 만들필요가 없기 때문이다.

    2-3. 요소.on(“이벤트”,function(){ })
    $("#myForm").on("submit",function(){})
    on()은 이벤트 핸들러를 등록 하는 함수이다.

파라미터 / 반환값

파라미터(parameter는 함수 실행 시 필요한 값을 얻어오기 위한 변수(매개변수)이며, 함수 선언 시 정의한다. 반환값(return value)은 함수 실행 후 결과를 반환하기 위한 값이며  return 문장을 사용한다.

하지만, 자바스크립트에서는 파라미터가 선언되어 있더라도 호출시에 인자를 꼭 전달해주지 않아도 되며, 파라미터를 선언하지 않아도 인자를 넘길 수 있다.

arguments 객체는 모든 함수 내에서 이용 가능한 지역 변수 입니다. arguments 객체를 사용하여 함수내에서 모든 인수를 참조 할 수 있으며, 호출할 때 제공한 인수 각각에 대한 항목을 갖고 있다!

 

자바스크립트는 반환값에 함수를 반환할 수도 있다. 주의할 점은 반환값에 함수가 있다면 함수를 호출했다고 해서 반환값에 있는 함수가 실행되지 않는다.  

var myFunc = function(){

alert("myFunc 입니다!!");

return function(){alert("myFunc가 반환한 함수입니다");};};

함수 호출시 반환값을 실행하고 싶다면 아래와 같이 코드를 작성해야 한다.

var result = myFunc();

result();

myFunc()();

저작자표시