【锋利的jQuery】学习笔记04

第四章 jQuery中的事件和动画

一、jQuery中的事件

• 加载DOM

在JS中等待页面加载完成通常使用window.onload方法，而在jQuery中则使用$(document).ready()方法来替代传统的window.onload方法。这两者有很大的不同：

1. 执行时机

window.onload方法是在网页所有的元素（包括元素关联的文件）完全加载到浏览器后才能执行。而Query中的$(document).ready()方法，在DOM载入就绪就可以对其操纵并调用它绑定的函数，此时网页中的所有元素可能并没有下载完毕。

有时我们需要的图片没有加载完毕，我们需要的图片宽高可能不一定有效。这种情况可以使用jQuery的load()方法。load()方法会在元素的onload中绑定一个处理函数。如果处理函数绑定给window对象，则会在所有内容加载完毕后触发。如果处理函数绑定在元素上，则会在元素内容加载完毕后触发。

$(window).load(function({}))等价于js的window.onload=function(){}

2. 多次使用

window.onload方法只能使用一次，否则后面的window.onload会覆盖前面的。这点在引入多个·js时尤其困扰，但是jQuery中的$(document).ready()方法每次调用都会在现有的行为上追加新的行为，并按照注册顺序依次执行。

3.简写方式

$(document).ready()方法可以简写为$(function(){})或者$().ready()，这点在jQuery源码中已经进行过处理，他们的功能是一样的。

• 事件绑定

使用bind()方法给匹配元素进行特定事件的绑定。

格式为bind(type [.data] fn);

第一个参数是事件类型，包括：blur、focus、load、resize、scroll、unload、click、dbclick、mousedown、mouseup、mousemove、mouseover、mouseout、mouseenter、mouseleave、change、select、submit、keydown、keypress、keyup、error等。也可以自定义名称。

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

第三个参数是用来绑定事件的处理函数。

$(function () {
    $(".head").bind("click",function(){  //给.head元素添加一个点击事件
        var $content=$(this).next();     //定义一个局部变量保存$(this).next
        if($content.is(":visible")){        //实现点击显示再点击隐藏的切换
            $content.hide();
        }else{
            $content.show();
        }
    })
});

像blur、focus、load、resize、scroll、unload、click、dbclick、mousedown、mouseup、 mousemove、mouseover、mouseout、mouseenter、mouseleave、change、select、submit、 keydown、keypress、keyup、error等常用事件jQuery提供了简写，eg: $(".head").mouseover(function(){}).mouseout(function(){});

PS: bind()方法的其他用法

1. 绑定多个事件类型

$(function(){
    $("div").bind("mouseover mouseout",function(){
        $(this).toggleClass("over");
    });
});

2.添加事件命名空间便于管理

$(function(){
    $("div").bind("mouseover.plugin",function(){
        $("body").append("<p>mouseover事件</p>");
    });
    $("div").bind("click.plugin",function(){
        $("body").append("<p>click事件</p>");
    });
    $("div").click(function(){
        $("div").unbind(".plugin");
    });
});

3.相同事件名称，不同命名空间执行方法

$(function(){
    $("div").bind("click",function(){
        $("body").append("<p>click事件</p>");
    });
    $("div").bind("click.plugin",function(){
        $("body").append("<p>click.plugin事件</p>");
    });
    $("button").click(function(){
        $("div").trigger(".click!");    //!作用是匹配所有不包含在命名空间中的click方法
    });
});

 

• 合成事件

1. hover()

hover()方法用于模拟光标悬停效果，鼠标移上触发第一个函数，鼠标移除触发第二个函数。用来替代jQuery中的bind("mouseenter")和bind("mouseleave")。

格式： hover(enter,leave);

以上代码通过hover()事件就可以简写为：

$(function () {
    $(".head").hover(function(){
        $(this).next().show();
    },function(){
        $(this).next().hide();
    });
});

PS:hover()方法必须传入2个function，即时有一个操作函数没有也要写上。

2. toggle()

toggle()方法用于模拟鼠标的连续单击事件。第一次单击触发第一个函数，第二次单击触发第二个函数。如果有更多函数则依次触发，然后每次单击都重复对这几个函数的轮番调用。

PS：toggle()方法还可以实现切换元素的可见状态。

 

$(function () {
    $(".head").toggle(function(){
         $(this).next().toggle();
     },function(){
         $(this).next().toggle();
     });
 });

 

• 事件冒泡与事件捕获

当页面元素触发事件的时候，该元素的容器以及页面都会按照特定顺序响应该元素的触发事件，事件的传播顺序就叫事件的流程。事件流分为冒泡型和捕获型。冒泡型事件流所有浏览器都支持，它是从明确的事件源到不明确的事件源依次向上触发。由于事件流的存在，我们有必要对时间的作用范围进行限制。捕获型事件流不是所有主流浏览器都支持，它是从不明确的事件源到明确的事件源依次向下触发，这种缺陷无法通过JS解决，因此jQuery不支持事件捕获。

