제이쿼리 .bind( eventType [, eventData ], handler )

설명 : 요소에 대한 이벤트에 핸들러를 연결하십시오.

jQuery 3.0부터는 .bind()더 이상 사용되지 않습니다. 그것은 .on()jQuery 1.7부터 문서에 이벤트 핸들러를 첨부 하는 방법 으로 대체 되었으므로 사용은 이미 권장되지 않았습니다. 이전 버전의 .bind()경우이 메서드는 이벤트 처리기를 요소에 직접 연결하는 데 사용됩니다. 핸들러는 jQuery 오브젝트의 현재 선택된 요소에 연결되므로 호출이 발생 하는 지점에 해당 요소 가 존재해야.bind() 합니다. 보다 유연한 이벤트 바인딩을 보려면에서 이벤트 위임에 대한 설명을 참조하십시오 .on().

모든 문자열은 적합합니다 eventType. 캐릭터 라인이 네이티브 DOM 이벤트의 이름이 아닌 경우, 핸들러는 커스텀 이벤트에 바인드됩니다. 이러한 이벤트는 브라우저에서 호출하지 않지만 .trigger()또는을 사용하여 다른 JavaScript 코드에서 수동으로 트리거 될 수 있습니다 .triggerHandler().

eventType문자열에 period ( .) 문자 가 포함되어 있으면 이벤트의 이름 공간이 지정됩니다. 마침표는 이벤트를 네임 스페이스와 구분합니다. 예를 들어, 호출 .bind( "click.name", handler )에서 문자열 click은 이벤트 유형이고 문자열 name은 네임 스페이스입니다. 네임 스페이스를 사용하면 다른 유형에 영향을주지 않고 유형의 일부 이벤트를 바인딩 해제하거나 트리거 할 수 있습니다. 자세한 내용은의 토론 .unbind()을 참조하십시오.

.click()이벤트 처리기를 첨부하거나 트리거하는 데 사용할 수있는 것과 같은 표준 브라우저 이벤트에 대한 약식 메서드 가 있습니다. 속기 메서드의 전체 목록을 보려면 이벤트 범주를 참조하십시오 .

이벤트가 요소에 도달하면 해당 요소의 해당 이벤트 유형에 바인드 된 모든 핸들러가 시작됩니다. 등록 된 여러 핸들러가있는 경우 바인딩 된 순서대로 항상 실행됩니다. 모든 핸들러가 실행 된 후 이벤트는 일반 이벤트 전달 경로를 따라 계속됩니다.

기본 사용 방법 .bind()은 다음과 같습니다.

$( "#foo" ).bind( "click", function() {

  alert( "User clicked on 'foo.'" );

});

이 코드는 이벤트 ID에 대한 요소를 이벤트 foo에 응답하게합니다 click. 사용자가이 요소 내부를 클릭하면 경고가 표시됩니다.

여러 이벤트

여러 이벤트 유형은 공백으로 구분 된 각 이벤트 유형을 포함하여 한 번에 바인딩 할 수 있습니다.

$( "#foo" ).bind( "mouseenter mouseleave", function() {

  $( this ).toggleClass( "entered" );

});

이것 <div id="foo">(처음에 "입력 된"클래스가없는 경우) 의 효과는 마우스가 들어갔을 때 "입력 된"클래스를 추가하고 마우스가 <div>떠날 때 클래스를 제거하는 것입니다.

jQuery 1.4에서는 이벤트 유형 / 핸들러 쌍의 객체를 전달하여 여러 이벤트 핸들러를 동시에 바인딩 할 수 있습니다.

$( "#foo" ).bind({

  click: function() {

    // Do something on click

  },

  mouseenter: function() {

    // Do something on mouseenter

  }

});

이벤트 핸들러

handler전술 한 바와 같이 파라미터는 콜백 함수 걸린다. 핸들러 내에서 키워드 this는 핸들러가 바인드 된 DOM 요소를 참조합니다. jQuery에서 요소를 사용하려면 일반 $()함수 로 전달하면 됩니다. 예 :

$( "#foo" ).bind( "click", function() {

  alert( $( this ).text() );

});

이 코드가 실행 된 후 사용자가 ID가 of foo인 요소 내부를 클릭하면 텍스트 내용이 경고로 표시됩니다.

jQuery 1.4.2에서 중복 이벤트 핸들러는 무시되는 대신 요소에 바인딩 될 수 있습니다. 이 기능은 이벤트 데이터 기능이 사용 중이거나 이벤트 처리기 기능과 관련된 클로저에 다른 고유 한 데이터가있는 경우에 유용합니다.

jQuery 1.4.3에서는 이제 false이벤트 핸들러 대신에 전달할 수 있습니다 . 이것은 다음에 해당하는 이벤트 핸들러를 바인드합니다 function(){ return false; }. 이 함수는 나중에 호출하여 제거 할 수 있습니다 .unbind( eventName, false ).

Event 객체

handler콜백 함수는 매개 변수를 취할 수 있습니다. 함수가 호출되면 이벤트 객체가 첫 번째 매개 변수로 전달됩니다.

