## 绑定事件 on(events, \[selector\], \[data\], fn) 概述：在选择元素上绑定一个或多个事件的事件处理函数。 * events：一个或多个用空格分隔的事件类型和可选的命名空间。 * selector：一个选择器字符串用于过滤器的触发事件的选择器元素的后代。 * data：当一个事件被触发时要传递 event.data 给事件处理函数。 * fn：该事件被触发时执行的函数。 ~~~ // 点击段落，弹框显示段落内容 $("p").on("click", function(){ alert($(this).text()); }); // 点击段落，向事件触发函数传递参数 function myHandler(event) { alert(event.data.foo); } $("p").on("click", {foo: "bar"}, myHandler); // 表单点击提交按钮时，阻止表单执行默认提交 $("form").on("submit", function(event) { event.preventDefault(); }); ~~~ ## 移除事件 off(events, \[selector\], \[fn\]) 概述：在选择元素上移除一个或多个事件的事件处理函数。 * events：一个或多个空格分隔的事件类型和可选的命名空间 * selector：一个最初传递到.on()事件处理程序附加的选择器。 * fn：事件处理程序函数以前附加事件上 ~~~ $("p").off(); // 移除段落的所有绑定事件 var foo = function () {// ...}; $("body").on("click", "p", foo); // 移除段落添加的点击事件 $("body").off("click", "p", foo); ~~~ ## 一次性事件 one(type\[, data\], fn) 概述：为每一个匹配元素的特定事件绑定一个一次性的事件处理函数。 ~~~ // 当所有段落被第一次点击的时候，显示所有其文本。 $("p").one("click", function(){ alert( $(this).text() ); }); ~~~ ## 触发事件 trigger(type\[, data\]) 概述：在每一个匹配的元素上触发某类事件。 ~~~ $("form:first").trigger("submit"); // 不点击按钮，代码触发提交表单 // 向事件函数传递参数 $("p").click(function(event, a, b) { // 一个普通的点击事件时，a 和 b 是 undefined 类型 // 如果用下面的语句触发，那么 a 指向"foo",而 b 指向"bar" }).trigger("click", ["foo", "bar"]); ~~~ ## 触发事件 triggerHandler(type\[, data\]) 概述：这个特别的方法将会触发指定的事件类型上所有绑定的处理函数。 ~~~ <button id="old">.trigger("focus")</button> <button id="new">.triggerHandler("focus")</button><br/><br/> <input type="text" value="To Be Focused"/> // 如果你对一个 focus 事件执行了 .triggerHandler() ，浏览器默认动作将不会被触发，只会触发你绑定的动作。 $("#old").click(function(){ $("input").trigger("focus"); }); $("#new").click(function(){ $("input").triggerHandler("focus"); }); $("input").focus(function(){ $("<span>Focused!</span>").appendTo("body").fadeOut(1000); }); ~~~