1. 事件对象

jQuery事件对象创建只需要为函数添加一个参数即可。创建的事件对象只有事件处理函数才能访问到。事件执行完毕后，事件对象就被销毁。

$("element").bind("click",function(e){    //e：事件对象
      //...
});

2.停止事件冒泡

使用stopPropagation()方法停止事件冒泡。

$("span").bind("click",function(e){                     //e是事件对象
    var txt=$("#msg").html()+"<p>内层span元素被单击</p>";
    $("#msg").html(txt);
    e.stopPropagation();                                  //停止事件冒泡
});

3.阻止默认行为

通过preventDefault()阻止元素的默认行为。

$("input").bind("click",function(e){                     //e是事件对象
    var txt=$("#msg").html()+"<p>内层span元素被单击</p>";
    $("#msg").html(txt);
    e.preventDefault();                                  //阻止事件默认行为
});

如果想同时对事件对象停止冒泡和默认行为，可以在事件处理函数中返回false。这是对在事件对象上同时调用stopPrapagation()方法和preventDefault()方法的简写方式。e.preventDefault()可以改为return false;

• 事件对象属性

1. e.type  获取事件的类型。
2. e.preventDefault()方法   阻止浏览器默认行为。
3. e.stopPropagation()方法  阻止事件的冒泡。
4. e.target  获取触发事件的元素。
5. e.relatedTarget  获取相关元素。
6. e.pageX和pageY  获取光标相对于页面的x坐标和y坐标。
7. e.which  单击事件中获取鼠标的左、中、右键；键盘事件获取键盘的按键。
8. e.metaKey 键盘事件中获取ctrl键。

• 移除事件

通过unbind()方法移除事件。

unbind([type],[data]);

第一个参数是事件类型，第二个参数是将要移除的函数。如果没有参数，则删除所有绑定的事件。如果提供了事件类型作为参数，则只删除该类型的绑定事件。如果把绑定时传递的处理函数作为第二个参数，则只有这个特定的事件处理函数会被删除。

$("p").click(function(){
     $("#btn").unbind();
});

只需要触发一次随后就立即删除绑定的情况，可以使用one()方法。one()方法可以为元素绑定处理函数。当处理函数触发一次后，立即被删除。

• 模拟操作

1. 常用模拟

使用trigger()方法完成模拟操作。 eg:   $("#btn").trigger("click"); 也可以简写为$("#btn").click();

2. 触发自定义事件

$(function(){
    $("div").bind("myclick",function(){
        $("body").append("<p>我的自定义事件</p>");
    });
    $("div").trigger("myclick");
});

3. 传递数据

trigger(type,[data])方法有两个参数，第一个参数是触发的事件类型，第二次参数是要传递给事件处理函数的附加数据，以数组形式传递。

4. 执行默认操作

trigger()方法触发事件后，会执行浏览器默认操作。如果只想触发绑定事件，而不想执行浏览器默认操作，使用triggerHandler()方法。

二、jQuery中的动画

• 动画类型

方法	说明
hide()和show()	同时修改高度宽度不透明度
fadeIn()和fadeOut()	改变不透明度
slideUp()和slideDown()	改变高度
fadeTo()	改变不透明度
toggle()	用来代替hide()和show()
slideToggle()	用来代替slideUp()和slideDown()
fadeToggle()	用来代替fadeIn()和fadeOut()
animate()	自定义动画以上动画内部其实都是调用了animate方法

•  停止动画

如果需要在某处停止动画，需要使用stop()方法。

stop([clearQueue],[gotoEnd]);

clearQueue和gotoEnd都是可选参数，为Boolean值。clearQueue是是否要清空未执行完的动画队列，gotoEnd是是否直接将正在执行的动画跳转至末状态。

• 判断元素是否处于动画状态

为避免动画累积造成的动画与用户行为不一致，首先判断元素是否处于动画状态，如果元素不处于动画状态，才为元素添加新的动画，否则不添加。

if($(element).is(":animated")){   //判断元素是否处于动画状态
          //如果没有进行动画，则添加新的动画
}

• 延迟动画

使用delay()方法对动画进行延迟操作。delay()方法既可以推迟动画队列中函数的执行，也可以用于自定义队列。

$(this).animate({left:"400px"},3000)
          .delay(1000);

• 动画队列

当一个animate()方法中应用多个属性时，动画是同时发生的。当链式的写法应0用动画方法时，动画是按顺序发生的（除非queue选项值为false）。