《锋利的jQuery》读书笔记 第4章 jQuery中的事件和动画

1.$(document).ready()方法和window.onload方法的区别：        （P99）

1.1 window.onload方法是在网页中所有元素（包括元素的所有关联文件）完全加载到浏览器后才执行，而$(document).ready()方法注册的事件处理程序，在DOM完全就绪时就可以被调用，此时网页的所有元素对jQuery而言都是可以访问的，但是，这并不意味着这些元素关联的文件都已经下载完毕

1.2 window.onload事件一次只能保存对一个函数的引用，而$(document).ready()方法会在现有行为上追加新的行为

2.$(document).ready编写方式：                         （P102）

          2.1 $(document).ready(function() {

                    // 代码

               })

          2.2 $(function() {

                    // 代码

               })

               这种方法是2.1的简写形式

          2.3 $().ready(function() {

               })

               因为$()不带参数时，默认参数就是document，所以这就相当于2.1所示的形式

3. 事件绑定：          （P102）

          可以使用bind()方法来对匹配的元素进行特定事件的绑定，bind()方法的定义如下：

               bind( type, [, data], fn);

               type：为事件类型，可以是：blur、focus、load、resize、scroll、unload、click、dblclick、mousedown、mouseup等等

               data：为可选参数，作为event.data属性值传递给事件对象的额外数据对象

               fn：是用来绑定的处理函数

4.合成事件：      （P106）

          4.1 hover()：用于模拟光标悬停事件

               方法定义为：hover(enter, leave);

               当光标移动到元素上时，会触发指定的enter函数，当光标移除元素时，会触发指定的leave函数

          4.2 toggle()：用于模拟鼠标连续单击事件

               方法定义为：toggle(fn1, fn2, ......, fnN);

               第1此单击元素，触发指定的第1个函数(fn1)，再次单击同一个元素触发第2个函数(fn2);....,

5.事件流（补充）：           （P109）

     事件流描述的是从页面中接受事件的顺序。

     IE和Netscape开发团队提出了差不多是完全相反的概念。

     IE的事件流是事件冒泡流，即事件开始有具体的元素接收，然后逐级向上传播到较为不具体的节点。

     Netscape提出的事件流是事件捕获，事件捕获的思想是不太具体的节点应该更早接受事件，而最具体的节点应该最后接收事件。

     应该尽可能使用事件冒泡，而仅在有特殊需要的时候使用事件捕获。可以通过DOM2级事件处理程序中的addEventListener()来指定是在冒泡阶段还是捕获节点调用处理程序。需要注意的是jQuery不支持事件捕获。

6.jQuery中可以通过stopPropagation()方法来停止事件冒泡，可以通过preventDefault()方法来阻止元素的默认行为，可以在事件处理函数中返回false来同时停止事件冒泡和阻止元素的默认行为。 （P111）

 

--------------------------------------------------
author: cs_cjl
website: http://blog.csdn.net/cs_cjl
--------------------------------------------------

 

7.事件对象的属性：       （P113）

          7.1 event.type 事件的类型，比如在单击事件中它的值为"click"

          7.2 event.preventDefault()    阻止默认行为

          7.3 event.stopPropagation()  停止事件冒泡

          7.4 event.target 获取触发事件的元素

          7.5 event.relatedTarget 在mouseover中相当于IE浏览器的event.fromElement在mouseout中相当于IE浏览器的event.toElement

          7.6 event.pageX/event.pageY

               获取光标相对于页面的x坐标和y坐标

          7.7 event.which

               在鼠标单击事件中为鼠标的左（1）中（2）右（3）键

               在键盘事件中为键盘的按键，例如按下a为65

          7.8 event.metaKey

          7.9 event.originalEvent 指向元素的事件对象

8.移除事件                    （P115）

          jQuery中可以通过unbind()方法来移除事件

          方法定义：unbind([type] [, data]);

          （1）如果没有参数，则删除所有绑定的事件

          （2）如果提供了事件类型作为参数，则只删除该类型的绑定事件

          （3）如果把在绑定时传递的处理函数作为第2个参数，则只有这个特定的事件处理函数会被删除

9. one()方法和bind()方法类似，定义如下：     （P117）

     one(type, [data], fn);

     该方法绑定的事件只有在第1次触发的时候执行，之后毫无作用

10.模拟操作        （P118）

          可以通过调用trigger()方法来模拟触发事件

          方法定义为：

               trigger( eventType [, extraParameters] );

          trigger()方法触发事件后，会执行浏览器的默认操作，如果不想执行浏览器的默认操作可以使用     

          triggerHandler()方法

          方法定义为：

               triggerHandler( eventType [, extraParameters] );

11.bind()方法的其他用法        （P119）

          11.1 绑定多个事件类型

               例如：

               $("div").bind("mouseover mouseout", function() {

                    $(this).toggleClass("over");

               });

          11.2 添加事件命名空间，便于管理

               可以在绑定是指定命名空间，例如$("div").bind("click.plugin", ....);

               然后删除时只需要指定命名空间就可以删除改命名空间下绑定的所有事件，例如：$("div").unbind(".plugin")

          11.3 相同事件名称，不同命名空间的执行方法

               在trigger()方法中在指定的事件名称后面加上!号，例如：$("div").trigger("click!");则会只触发不包含在命名空间中对于的事件方法。

12.jQuery中的动画的相关方法                       （P132）

方法名	说明
hide()和show()	同时修改多个样式属性即高度、宽度和不透明度
fadeIn()和fadeOut()	只改变不透明度
slideUp()和slideDown()	只改变高度
fadeTo()	只改变不透明度
toggle()	用来代替hide()方法和show()方法，注意和连续鼠标单击事件中的区分开来
slideToggle()	用来代替slideUp()方法和slideDown()方法
animate()	属于自定义动画的方法，以上各种动画方法实质内容都调用了animate()方法

animate方法中指定属性的值的时候既可以指定绝对值，也可以指定相对值

例如：

     $(this).animate({left: "500px"}, 300);          // 绝对值

     $(this).animate({left: "+=500px"}, 300);          // 相对值

     $(this).animate({left: "-=500px"}, 300);          // 相对值

13.可以通过stop()方法来停止元素的动画      （P128）

          方法定义为：

               .stop( [clearQueue] [, jumpToEnd] );

14.动画队列：            （P133）

          （1）一组元素上的动画效果

                    当在一个animate()方法中应用多个属性时，动画是同时发生的

                    当以链式的写法应用动画方法时，动画是按照顺序发生的

          （2）多组元素上的动画效果

                    默认情况下，动画都是同时发生的

                    当以回调的形式应用动画方式时，动画是按照回调顺序发生的

          另外，在动画方法中，要注意其他非动画方法会插队（例如css()方法）要使非动画方法也按照顺序执行，需要把这些方法写在动画方法的回调函数中。