2024年4月23日发(作者：)
JQuery語法與實例--------事件
一. 載入:
ready(fn): 当DOM载入就绪可以查询及操纵时绑定一个要执行的函数.
这是事件模块中最重要的一个函数，因为它可以极大地提高web应用程序的响应速度.
简单地说，这个方法纯粹是对向事件注册事件的替代方法。通过使用这个方法，可以在DOM载入就绪能够读取
并操纵时立即调用你所绑定的函数，而99.99%的JavaScript函数都需要在那一刻执行.
有一个参数－－对jQuery函数的引用－－会传递到这个ready事件处理函数中. 可以给这个参数任意起一个名字，并因此可以
不再担心命名冲突而放心地使用$别名。
请确保在 元素的onload事件中没有注册函数，否则不会触发$(document).ready()事件.
可以在同一个页面中无限次地使用$(document).ready()事件。其中注册的函数会按照（代码中的）先后顺序依次执行.
1. 在DOM加载完成时运行的代码，可以这样写：
$(document).ready(function(){
// 在这里写你的代码...
});
2. 使用 $(document).ready() 的简写，同时内部的 jQuery 代码依然使用 $ 作为别名，而不管全局的$为何.
jQuery(function($) {
// 你可以在这里继续使用$作为别名...
});
二. 事件處理:
1. bind(type,[data],fn): 为每个匹配元素的特定事件绑定事件处理函数。
.bind() 方法是用于往文档上附加行为的主要方式。所有JavaScript事件对象，比如focus, mouseover, 和 resize，都是可以作为
type参数传递进来的。
jQuery还提供了一些绑定这些标准事件类型的简单方式，比如.click()用于简化.bind('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 。
任何作为type参数的字符串都是合法的；如果一个字符串不是原生的JavaScript事件名，那么这个事件处理函数会绑定到一个
自定义事件上。这些自定义事件绝对不会由浏览器触发，但可以通过使用.trigger()或者.triggerHandler()在其他代码中手动触发。
如果type参数的字符串中包含一个点(.)字符，那么这个事件就看做是有命名空间的了。这个点字符就用来分隔事件和他的命
名空间。举例来说，如果执行 .bind('', handler) ，那么字符串中的 click 是事件类型，而字符串 name 就是命名空间。命
名空间允许我们取消绑定或者触发一些特定类型的事件，而不用触发别的事件。参考unbind()来获取更多信息。
当一个事件传到一个元素上，所有绑定在上面的针对哪个事件的处理函数都会触发。如果注册了多个事件处理函数，总是按
照绑定的顺序依次触发。当所有绑定的事件处理函数执行完毕后，事件继续沿着普通的事件冒泡途径上浮。
1>.基本用法:
Jquery $('#foo').bind('click', function() {
alert('User clicked on "foo."');
});
//使ID为foo的元素响应click事件。当用户点击元素内部之后，就会弹出一个警告框。
2>. 依次可以绑定多个事件类型，每个事件类型用空格分隔
Jquery $('#foo').bind('mouseenter mouseleave', function() {
$(this).toggleClass('entered');
});
让一个
鼠标移出这个div的时候，则去除这个class值。
3>. 在jQuery 1.4中，我们也可以通过传入一个映射对来一次绑定多个事件处理函数
Jquery $('#foo').bind({
click: function() {
// do something on click
},
mouseenter: function() {
// do something on mouseenter
}
});
4>. 事件处理函数fn: fn这个参数接受一个回调函数，就像先前展示的那样。在这个事件处理函数内部，this指向这个函数绑定的
DOM元素。如果要让这个元素变成jQuery对象来使用jQuery的方法，可以把这个对象传入 $() 重新封装
Jquery $('#foo').bind('click', function() {
alert($(this).text());
});
//当用户点击了ID为foo的元素内部之后，他的文本内容就会出现在一个警告框中
4>. 事件处理函数fn: fn这个参数接受一个回调函数，就像先前展示的那样。在这个事件处理函数内部，this指向这个函数绑定的
DOM元素。如果要让这个元素变成jQuery对象来使用jQuery的方法，可以把这个对象传入 $() 重新封装
Jquery $('#foo').bind('click', function() {
alert($(this).text());
});
//当用户点击了ID为foo的元素内部之后，他的文本内容就会出现在一个警告框中
5>.传递事件数据 可选的第二个参数data通常用的很少。如果提供了这个参数，那么我们就能把一些附加信息传递给事件处理函
数了。这个参数有个很好的用处，就是处理闭包带来的问题。比如我们有两个事件处理函数要指向同一个内部变量：
var message = 'Spoon!';
$('#foo').bind('click', function() {
alert(message);
});
message = 'Not in the face!';
$('#bar').bind('click', function() {
alert(message);
});
由于这两个函数在他们各自的环境中都有message，所以触发时显示的消息都是 Not in the face! 。变量值被改变了。为了回避这个
问题，我们可以把message变量作为data参数传递进去：
var message = 'Spoon!';
$('#foo').bind('click', {msg: message}, function(event) {
alert();
});
message = 'Not in the face!';
$('#bar').bind('click', {msg: message}, function(event) {
alert();
});
这时在函数内部不再直接指向这个变量了；取而代之的是按值传递给了data参数，他能保持绑定事件时的值。第一个函数现在会
显示Spoon!，而第二个则显示Not in the face!
注意，如果这个对象按引用传递给了函数，那么将会使情况变得极其复杂。
另外，可以参考.trigger()方法来了解如何在事件触发时传递数据，而不是在事件绑定的时候传递数据。
在jQuery 1.4中，不再支持把数据以及事件附加到一个object、embed或者applet元素上面。因为当往Java applet元素上附加数据时，
会触发一个严重错误警告。
Other $("p").bind("click", function(){
alert( $(this).text() );
});
//当每个段落被点击的时候，弹出其文本。
发布评论