jQuery 이벤트 사용 요약 example_jquery

본 글은 jQuery에서 이벤트의 사용법을 예시와 함께 자세하게 정리하고 있는데, 이는 jQuery 학습에 좋은 참고자료가 됩니다. 참고할 수 있도록 모든 사람과 공유하세요. 구체적인 사용법은 다음과 같습니다.

1. 메소드 이름을 통해 이벤트를 요소에 바인딩합니다.

$('li').click(function(event){})

2. 바인드 메소드를 통해 이벤트를 요소에 바인딩합니다.

$('li')
 .bind('click',function(event){})
 .bind('click',function(event){}) 

바인드를 통해 여러 이벤트를 요소에 바인딩할 수 있음을 알 수 있습니다.

3. 이벤트 네임스페이스

이벤트 네임스페이스는 왜 필요한가요?

→먼저 2개의 클릭 이벤트를 li 요소에 바인딩한다고 가정해 보겠습니다.

$('li')
 .bind('click',function(event){})
 .bind('click',function(event){}) 

→이제 다음과 같이 클릭 이벤트 중 하나를 로그아웃해야 합니다.

$('li').unbind('click')

그러나 이런 방식으로 우리 li의 모든 클릭 이벤트가 로그아웃되는데, 이는 우리가 원하는 것이 아닙니다. 이벤트 네임스페이스를 사용하면 이 문제를 해결할 수 있습니다. 이벤트 네임스페이스가 필요한 이유는 이벤트 로그오프 시 편리함을 제공하기 때문입니다.

이벤트 네임스페이스는 어떻게 사용하나요?
→이벤트를 요소에 바인딩할 때 이벤트 이름 뒤에 네임스페이스를 추가합니다. 형식은 이벤트 이름.네임스페이스 이름입니다.

$('li')
 .bind('click.editMode',function(event){})
 .bind('click.displayMode',function(event){}) 

→이벤트 로그아웃 시 다음과 같이 작성할 수 있습니다.

$('li').unbind('click.editMode')

4. 이벤트 종류

흐릿하게
변화
클릭
더블클릭
오류
집중
집중
포커스아웃
키다운
키 누르기
키업
로드
마우스다운
마우스엔터
마우스리브
마우스이동
마우스아웃
움직임
마우스업
준비
크기 조정
스크롤
선택
제출
언로드

5.한 가지 방법

일회성 이벤트를 생성하는 데 사용됩니다. 이 이벤트는 한 번 실행되면 자동으로 삭제됩니다.

$("p").one("click",function(){
 $(this).animate({fontSize: "+=6px"});
})

6. 이벤트 삭제

//先给元素添加事件
$("p").click(function(){
 $(this).slideToggle();
})
//再把元素的事件删除
$("button").click(function(){
 $("p").unbind();
})

7.이벤트 속성

사실 jquery의 전역 속성인 jQuery.Event입니다. 이벤트가 트리거될 때마다 이벤트 객체 인스턴스가 이벤트 핸들러에 전달됩니다.

이벤트 생성자를 통해 이벤트를 만들고 실행할 수 있습니다.

var e = jQueery.Event("click")
jQuery("body").trigger(e);

생성자를 통해 이벤트의 익명 개체를 전달할 수도 있습니다.

var e = jQuery.Event("keydown", {keyCode : 64});
jQuery("body").trigger(e);

사용시 event.data.KeyCode를 통해 익명 객체의 값을 얻어옵니다.

jQuery.Event의 생성자를 통해 Event의 익명 개체를 전달할 수 있습니다. 뿐만 아니라 익명 개체도 이벤트를 통해 전달할 수 있습니다.

$("p").click({param1 : "Hello", param2 : "World"}, someFunction);
function someFunction(event){
 alert(event.data.param1);
 alert(event.data.param2);
}

event.data를 통해 익명 객체의 키를 얻을 수 있음을 알 수 있습니다.

이벤트 객체 인스턴스를 통해 다음과 같은 정보의 다른 측면도 얻을 수 있습니다.

$("p").click(function(event){
 alert(event.target.nodeName);
})

위에서 event.target.nodeName을 통해 이벤트를 발생시킨 요소의 이름을 가져옵니다.

jQuery.Event의 다른 속성은 다음과 같습니다.

altKey Alt 키를 누르면 True입니다. Mac 키보드에서는 Alt 키가 Option으로 표시됩니다.
ctrKey Ctrl 키를 눌렀습니다
ShiftKey Shift 키를 눌렀습니다
currentTarget 버블링 단계의 현재 요소
데이터
MetaKey 일반적으로 Meta 키는 Ctrl이지만 Mac에서는 Command 키입니다
pageX 마우스 이벤트 중 페이지 원점을 기준으로 한 커서의 수평 좌표
pageY 마우스 이벤트 중 페이지 원점을 기준으로 한 커서의 수직 좌표
관련Target 마우스 이벤트가 발생했을 때 커서가 나가거나 들어가는 요소
screenX 마우스 이벤트 중 화면 원점을 기준으로 한 커서의 수평 좌표
screenY 마우스 이벤트 중 화면 원점을 기준으로 한 커서의 수직 좌표
결과는 이전 이벤트 핸들러에서 가장 최근의 정의되지 않은 값을 반환합니다.
이벤트를 발생시키는 타겟 요소
timestamp jQuery.Event 인스턴스가 생성되었을 때의 타임스탬프(밀리초)
클릭과 같은 이벤트 유형
which 키보드 이벤트인 경우 키의 개수를 나타냅니다. 마우스 이벤트인 경우 왼쪽 버튼, 가운데 버튼, 오른쪽 버튼을 눌렀는지 기록합니다.

8.이벤트 방식

