JQuery 事件
1. $(document).ready(fn):当DOM载入就绪可以查询及操做时要执行的函数fn
可以在同一个页面中无限次地使用$(document).ready()事件。其中注册的函数会按照(代码中的)先后顺序依次执行
2. load(fn) 在每一个匹配元素的load事件中绑定一个处理函数
如果绑定给window对象,则会在所有内容加载后触发,包括窗口,框架,对象和图像。如果绑定在元素上,则当元素的内容加载完毕后触发。
所以$(document).ready(fn) 在 load(fn)之前執行
注意:只有当在这个元素完全加载完之前绑定load的处理函数,才会在他加载完后触发。如果之后再绑定就永远不会触发了。
所以不要在$(document).ready()里绑定load事件,因为jQuery会在所有DOM加载完成后再绑定load事件
3. bind 和 live
bind(type, [data], fn): 为每个匹配元素的特定事件绑定事件处理函数。
如果type参数的字符串中包含一个点(.)字符,那么这个事件就看做是有命名空间的了。这个点字符就用来分隔事件和他的命名空间。举例来说,如果执行 .bind('click.name', handler) ,那么字符串中的 click 是事件类型,而字符串 name 就是命名空间。命名空间允许我们取消绑定或者触发一些特定类型的事件,而不用触发别的事件
当一个事件传到一个元素上,所有绑定在上面的针对那个事件的处理函数都会触发。如果注册了多个事件处理函数,总是按照绑定的顺序依次触发。当所有绑定的事件处理函数执行完毕后,事件继续沿着普通的事件冒泡途径上浮
依次可以绑定多个事件类型,每个事件类型用空格分隔(不建議使用)
$('#foo').bind({
click: function() {
// do something on click
},
mouseenter: function() {
// do something on mouseenter
}
});
事件处理函数内部,this指向这个函数绑定的DOM元素
在事件处理函数内返回false就等价于执行事件对象上的.preventDefault()和.stopPropagation()。
通过使用 preventDefault() 方法只取消默认的行为
$("form").bind("submit", function(event){
event.preventDefault();
});
通过使用 stopPropagation() 方法只阻止一个事件起泡。
$("form").bind("submit", function(event){
event.stopPropagation();
});
live(type, [data], fn):给所有匹配的元素附加一个事件处理函数,即使这个元素是以后再添加进来的也有效
使用 .bind() 时,选择器匹配的元素会附加一个事件处理函数,而以后再添加的元素则不会有。为此需要再使用一次 .bind() 才行
.live() 方法能对一个还没有添加进DOM的元素有效,是由于使用了事件委托:绑定在祖先元素上的事件处理函数可以对在后代上触发的事件作出回应。传递给 .live() 的事件处理函数不会绑定在元素上,而是把他作为一个特殊的事件处理函数,绑定在 DOM 树的根节点上。在我们的例子中,当点击新的元素后,会依次发生下列步骤:
- 生成一个click事件传递给 <div> 来处理
- 由于没有事件处理函数直接绑定在 <div> 上,所以事件冒泡到DOM树上
- 事件不断冒泡一直到DOM树的根节点,默认情况下上面绑定了这个特殊的事件处理函数。
- 执行由 .live() 绑定的特殊的 click 事件处理函数。
- 这个事件处理函数首先检测事件对象的 target 来确定是不是需要继续。这个测试是通过检测 $(event.target).closest('.clickme') 能否找到匹配的元素来实现的。
- 如果找到了匹配的元素,那么调用原始的事件处理函数。
4. unbind 和 die
unbind: bind()的反向操作,从每一个匹配的元素中删除绑定的事件
die: live()的反向操作,从每一个匹配的元素中删除绑定的live事件
5. trigger 和 triggerHandler
trigger(type, [data]):在每一个匹配的元素上触发某类事件. 这个函数也会导致浏览器同名的默认行为的执行。比如,如果用trigger()触发一个'submit',则同样会导致浏览器提交表单。如果要阻止这种默认行为,应返回false
所有触发的事件现在会冒泡到DOM树上了。举例来说,如果你在一个段落p上触发一个事件,他首先会在这个元素上触发,其次到父元素,在到父元素的父元素,直到触发到document对象。这个事件对象有一个
.target 属性指向最开始触发这个事件的元素。你可以用 stopPropagation() 来阻止事件冒泡,或者在事件处理函数中返回false即可
给一个事件传递参数: [data] 數組
$("p").bind("myEvent", function (event, message1, message2) {
alert(message1 + ' ' + message2);
});
$("p").trigger("myEvent", ["Hello","World!"]);
triggerHandler:
这个方法的行为表现与trigger类似,但有以下三个主要区别:
* 第一,他不会触发浏览器默认事件。
* 第二,只触发jQuery对象集合中第一个元素的事件处理函数。
* 第三,这个方法的返回的是事件处理函数的返回值,而不是据有可链性的jQuery对象。此外,如果最开始的jQuery对象集合为空,则这个方法返回 undefined

浙公网安备 33010602011771号