jQuery bind(type, data, fn)

Slyweb

Поиск функций jQuery

Характеристика функции

[Функция] bind(type, data, fn)

Раздел "Events"

Функция позволяет связать обработчик с одним событием или несколькими событиями (например с событием click) для любого элемента. Функция может связать обработчик событий с пользовательскими событиям.

Параметры

bind(type, data, fn)

1.0

type: один или несколько событий разделенных пробелом

data: данные, переданные обработчику как event.data

fn: функция, связанная с событием для каждого выбранного элемента, перехватывающая объект события

function (eventObject)  { 

	this; // элемент 
}

Описание

Возможные события: blur, focus, load, resize, scroll, unload, beforeunload, click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave, change, select, submit, keydown, keypress, keyup, error.

Обработчик события перехватывает объект события, который вы можете использовать, чтобы предотвратить поведение по умолчанию. Чтобы остановить оба действия - по умолчанию и всплывание события, обработчик должен вернуть false. Учтите, что это предотвращает выполнение событий для родительских элементов, но не для других обработчиков элементов. Полный лист поддерживаемых событий смотрите в разделе jQuery.Event.

В большинстве случаев, вы можете определить ваш обработчик события как анонимную функцию (см. 1 пример). В случаях, когда это не возможно, вы можете указать второй параметр (и обработчик функции как третий), смотрите 3 пример. jQuery так же поддерживаетпространство имён событий. Это позволяет вам инициировать или освобождать особые группы связанных обработчиков без необходимости указывать ссылку на них напрямую.

Возможно, Вам будет интересно прочитать статьи о jQuery:

Примеры

Пример:

Нажатие или двойное нажатие в качестве события. Примечание: координаты окна указаны относительно демонстрационного элемента iframe.

Пример
Весь код

"jQuery"

$("p").bind("click", function(event){
var str = "( " + event.pageX + ", " + event.pageY + " )";
$("span").text("Вы нажали! " + str);
});
$("p").bind("dblclick", function(){
$("span").text("Вы два раза нажали " + this.nodeName);
});
$("p").bind("mouseenter mouseleave", function(event){
$(this).toggleClass("over");
});

"HTML"

Нажатие или двойное нажатие
<span></span>

"CSS"

  p { background:yellow; font-weight:bold; cursor:pointer; 
      padding:5px; }
  p.over { background: #ccc; }
  span { color:red; }

"Живой пример jQuery"

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link href="http://slyweb.ru/css/jqueryiframe.css" 
rel="stylesheet" type="text/css"/>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script>
  $(document).ready(function(){

$("p").bind("click", function(event){
var str = "( " + event.pageX + ", " + event.pageY + " )";
$("span").text("Вы нажали! " + str);
});
$("p").bind("dblclick", function(){
$("span").text("Вы два раза нажали " + this.nodeName);
});
$("p").bind("mouseenter mouseleave", function(event){
$(this).toggleClass("over");
});


  });
</script>

</head>
<body class="iframe">


Нажатие или двойное нажатие
<span></span>


</body>
</html>


<style>

  p { background:yellow; font-weight:bold; cursor:pointer; 
      padding:5px; }
  p.over { background: #ccc; }
  span { color:red; }

</style>

Пример:

Показать текст каждого параграфа в диалоговом окне всякий раз по щелчку:

"jQuery"

$("p").bind("click", function(){
  alert( $(this).text() );
});

Пример:

Вы можете передать дополнительные данные в обработчик события:

"jQuery"

function handler(event) {
  alert(event.data.foo);
}
$("p").bind("click", {foo: "bar"}, handler)

Пример:

В следующем примере мы запрещаем отправлять форму (элемент form). Отменить действие по умолчанию и предотвратить всплывание события, укажите false:

"jQuery"

$("form").bind("submit", function() { return false; })

Пример:

В следующем примере мы запрещаем отправлять форму (элемент form). Для отмены только действия по умолчанию используйте метод preventDefault.

"jQuery"

$("form").bind("submit", function(event){
  event.preventDefault();
});

Пример:

"jQuery"

$("form").bind("submit", function(event){
  event.stopPropagation();
});

Пример:

Можно связать функцию с пользовательскими события.

Пример
Весь код

"jQuery"

    $("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" ]);
    });

"HTML"

Has an attached custom event.
<button>Trigger custom event</button>
<span style="display:none;"></span>

"CSS"

p { color:red; }
span { color:blue; }

"Живой пример jQuery"

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link href="http://slyweb.ru/css/jqueryiframe.css" 
rel="stylesheet" type="text/css"/>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.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>

</head>
<body class="iframe">


Has an attached custom event.
<button>Trigger custom event</button>
<span style="display:none;"></span>


</body>
</html>


<style>

p { color:red; }
span { color:blue; }

</style>

Метод появился в jQuery 1.0

Официальная страница метода - http://api.jquery.com/bind/

Форма для комментариев

Версия jQuery 1.4.2 Документ создан 2010-08-21

Ошибки и опечатки
Предложения и жалобы
Поддержка сайта

Александр Ермаков. Хостинг - www.pwstudio.org

Руководство jQuery 1.4.2

Плагины jQuery UI

Эффекты

Возможно, Вам будет интересно прочитать статьи о jQuery: