JQuery 为我们提供了方便的事件注册机制,优缺点如下:
element.事件(fn);
element.事件(data, fn);
像;
$("div").click(function () {
// 事件处理程序
});
其他事件和原生基本一致。
比如mouseover、mouseout、blur、focus、change、keydown、keyup、resize、scroll 等
<body>
<div>div>
<script>
$(function () {
// 1. 单个事件注册
$("div").click(function () {
$(this).css("background", "purple");
});
$("div").mouseenter(function () {
$(this).css("background", "skyblue");
});
});
script>
body>
因为普通注册事件方法的不足,jQuery又开发了多个处理方法。
在选择元素上绑定一个或多个事件的事件处理函数。
on()方法绑定事件处理程序到当前选定的JQuery对象中的元素。在JQuery 1.7中,.on()方法 提供绑定事件处理程序所需的所有功能。
selector.on(events, [selector], [data], fn);
"click"或"keydown.myPlugin" 。< null或省略,当它到达选定的元素,事件总是触发。event.data给事件处理函数。当一个段落被点击时,在alert中显示它的文本
$("p").on("click", function () {
alert($(this).text());
});
将数据传递给事件处理程序,事件处理程序在这里通过名称指定
function myHandler(event) {
alert(event.data.foo);
}
$("p").on("click", { foo: "bar" }, myHandler);
取消表单提交操作,并通过返回false来防止事件冒泡
$("form").on("submit", false);
使用.preventdefault()只取消默认操作。
$("form").on("submit", function (event) {
event.preventDefault();
});
使用.stoppropagation()方法在不阻止表单提交的情况下停止冒泡提交事件。
$("form").on("submit", function (event) {
event.stopPropagation();
});
可以绑定多个事件,多个处理事件处理程序。
$("div").on({
mouseover: function () {},
mouseout: function () {},
click: function () {}
});
如果事件处理程序相同
$("div").on("mouseover mouseout", function () {
$(this).toggleClass("current");
});
可以事件委派操作 。事件委派的定义就是,把原来加给子元素身上的事件绑定在父元素身上,就是把事件委派给父元素。
$("ul").on("click", "li", function () {
alert("hello world!");
});
在此之前有bind(), live(),delegate()等方法来处理事件绑定或者事件委派,最新版本的请用on替代他们。
动态创建的元素,click() 没有办法绑定事件, on() 可以给动态生成的元素绑定事件
$("div").on("click", "p", function () {
alert("俺可以给动态生成的元素绑定事件");
});
$("div").append($("我是动态创建的p
"));
在选择元素上移除一个或多个事件的事件处理函数。
off() 方法移除用.on()绑定的事件处理程序。特定的事件处理程序可以被移除元素上提供事件的名称,命名空间,选择器,或处理函数名称的组合。当有多个过滤参数,所提供的参数都必须匹配的事件处理程序被删除。
如果一个简单的事件名称,比如提供"click",所有 这种类型的事件(包括直接和委派)从jQuery设置的元素上删除。当编写代码,将作为一个插件使用,或者干脆当一个大的代码基础工作,最好的做法是安装和取下使用命名空间的事件,从而使代码不会无意中删除其他代码附加事件处理程序。在一个特定的命名空间中的所有类型的所有事件,可以从一个元素中删除,只是提供了一个命名空间,比如 “.myPlugin”。至少,无论是命名空间或事件名称必须提供。
要删除特定的委派事件处理程序,提供一个selector 的参数。选择器字符串必须是完全匹配递到.on()事件处理程序附加的选择器。要删除非委托元素上的所有事件,使用特殊值 “**” 。
处理程序也可以删除handler参数指定名称的函数。当jQuery的绑定一个事件处理程序,它分配一个唯一的ID给处理函数。函数用jQuery.proxy()代理或类似有相同的唯一ID机制(代理函数),因此,通过代理处理程序.off 可能会删除比预期更多的处理程序。在这些情况下,最好是附加和移除事件处理程序,使用命名空间。
和.on()一样,你可以传递一个 events-map>参数明确的指定而不是用events 和 handler作为单独参数。键事件和/或命名空间;值是处理函数或为false的特殊价值。
selector.off(events, [selector], [fn]);
从所有段落删除所有事件处理程序
$("p").off();
从所有段落中删除所有委托的单击处理程序
$("p").off("click", "**");
通过将它作为第三个参数传递,只删除一个先前绑定的处理程序
var foo = function () {
// code to handle some kind of event
};
// ... now foo will be called when paragraphs are clicked ...
$("body").on("click", "p", foo);
// ... foo will no longer be called.
$("body").off("click", "p", foo);
根据名称空间取消绑定所有委托的事件处理程序
var validate = function () {
// code to validate form entries
};
// delegate events under the ".validator" namespace
$("form").on("click.validator", "button", validate);
$("form").on("keypress.validator", "input[type='text']", validate);
// remove event handlers in the ".validator" namespace
$("form").off(".validator");
为每一个匹配元素的特定事件(像click)绑定一个一次性的事件处理函数。
在每个对象上,这个事件处理函数只会被执行一次。其他规则与bind()函数相同。这个事件处理函数会接收到一个事件对象,可以通过它来阻止(浏览器)默认的行为。如果既想取消默认的行为,又想阻止事件起泡,这个事件处理函数必须返回false。
多数情况下,可以把事件处理函数定义为匿名函数(见示例一)。在不可能定义匿名函数的情况下,可以传递一个可选的数据对象作为第二个参数(而事件处理函数则作为第三个参数),见示例二。
selector.one(type, [data], fn);
当所有段落被第一次点击的时候,显示所有其文本。
$("p").one("click", function () {
alert($(this).text());
});
在每一个匹配的元素上触发某类事件。
这个函数也会导致浏览器同名的默认行为的执行。比如,如果用trigger()触发一个'submit',则同样会导致浏览器提交表单。如果要阻止这种默认行为,应返回false。
你也可以触发由bind()注册的自定义事件而不限于浏览器默认事件。
事件处理函数会收到一个修复的(规范化的)事件对象,但这个对象没有特定浏览器才有的属性,比如keyCode。
jQuery也支持 命名空间事件。这允许你触发或者解除绑定一组特定的事件处理函数,而无需一一个指定。你可以在事件类型后面加上感叹号 ! 来只触发那些没有命名空间的事件处理函数。
jQuery 1.3中新增:
所有触发的事件现在会冒泡到DOM树上了。举例来说,如果你在一个段落p上触发一个事件,他首先会在这个元素上触发,其次到父元素,在到父元素的父元素,直到触发到document对象。这个事件对象有一个 .target 属性指向最开始触发这个事件的元素。你可以用 stopPropagation() 来阻止事件冒泡,或者在事件处理函数中返回false即可。
事件对象构造器现在已经公开,并且你可以自行创建一个事件对象。这个事件对象可以直接传递给trigger所触发的事件处理函数。事件对象的完整属性列表可以在 jQuery.Event 的文档里找到。
你可以有三种方式指定事件类型:
你可以传递字符串型的事件名称(type参数)。
你可以使用jQuery.Event对象。可以将数据放进这个对象,并且这个对象可以被触发的事件处理函数获取到。
最后,你可以传递一个带有数据的字面量对象。他将被复制到真正的jQuery.Event对象上去。 注意在这种情况下你’‘‘必须’’'指定一个 type 属性。
selector.trigger(type, [data]);
提交第一个表单,但不用submit()
$("form:first").trigger("submit");
给一个事件传递参数
$("p")
.click(function (event, a, b) {
// 一个普通的点击事件时,a和b是undefined类型
// 如果用下面的语句触发,那么a指向"foo",而b指向"bar"
})
.trigger("click", ["foo", "bar"]);
下面的代码可以显示一个"Hello World"
$("p").bind("myEvent", function (event, message1, message2) {
alert(message1 + " " + message2);
});
$("p").trigger("myEvent", ["Hello", "World!"]);
这个特别的方法将会触发指定的事件类型上所有绑定的处理函数。但不会执行浏览器默认动作,也不会产生事件冒泡。
这个方法的行为表现与trigger类似,但有以下三个主要区别:
第一,他不会触发浏览器默认事件。
第二,只触发jQuery对象集合中第一个元素的事件处理函数。
第三,这个方法的返回的是事件处理函数的返回值,而不是据有可链性的jQuery对象。此外,如果最开始的jQuery对象集合为空,则这个方法返回 undefined 。
selector.triggerHandler(type, [data]);
如果你对一个focus事件执行了 .triggerHandler() ,浏览器默认动作将不会被触发,只会触发你绑定的动作。
<button id="old">.trigger("focus")button>
<button id="new">.triggerHandler("focus")button><br /><br />
<input type="text" value="To Be Focused" />
$("#old").click(function () {
$("input").trigger("focus");
});
$("#new").click(function () {
$("input").triggerHandler("focus");
});
$("input").focus(function () {
$("Focused!").appendTo("body").fadeOut(1000);
});
在事件冒泡阶段中的当前DOM元素
当前执行的处理器被绑定的时候,包含可选的数据传递给jQuery.fn.bind。
当currently-called的jQuery事件处理程序附加元素。
此属性是最经常有用是通过过.delegate() 或.on()附加委派的事件,事件处理程序附加在正在处理的元素的祖先上。它可用于,例如,指明委派识别和删除事件处理程序。
对于非授权的事件处理程序,直接连接到一个元素,event.delegateTarget 总是等价于event.currentTarget.
根据事件对象中是否调用过 event.preventDefault() 方法来返回一个布尔值。
根据事件对象中是否调用过 event.stopImmediatePropagation() 方法来返回一个布尔值。
根据事件对象中是否调用过 event.stopPropagation() 方法来返回一个布尔值。
当事件被触发时此属性包含指定的命名空间。
鼠标相对于文档的左边缘的位置。
鼠标相对于文档的顶部边缘的位置。
阻止默认事件行为的触发。
在事件中涉及的其它任何DOM元素。
对于 mouseout 事件,它指向被进入的元素;对于 mousein 事件,它指向被离开的元素。
这个属性包含了当前事件事件最后触发的那个处理函数的返回值,除非值是 undefined。
阻止剩余的事件处理函数执行并且防止事件冒泡到DOM树上。
除了阻止元素上其它的事件处理函数的执行,这个方法还会通过在内部调用 event.stopPropagation() 来停止事件冒泡。如果仅仅想要停止事件冒泡到前辈元素上,而让这个元素上的其它事件处理函数继续执行,我们可以使用event.stopPropagation() 来代替。
使用 event.isImmediatePropagationStopped() 来确定这个方法是否(在那个事件对象上)调用过了。
注意:
自从.live()方法处理事件一旦传播到文档的顶部,live事件是不可能停止传播的。同样地,.delegate() 事件将始终传播给其中包含的被委托元素;元素上的事件将在被委托事件被调用的时候执行。
防止事件冒泡到DOM树上,也就是不触发的任何前辈元素上的事件处理函数。
我们可以用 event.isPropagationStopped() 来确定这个方法是否(在那个事件对象上)调用过了。
这个方法对 trigger() 来自定义的事件同样有效。
注意,这不会阻止同一个元素上的其它事件处理函数的运行。
额外说明:
自从.live()方法处理事件一旦传播到文档的顶部,live事件是不可能停止传播的。同样地,.delegate() 事件将始终传播给其中包含的被委托元素;元素上的事件将在被委托事件被调用的时候执行。
最初触发事件的DOM元素。
这是注册事件时的对象,或者它的子元素。通常用于比较 event.target 和 this 来确定事件是不是由于冒泡而触发的。经常用于事件冒泡时处理事件委托。
这个属性返回事件触发时距离1970年1月1日的毫秒数。
这可以很方便的检测某个jQuery函数的性能。
针对键盘和鼠标事件,这个属性能确定你到底按的是哪个键或按钮。
event.which 将 event.keyCode 和 event.charCode 标准化了。推荐用 event.which 来监视键盘输入。
如果你感觉文章不咋地
//(ㄒoㄒ)//,就在评论处留言,作者继续改进;o_O???
如果你觉得该文章有一点点用处,可以给作者点个赞;\\*^o^*//
如果你想要和作者一起进步,可以微信扫描二维码,关注前端老L;~~~///(^v^)\\\~~~
谢谢各位读者们啦(^_^)∠※!!!