event.preventDefault()는 기본 동작을 방지합니다
event.stopPropgation()은 "버블링"을 중지합니다. 즉, DOM 위로 더 이상 전파가 중지됩니다.
event.stopImmediatePropagation()은 모든 이벤트의 추가 전파를 중지합니다
event.isDefaultPrevented()
event.isPropgationStopped()
isImmediatePropgagationStopped()

9.라이브 방식과 온 방식

이 방법을 사용하면 아직 존재하지 않는 요소에 대한 이벤트를 만들 수 있습니다. 바인드 메소드와의 차이점은 이벤트를 일치하는 모든 요소에 바인딩할 수 있으며 설정은 아직 존재하지 않아 동적으로 생성해야 하는 요소라는 것입니다. 또한 라이브 메서드를 반드시 $(function(){}) 준비 핸들러에 배치할 필요는 없습니다. jQuery 1.7 이후에는 on 메소드로 변경되었습니다.

$("p").on("click", function(){
 alert("hello");
})

이벤트 등록을 취소하고 싶으신 경우:

$("button").click(function(){
 $("p").off("click");
})

10.트리거 방식

트리거 메소드는 요소에 바인딩된 이벤트를 수동으로 트리거하려는 경우 사용할 수 있습니다.

$("#foo").on("click",function(){
 alert($(this).text());
})
$("#foo").trigger("click");

还可以在绑定事件的时候出传入形参，在trigger事件的时候传入实参。

$("#foo").on("custom", function(event, param1, param2){
 alert(param1 + "\n" + param2)
})
$("#foo").trigger("custom",["Custom","Event"]);

trigger触发由jQuery.Event创建的实例：

var event = jQuery.Event("logged");
event.user = "foo";
event.pass = "bar";
$("body").trigger(event);

甚至可以在trigger触发方法的时候传入匿名对象：

$("body").trigger({
 type: "logged",
 user: "foo",
 pass: "bar"
});

如果想停止触发事件的传播，可通过jQuery.Event实例的stopPropgation()方法，或在任何事件中返回false。

11.triggerHandler方法

triggerHandler方法与trigger方法的不同之处在于：triggerHandler方法不会执行元素的默认事件，也不会"冒泡"。

//给一个元素绑定一个focus事件
$("input").focus(function(){
 $("<span>Focused</span>").appendTo("#id").fadeOut(1000);
})
//用triggerHandler触发
$("#id").click(function(){
 $("input").triggerHandler("focus");//不会触发focus的默认行为，即进入文本框
})
//用trigger触发
$("#id").click(function(){
 $("input").trigger("focus");//同时触发foucs的默认行为和绑定行为
})

12.事件冒泡和事件委托

什么是事件冒泡？

有这么一段代码。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<body>
 <div>
  <p><a href="#foo"><span>I am a Link!</span></a></p>
  <p><a href="#bar"><b><i>I am another Link!</i></b></a></p>
 </div>
</body>
</html>

现在，给该页面所有的元素绑定click事件，包括window和document。

  $(function () {
   $('*').add([document, window]).on('click', function(event) {
    event.preventDefault();
    console.log(this);
   });
  });

当单击页面任何元素，单击事件会从当前元素开始，向上一级元素传播，直到最顶级元素，这里是window。

如何阻止事件冒泡？

显然，通常只希望在某个特定元素发生特定的事件，不希望事件冒泡的发生。这时候我们可以针对某个特定元素绑定事件。

  $(function () {
   $('a').on('click', function(event) {
    event.preventDefault();
    console.log($(this).attr('href'));
   });
  });

以上，只为a绑定了click事件，无它。

如何有效利用事件冒泡？

在jquery中，事件委托却很好地利用了事件冒泡。

<html>
<body>
<div id="container">
 <ul id="list">
  <li><a href="http://domain1.com">Item #1</a></li>
  <li><a href="/local/path/1">Item #2</a></li>
  <li><a href="/local/path/2">Item #3</a></li>
  <li><a href="http://domain4.com">Item #4</a></li>
 </ul>
</div>
</body>
</html>

现在，我们想给现有li中的a标签绑定事件，这样写：

$( "#list a" ).on( "click", function( event ) {
 event.preventDefault();
 console.log( $( this ).text() );
});

但是，如果又在现有的ul中添加新的li和a，那情况又如何呢？

$( "#list" ).append( "<li><a href='http://newdomain.com'>Item #5</a></li>" );

结果，点击新添加的li中的a，什么都没有发生。那么，如何为动态添加的元素绑定事件呢？

如果我们能把事件绑定到a的父级元素，那在父级元素内生成的子级动态元素，也会有绑定事件的行为。

$( "#list" ).on( "click", "a", function( event ) {
 event.preventDefault();
 console.log( $( this ).text() );
});

以上，我们把click事件绑定到a的父级元素id为list的ul上，on方法中的第二个参数，这里是a，是事件真正的执行者。具体过程如下：
→点击某个a标签
→根据事件冒泡，触发了a的父级元素ul的click事件
→而事件真正的执行者是a

事件委托允许我们把事件绑定到父级元素，这相当于给所有的子级元素绑定了事件，不管这个子级元素是静态的、还是动态添加的。

13.toggle方法

允许我们依次执行多个事件，当执行完最后一个事件后，再执行第一个事件。

$('img[src*=small]').toggle({
 function(){},
 function(){},
 function(){}
});

14.mouseenter和mouseleave方法

$(element).mouseenter(function(){}).mouseleave(function(){})

15.hover方法

$("p").hover(function(){
 $("p").css("background-color","yellow");
 },function(){
 $("p").css("background-color","pink");
});

相信本文所述对大家的jQuery程序设计有一定的借鉴价值。