이벤트 객체는 종종 불필요하며 매개 변수가 생략됩니다. 핸들러가 트리거 될 때 수행해야 할 작업을 정확하게 알기 위해 충분한 컨텍스트를 사용할 수 있기 때문에 일반적으로 사용할 수 있습니다. 그러나 때때로 이벤트가 시작될 때 사용자 환경에 대한 추가 정보를 수집해야합니다. 전체 이벤트 개체를 봅니다.

반환 false핸들러에서하는 것은 모두를 호출하는 것과 같습니다 .preventDefault()및 .stopPropagation()이벤트 객체.

핸들러에서 이벤트 객체를 사용하는 것은 다음과 같습니다 :

$( document ).ready(function() {

  $( "#foo" ).bind( "click", function( event ) {

    alert( "The mouse cursor is at (" +

      event.pageX + ", " + event.pageY +

      ")" );

  });

});

익명 함수에 추가 된 매개 변수에 유의하십시오. 이 코드는 ID foo가 있는 요소를 클릭하면 클릭 할 때 마우스 커서의 페이지 좌표를보고합니다.

이벤트 데이터 전달

선택적 eventData매개 변수는 일반적으로 사용되지 않습니다. 이 인수가 제공되면 처리기에 추가 정보를 전달할 수 있습니다. 이 매개 변수를 사용하면 클로저로 인해 발생하는 문제를 해결할 수 있습니다. 예를 들어 두 개의 이벤트 핸들러가 모두 같은 외부 변수를 참조한다고 가정합니다.

var message = "Spoon!";

$( "#foo" ).bind( "click", function() {

  alert( message );

});

message = "Not in the face!";

$( "#bar" ).bind( "click", function() {

  alert( message );

});

핸들러는 둘 다 message자신의 환경에 있는 클로저이기 때문에 둘 다 메시지를 표시합니다얼굴은 아니야!트리거되었을 때. 변수의 값이 변경되었습니다. 이를 회피하기 위해 다음을 사용하여 메시지를 전달할 수 있습니다 eventData.

var message = "Spoon!";

$( "#foo" ).bind( "click", {

  msg: message

}, function( event ) {

  alert( event.data.msg );

});

message = "Not in the face!";

$( "#bar" ).bind( "click", {

  msg: message

}, function( event ) {

  alert( event.data.msg );

});

이번에는 변수가 핸들러에서 직접 참조되지 않습니다. 대신 변수는 값을 통해 전달되며 eventData이벤트가 바인딩 될 때 값을 수정합니다. 첫 번째 핸들러가 표시됩니다.숟가락! 두 번째 알림은 경고합니다. 얼굴은 아니야!

개체는 참조 로 함수 에 전달 되므로이 시나리오가 더욱 복잡해집니다.

eventData존재하는 경우 ,이 .bind()메소드 의 두 번째 인수입니다 . 핸들러에 추가 데이터를 보내지 않으면 콜백이 두 번째이자 마지막 인수로 전달됩니다.

.trigger()핸들러가 바인드 될 때가 아니라 이벤트가 발생할 때 핸들러로 데이터를 전달 하는 f}에 대해서는 메소드 참조를 참조 하십시오 .

jQuery 1.4부터는 Java 애플릿에 데이터를 첨부 할 때 중대한 오류가 발생하기 때문에 객체, 포함 또는 애플릿 요소에 데이터 (따라서 이벤트)를 더 이상 첨부 할 수 없습니다.

주 : 다음 예에서 설명하지만 핸들러를 동일한 요소의 이벤트 click와 dblclick이벤트에 모두 바인드하는 것은 권장되지 않습니다 . 트리거되는 이벤트의 순서는 브라우저마다 다르며 일부는 두 번의 클릭 이벤트를 받기 전에 dblclick다른 이벤트는 하나만 수신 합니다. 두 번 클릭 감도 (두 번 클릭으로 감지되는 클릭 사이의 최대 시간)는 운영 체제 및 브라우저에 따라 다를 수 있으며 사용자가 구성 할 수있는 경우가 많습니다.

예 :

단락을 클릭하고 두 번 클릭합니다. 참고 : 좌표는 윈도우 상대이므로이 경우 데모 iframe과 관련됩니다.

<!doctype html>

<html lang="en">

<head>

  <meta charset="utf-8">

  <title>bind demo</title>

  <style>

  p {

    background: yellow;

    font-weight: bold;

    cursor: pointer;

    padding: 5px;

  }

  p.over {

     background: #ccc;

  }

  span {

    color: red;

  }

  </style>

  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>

</head>

<body>

 

<p>Click or double click here.</p>

<span></span>

 

<script>

$( "p" ).bind( "click", function( event ) {

  var str = "( " + event.pageX + ", " + event.pageY + " )";

  $( "span" ).text( "Click happened! " + str );

});

$( "p" ).bind( "dblclick", function() {

  $( "span" ).text( "Double-click happened in " + this.nodeName );

});

$( "p" ).bind( "mouseenter mouseleave", function( event ) {

  $( this ).toggleClass( "over" );

});

</script>

 

</body>

</html>