第78天：jQuery事件总结（一）

jQuery的事件总结（一）

　    现在就一点一点积累自己的知识体系，记录自己学到的和自己所理解的jQuery的。

　　JavaScript的HTML和之间的交互式通过用户和浏览器操作页面时引发的事件机制来处理的。当文档或者它的某些元素发生某些变化或操作时，浏览器就会自动生成一个事件。当然使用传统的JavaScript的也能完成这些交互，但是jQuery的增加并扩展了基本的事件处理机制.jQuery不仅提供了更加优雅的事件处理语法，而且极大的增强了事件处理能力。

　　一，jQuery的中的事件

1，加载DOM：

　　执行时机：在常规的的JavaScript中，通常使用在window.onload方法，而在jQuery的中，使用的是$（文件）。就绪（）方法，通过使用此方法，可以在DOM载入就绪时就对其进行操纵兵调用执行它所绑定的函数。

　　注意以上两种方法的区别：

　　在window.onload方法的英文在|网页中所有的元素（包括元素的所有关联文件）完全加载到浏览器后才执行，也即在此时的JavaScript才可以访问网页中的任何元素;

　　$（文件）。就绪（）方法注册的事件处理程序，在DOM完全就绪时就可以被调用，也即此时网页的所有元素对jQuery的都是可以访问的，但是并不是这些元素关联的文件都已经下载完毕。

　　根据上述描述，显然使用的jQuery的$（解决的文）。就绪（）方法时会出现一个问题。由于在该方法内注册的事件，只要DOM就绪就会被执行，因此可能此时元素的关联文件未下载完。例如与图片相关的HTML下载完毕，并且已经解析为DOM树了，但是很有可能图片还未完全加载，所以例如图片的高度和宽度等属性就不一定有效。

　　要解决这个问题，可以使用jQuery中的另一个关于页面加载的方法 - load（）方法.load（）方法会在元素的onload事件中绑定一个处理函数。如果处理函数绑定给window对象，则会在所有的内容（包括窗口，框架，对象和图像等）加载完毕后触发，除过处理函数绑定在元素上，则会在元素的内容加载完毕后触发。

　　jQuery的代码如下：

 1 $（文件）。ready（function（）{ 2 // code ... 3 }）  等价于javascript中的  1 window.onload = function（）{ 2 // code ... 3 } 

在window.onload（）不能多次调用，jQuery的的$（文件）。就绪（）方法就可以很好的解决这种问题 -每次调用$（文件）。就绪（）方法都会在现有的行为上追加新的行为，这些行为函数会根据注册的顺序依次执行例如，上面的JavaScript的代码就可以用jQuery的来很好的实现：

 1 function func1(){
 2   //code...
 3 }
 4 function func1(){
 5   //code...
 6 }
 7 
 8 //下面的jQuery代码就可以顺序执行上面的两个函数，并且如果还有其他的绑onload函数也可以这样绑定
 9 $(document).ready(function(){
10   func1();
11 });
12 $(document).ready(function(){
13   func2();
14 });

2，事件绑定

文档装载完成了，接着就是为元素绑定事件来完成某些操作了，所使用的是结合（）方法.bind（）方法的调用格式为：

bind(type, [data], fn);

其中type是事件类型，包括：click，keypress，load，submit，dblclick，keydown，change，resize，mouseenter，keyup，scroll，focus，mouseleave，blur，unload等，也可以是自定义事件名称。第二个参数的英文可选参数，作为Event.data中属性值传递给事件对象的额外数据对象。第三个参数则的英文用来绑定的处理函数。举个实际的例子，下面网页中，单击“标题”链接将显示内容。

　　HTML代码如下：

1 <div id="container">
2   <h4 class="head">jQuery事件机制</h4>
3   <div class="content">
4     jQuery是目前使用最广泛的javascript函数库。据统计，全世界排名前100万的网站，有46%使用jQuery，远远超过其他库。微软公司甚至把jQuery作为他们的官方库。
5   </div>
6 </div>

按照需求，需要完成以下几个步骤：

　　（1）等待DOM装载完毕;

　　（2）找到“标题”所在的元素，绑定单击事件;

　　（3）找到“内容”元素，将“内容”显示出来。

　　根据分析的步骤，写出jQuery的代码如下：

1 $(function(){
2     $("#container h4.head").bind("click", function(){
3       $(this).next().show();    //获取并显示“内容”元素
4     })
5   })

当然可以加强效果，并且改变绑定事件的类型，比如鼠标悬停时显示“内容”，鼠标离开时隐藏“内容” .jQuery代码如下：

1 $(function(){
2     $("#container h4.head").bind("mouseover", function(){
3       $(this).next().show();    //获取并显示“内容”元素
4     }).bind("mouseout", function(){
5       $(this).next().hide();
6     });
7   })

这里需要知道的一点是，jQuery的中结合的英文方法可以多次调用的，并且可以简化为将上面的第二个结合去掉。