[Функция] bind(type, data, fn)
Раздел "Events"
Функция позволяет связать обработчик с одним событием или несколькими событиями (например с событием click) для любого элемента. Функция может связать обработчик событий с пользовательскими событиям.
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 так же поддерживаетпространство имён событий. Это позволяет вам инициировать или освобождать особые группы связанных обработчиков без необходимости указывать ссылку на них напрямую.
Пример:
Нажатие или двойное нажатие в качестве события. Примечание: координаты окна указаны относительно демонстрационного элемента 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"
<p>Нажатие или двойное нажатие</p>
<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://test-drupal.ru/themes/slyweb/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">
<p>Нажатие или двойное нажатие</p>
<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"
<p>Has an attached custom event.</p>
<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://test-drupal.ru/themes/slyweb/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">
<p>Has an attached custom event.</p>
<button>Trigger custom event</button>
<span style="display:none;"></span>
</body>
</html>
<style>
p { color:red; }
span { color:blue; }
</style>
Версия jQuery 1.4.2
Документ создан 2010-08-21
