bind

« Обратно к странице событий

[редактировать]

bind( тип, [данные], функция )

Назначает обработчик к одному или более событиям (например, click) для каждого совпавшего элемента. Можно связывать также и пользовательские события.
Возможные события: blur, focus, load, resize, scroll, unload, beforeunload, click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave, change, select, submit, keydown, keypress, keyup, error
Обработчик события принимает объект event, который можно использовать для предотвращения поведения по умолчанию. Для остановки как действия по умолчанию, так и передачи события между элементами Ваш обработчик должен возвращать false. Это позволит предотвратить запуск обработчиков родительских элементов, но не любых других обработчиков jQuery того же элемента. Полный список доступных свойств объекта событий можно найти в документации.
В большинстве случаев Вы можете объявить Ваш обработчик события как безымянную функцию (см. первый пример). В случае, когда это невозможно, Вы можете передать дополнительные данные в качестве второго параметра (и функцию обработчика в качестве третьего), см. второй пример.
jQuery также поддерживает именованные события, которые позволяют вызывать или освобождать указанные группы привязанных обработчиков.
Аргументы:

Тип Строка
Один или более типов событий, разделенных пробелом.
данные (необязательно) Объект
Дополнительная информация, которая передается обработчику событий в качестве  event.data
функция Функция
Функция.

function callback(eventObject) {
  this; // dom element
}
Примеры:

Обрабатывает события click и dblclick для параграфа.
    $("p").bind("click", function(e){
      var str = "( " + e.pageX + ", " + e.pageY + " )";
      $("span").text("Click happened! " + str);
    });
    $("p").bind("dblclick", function(){
      $("span").text("Double-click happened in " + this.tagName);
    });
    $("p").bind("mouseenter mouseleave", function(e){
        $(this).toggleClass("over");
    });
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>

  <script>
  $(document).ready(function(){

    $("p").bind("click", function(e){
      var str = "( " + e.pageX + ", " + e.pageY + " )";
      $("span").text("Click happened! " + str);
    });
    $("p").bind("dblclick", function(){
      $("span").text("Double-click happened in " + this.tagName);
    });
    $("p").bind("mouseenter mouseleave", function(e){
        $(this).toggleClass("over");
    });

  });
  </script>

  <style>
  p { background:yellow; font-weight:bold; cursor:pointer;
      padding:5px; }
  p.over { background: #ccc; }
  span { color:red; }
  </style>
</head>
<body>
  <p>Click or double click here.</p>
  <span></span>

</body>
</html>
Вывод текста соответствующего параграфа в сообщении alert при совершении клика на нем:
$("p").bind("click", function(){
  alert( $(this).text() );
});
Вы можете передать некоторую дополнительную информацию перед обработчиком события:
function handler(event) {
  alert(event.data.foo);
}
$("p").bind("click", {foo: "bar"}, handler)
Для отмены действия по умолчанию и предотвращения передачи события следует возвращать false:
$("form").bind("submit", function() { return false; })
Для отмены лишь действия по умолчанию используется метод preventDefault.
$("form").bind("submit", function(event){
  event.preventDefault();
});
Для предотвращения лишь передачи события используется метод stopPropagation.
$("form").bind("submit", function(event){
  event.stopPropagation();
});
Также можно связывать и пользовательские события.

    $("p").bind("myCustomEvent", function(e, myName, myValue){
      $(this).text(myName + ", hi there!");
      $("span").stop().css("opacity", 1)
               .text("myName = " + myName)
               .fadeIn(30).fadeOut(1000);
    });
    $("button").click(function () {
      $("p").trigger("myCustomEvent", [ "John" ]);
    });
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>

  <script>
  $(document).ready(function(){

    $("p").bind("myCustomEvent", function(e, myName, myValue){
      $(this).text(myName + ", hi there!");
      $("span").stop().css("opacity", 1)
               .text("myName = " + myName)
               .fadeIn(30).fadeOut(1000);
    });
    $("button").click(function () {
      $("p").trigger("myCustomEvent", [ "John" ]);
    });

  });
  </script>

  <style>
  p { color:red; }
  span { color:blue; }
  </style>
</head>
<body>
  <p>Has an attached custom event.</p>
  <button>Trigger custom event</button>

  <span style="display:none;"></span>
</body>
</html>
Name Type