jQuery Events

Events Methods
Mouse Events
Keyboard Events
Form Events
Document/Window Events

Events Methods

What are Events?

사용자의 행동에따라 반응을 하는것, 예를들어 마우스를 움직이거나 어딘가를 클릭하는것

이러한 사용자의 동작들이 모두 이벤트(event)를 발생

어떠한 행동을 가리키는 거라 fired / fires 라는 용어가 자주 사용됨

자주 사용되는 돔 이벤트

Mouse Events	Keyboard Events	Form Events	Document/Window Events
click	keypress	submit	load
dblclick	keydown	change	resize
mouseenter	keyup	focus	scroll
mouseleave		blur	unload

Event handler

특정 요소에서 발생하는 이벤트를 처리하기 위해서는 이벤트 핸들러(event handler)라는 함수를 작성하여 연결

이벤트 핸들러가 연결된 특정 요소에서 지정된 타입의 이벤트가 발생하면, 웹 브라우저는 연결된 이벤트 핸들러를 실행한다

$("p").on({
    mouseenter: function() {
        $(this).css("background-color", "yellow");
    },
    mouseleave: function() {
        $(this).css("background-color", "blue");
    },
    click: function() {
        $(this).css("background-color", "red");
    }
});

Event object

이벤트 핸들러 함수는 jQuery에서 콜백될 때 이벤트 객체(event object)를 함수의 인자로 전달된다

전달받은 이벤트 객체를 이용하여 이벤트의 특성을 결정하거나, 이벤트의 기본 동작을 막을 수도 있다

jQuery의 이벤트 객체는 W3C 표준 권고안을 따르는 이벤트 객체를 정규화한 것이다

대표적으로 사용하는 것들

type : 이벤트 종류
pageX : 브라우저 화면을 기준으로 한 마우스 X 좌표 위치
pageY : 브라우저 화면을 기준으로 한 마우스 Y 좌표 위치
preventDefault() : 기본 이벤트를 제거합니다.
stopPropagation() : 이벤트 전달을 제거합니다.

preventDefault와 stopPropagation의 차이점

preventDefault()는 태그의 기본 이벤트를 제거함
→ alert가 나오지 않음
stopPropagation()은 <div> 태그에 이벤트가 전달되는 것을 막음
→ 배경이 노랑색으로 변하지 않음

$("#text1").on("click", function(e){
    $(this).css('color', 'green');
});
      
$("#text2").on("click", function(e){
    $(this).css('color', 'green');

    e.preventDefault();
});

$("#text3").on("click", function(e){
    $(this).css('color', 'green');

    e.stopPropagation();
});

$("#text4").on("click", function(e){
    $(this).css('color', 'green');

    e.preventDefault();
    e.stopPropagation();
});

$("div").on("click", function(e){
    $(this).css('background-color', 'yellow');         
});

---
    
<a id="textN" href="javascript:alert(1);"></a>

jQuery Syntax For Event Methods

거의 모든 돔 이벤트는 동등한 메소드를 가지고 있음

$("selector").event(function(){
  // action goes here!!
});

The on() Method

하나 이상의 이벤트를 걸때 사용함

$("p").on("click", function(){
  $(this).hide();
});

or

$("p").on({
    mouseenter: function(){
      $(this).css("background-color", "lightgray");
    },  
    mouseleave: function(){
      $(this).css("background-color", "lightblue");
    }, 
    click: function(){
      $(this).css("background-color", "yellow");
    }  
  });

Mouse Events

click()

클릭시 나타나는 이벤트

왼쪽 마우스 버튼으로만 클릭해야지 나옴 - mousedown과 다른점

$("p").click(function(){
  $(this).hide();
});

// function is executed when the user clicks on the HTML element

dblclick()

더블클릭시 나타나는 이벤트

$("p").dblclick(function(){
  $(this).hide();
});

mouseenter()

마우스 포인터가 요소에 들어갈때

$("#p1").mouseenter(function(){
  alert("You entered p1!");
});

mouseleave()

마우스 포인터가 요소에 나올때

$("#p1").mouseleave(function(){
  alert("Bye! You now leave p1!");
});

mousedown()

마우스의 어떤걸로든 클릭할시 나타나는 이벤트

$("#p1").mousedown(function(){
  alert("Mouse down over p1!");
});

mouseup()

마우스의 어떤걸로든 클릭후 버튼을 놓을시 나타나는 이벤트

$("#p1").mouseup(function(){
  alert("Mouse up over p1!");
});

hover()

combination of the mouseenter() and mouseleave() methods

$("#p1").hover(function(){
  alert("You entered p1!");             //mouseenter()
},
function(){
  alert("Bye! You now leave p1!");      //mouseleave()
});

Keyboard Events

keypress()

keydown()

keyup()

Form Events

focus()

폼형식이 focus받을경우 나타나는 이벤트

$("input").focus(function(){
  $(this).css("background-color", "#cccccc");
});

blur()

폼형식이 focus받은 후 나타나는 이벤트

$("input").focus(function(){
  $(this).css("background-color", "#cccccc");
});