第78天：jQuery事件总结

Posted 2020-10-13

jQuery事件总结（一）

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

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

　　一、jQuery中的事件

1、加载DOM：

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

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

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

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

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

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

　　jQuery代码如下：

 1 $(document).ready(function(){ 2 //code... 3 }) 等价于javascript中的 1 window.onload = function(){ 2 //code... 3 } 

window.onload()不能多次调用，jQuery的$(document).ready()方法就可以很好的解决这种问题——每次调用$(document).ready()方法都会在现有的行为上追加新的行为，这些行为函数会根据注册的顺序依次执行。例如，上面的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()方法的调用格式为：

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）找到“标题”所在的元素，绑定click事件；

　　（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中bind方法是可以多次调用的，并且可以简化为将上面的第二个bind去掉。