[jquery] jquery 이벤트 등록 메서드

728x90

이벤트 등록 메서드란 -> 이벤트가 발생했을 때 실행되는 코드를 말합니다.

이벤트 등록 메서드의 종류

구분	종류	설명
로딩 이벤트	load()	선택한 이미지 또는 프레임 요소에 연동된 소스의 로딩이 완료 된 후 이벤트가 발생
	ready()	지정한 HTML 문서 객체의 로딩이 완료된 후 이벤트가 발생
	error()	이벤트 대산 요소에서 오류가 발생하면 이벤트가 발생
마우스 이벤트	click()	선택한 요소를 클릭했을 때 이벤트 발생
	dbclick()	선택한 요소를 연속해서 두 번 클릭했을 때 이벤트 발생
	mouseout()	선택 요소의 영역에서 마우스 포인터가 벗어났을 때 이벤트가 발생(하위요소의 영향)
	mousehover()	선택 요소의 영역에 마우스 포인터 올렸을 때 이벤트 발생
	hover()	선택한 요소에 마우스 포인터를 올렸을 때와 벗어났을 때 각각 이벤트가 발생
	mousedown()	선택한 요소에서 마우스 버튼을 눌렀을 때 이벤트가 발생
	mouseup()	선택한 요소 범위에 마우스 버튼을 눌렀다 떼었을 때 이벤트가 발생
	mouseenter()	선택한 요소 범위에 마우스 포인터를 올렸을 때 이벤트가 발생
	mouseleave()	선택한 요소 범위에서 마우스 포인터가 벗어났을 때 이벤트가 발생
	mousemove()	선택한 요소 범위에서 마우스 포인터를 움직였을 때 이벤트가 발생
	scroll()	가로, 세로 스크롤바를 움직일 때마다 이벤트가 발생
포커스 이벤트	focus()	선택한 요소에 포커스가 생성되었을 때 이벤트를 발생하거나 선택한 요소에 강제로 포커스 생성
	focusin()	선택한 요소에 포커스가 생성되었을 때 이벤트 발생
	focusout()	포커스가 선택한 요소에서 다른 요소로 이동되었을 때 이벤트 발생
	blur()	포커스가 선택한 요소에서 다른 요소로 이동되었을 때 이벤트가 발생하거나 선택한 요소의 포커스가 강제로 사라지도록 함
	change()	이벤트 대상인 입력 요소의 값이 변경되고, 포커스가 이동하면 이벤트가 발생. 그리고 강제로 change 이벤트를 발생시킬 때도 사용.
키보드 이벤트	keyoress()	선택한 요소에서 키보드를 눌렀을 때 이벤트가 발생. 문자키를 제외한 키의 코드값 반환
	keydown()	선택한 요소에서 키보드를 눌렀을 때 이벤트 발생. 키보드의 모든 기의 코드값을 반환
	keyup()	선택한 요소에서 키보드에서 손을 떼었을 때 이벤트가 발생.

메서드 등록 방식

$("이벤트 대상 선택").on("이벤트 종류1 이벤트종류2....이벤트 종류n",

function(){

자바스크립트 코드;

});

$("이벤트 대상 선택").on({

"이벤트 종류1 이벤트 종류2 ... 이벤트 종류n" : function() {

자바스크립트 코드;

}

});

$("이벤트 대상 선택").on({

"이벤트 종류1" : function() {자바스크립트 코드;1},

"이벤트 종류2" : function() {자바스크립트 코드;2},

....

"이벤트 종류n" : function() {자바스크립트 코드;n},

});

실습 1.

버튼 클릭했을때 알림창에 welcome이라고 메시지가 뜨게하기.

$(function(){
  $(".btn1").click(function(){
    alert("welcome");
  });
});

<body>
  <button class="btn1">버튼</button>
</body>

.btn1 -> 이벤트 대상

.click -> 이벤트 종류

(function(){}); -> 이벤트 핸들러

실습2.

버튼1을 클릭하면 <p>내용 1</p>의 글자를 빨간색으로 바꿉니다.

버튼2에 마우스를 올리거나 포커스를 이동하면 <p>내용 2</p>의 글자를 초록색으로 바꿉니다.

(마우스를 뗐을때 글자를 검정색으로 바꿉니다.)

$(function(){
  $(".btn1").click(function(){
    $(".btn1").parent().next()
    .css({"color":"#f00"});
  });

  $(".btn2").on({
    "mouseover focus":function(){
      $(".btn2").parent().next()
      .css({"color":"#0f0"});
    },
    "mouseout blur":function(){
      $(".btn2").parent().next()
      .css({"color":"#000"});
    },
  });	
});

<p>
  <button class="btn1">버튼 1</button>
</p>
<p>내용 1</p>
<p>
  <button class="btn2">버튼 2</button>
</p>
<p>내용 2</p>

사진 크기가 너무 커져서 부담스러운데 왼쪽이 아무 이벤트도 발생하지 않았을때의 원래 상태,

오른쪽이 버튼1을 클릭했을때 바뀐상태, 버튼2에 마우스를 올렸을때 바뀐상태입니다.

강제로 이벤트 발생시키기

사용자에의해 이벤트가 발생한것이 아니라 핸들러에 의해 자동으로 이벤트를 발생시키게 합니다.

$("이벤트 대상").단독 이벤트 등록 메서드();

$("이벤트 대상").trigger("이벤트 종류");

위에서 했던 실습1과 html은 같고 script만 아래와 같이 바뀌었을때.

<script>
$(function(){
  $(".btn1").click(function(){
    $(".btn1").parent().next()
    .css({"color":"#f00"});
  });

  $(".btn2").on({
    "mouseover focus":function(){
      $(".btn2").parent().next()
      .css({"color":"#0f0"});
  }
  });	

  $(".btn1").click();
  $(".btn2").trigger("mouseover");
});
</script>

</head>
<body>
<p>
	<button class="btn1">버튼 1</button>
</p>
<p>내용 1</p>
<p>
	<button class="btn2">버튼 2</button>
</p>
<p>내용 2</p>
</body>

결과는 버튼1을 클릭하거나 버튼2에 마우스를 올리지 않았음에도

실습1의 결과화면과 같이 글씨 색이 자동으로 바뀌어져 있다.

(스크립트 아래 두줄이 강제로 이벤트가 발생하도록한다.)

이벤트 제거 메서드

이벤트를 제거하는 메서드는 off() 입니다.

$("이벤트 대상").off("제거할 이벤트 종류");

<script>
$(function(){
  $(".btn1").click(function(){
    $(".btn1").parent().next()
    .css({"color":"#f00"});
  });

  $(".btn2").on({
    "mouseover focus":function(){
      $(".btn2").parent().next()
      .css({"color":"#0f0"});
  }
  });	

  $(".btn1").off("click");
  $(".btn2").off("mouseover focus");
});
</script>

스크립트 아래 두줄이 등록된 이벤트를 제거하게 합니다.

결과 화면을 보면 아무것도 동작하지 않아서 글씨는 모두 검정색으로 출력됩니다.

728x90

'IT > jQuery' 카테고리의 다른 글

[jquery] jquery 이벤트 등록 메서드3 (mouse) (1)	2020.03.15
[jquery] jquery 이벤트 등록 메서드2 (0)	2020.03.05
[jquery] jquery 객체편집 메서드2 (0)	2020.02.11
[jquery] jquery 객체 편집 메서드 (0)	2020.02.10
[jquery] jquery 수치 조작 메서드 (0)	2020.02.09