.bind() : 为一个元素绑定一个事件处理程序。 - jQuery API 中文文档

link管理

链接快照平台

输入网页链接，自动生成快照
标签化管理网页链接

相关文章推荐

坏坏的小狗 · PostgreSQL ANY vs IN ...· 4 天前 ·

打篮球的抽屉 · 4.7 C++ Boost ...· 5 天前 ·

体贴的柿子 · boost::asio::io_servic ...· 1 周前 ·

冲动的啄木鸟 · How To Mount Files ...· 1 周前 ·

体贴的风衣 · How to apply filter ...· 2 周前 ·

气势凌人的柚子 · “氧”护光！复旦圆锥角膜交联原位供氧研究获突破· 1 月前 ·

安静的海豚 · 酷小熊影视网暂未上线-酷小熊影视网app-5 ...· 1 月前 ·

近视的熊猫 · 滇中新区领导率队赴上海和嘉兴招商引资_合作对 ...· 2 月前 ·

怕老婆的米饭 · 使用vue-drag-drop实现拖放 - ...· 3 月前 ·

急躁的毛巾 · Linux音频采集和在国产化平台中遇到的坑（ ...· 3 月前 ·

从jQuery 1.7开始，


    .on()

方法是将事件处理程序绑定到文档（document）的首选方法。对于早期版本，


   .bind()

方法用于直接附加一个事件处理程序到元素上。处理程序附加到jQuery对象中当前选中的元素，所以，在


   .bind()

绑定事件的时候，这些元素必须已经存在。对于更为灵活的事件绑定，可以查看


    .on()

或者


    .delegate()

事件代理。

对于 eventType 任何字符串是合法的;如果该字符串不是一个原生的DOM事件名称，那么以自定义事件方式绑定处理程序。这些事件是不会被浏览器调用，但可以通过其他JavaScript代码，例如使用 .trigger() 或 .triggerHandler() 来手动触发。

如果 eventType 参数字符串包含一个点（ . ）字符，那么该事件是带命名空间的。这个点（ . ）字符将事件及其命名空间分隔开来。例如，在调用 .bind('click.name', handler) ，字符串 click 是事件类型，而字符串 name 是命名空间。命名空间允许我们解除或绑定一些事件，而不会影响其他事件（注：即使是同类型的事件，命名空间不同，就不会受到影响。）。见 .unbind() 获取更多信息。

有一些标准的浏览器事件的简写方法，比如


    .click()

可以使用附加或触发事件处理程序。简写方法的完整列表，请参阅 events category 。

注：jQuery库提供了标准的事件类型绑定快捷方法,比如 .bind('click') 的快捷方法 .click() 。每一个描述中可以找到它的快捷方式： blur , focus , focusin , focusout , load , resize , scroll , unload , click , dblclick , mousedown , mouseup , mousemove , mouseover , mouseout , mouseenter , mouseleave , change , select , submit , keydown , keypress , keyup , error 。

当事件到达一个元素，该元素上绑定的所有与之相对应的类型的事件都会被触发。如果该元素上有多个处理程序注册，他们将永远在其中按固定的次序执行。所有处理程序执行完成后，事件继续沿着正常的事件传播路径继续传播事件。

.bind() 一个基本的用法：

执行此代码后，当用户点击里面ID为 foo 的元素，它的文本内容将被显示为警告。

在jQuery 1.4.2中，重复的事件处理程序可以绑定到一个元素，而不是被丢弃。这对于使用 event data 功能时，或者是当其它唯一的数据保存在事件处理函数的闭包中时，特别有用。

在jQuery1.4.3，您现在可以通过传递


   false

代替一个事件处理程序。这将相当于一个事件处理程序绑定写成这样：


   function(){ return false; }

。在以后通过调用


   .unbind( eventName, false )

来移除这个函数。

The Event object（事件对象）

在 handler 回调函数里还可以带参数。当函数被调用时，事件对象（event）将作为第一个参数被传递。

事件对象往往是不必要的，可以省略的参数，这是因为当触发事件处理时，我们可以通过上下文来取得足够的信息，完成我们需要的操作。然而，有的时候，当事件初始化完成时，我们需要收集更多关于用户环境的信息时，我们就需要使用该参数了。查看所有的事件对象。

从一个处理函数返回 false 等效于调用事件对象中的 .preventDefault() 和 .stopPropagation() 。

使用处理程序中的事件对象看起来像这样：

如果 eventData 参数存在，那么第二个传递给 .bind() 的参数;如果没有更多的数据需要发送到处理程序，那么回调函数传递作为第二个也就是最后一个参数。

见 .trigger() 方法来了解如何在事件发生时向事件处理函数中传入参数，而不是在事件绑定的时候传递数据。

从 jQuery 1.4 开始，我们再也不能附加数据（和事件）到对象，embed，或applet元素了，因为当附加数据到Java的applet时会发生严重错误。

虽然表现在下面的例子中，绑定


   click

和


   dblClick

事件处理程序到相同的元素，这是不可取的。各个浏览器事件触发的顺序是不同的，一些浏览器在


   dblclick

之前接受两个


   click

事件，而和其它浏览器只接受一个


   click

事件。用户往往可通过不同的操作系统和浏览器配置双击灵敏度（点击之间的最大时间被检测为双击）。

Example: 为段落标签绑定单击和双击事件。请注意：坐标是相对于窗口的，所以在这个例子中是相对于 iframe 的。

<!DOCTYPE html>
<html>
<head>
  <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-latest.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>

<!DOCTYPE html>
<html>
<head>
  <style>
p { color:red; }
span { color:blue; }
</style>
  <script src="https://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <p>Has an attached custom event.</p>
<button>Trigger custom event</button>
<span style=";"></span>
<script>
 
$("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>
 
</body>
</html>