jQuery基础（2）

     这次博客总结一下jQuery中的事件以及事件的处理。

一、jQuery中的事件

在jQuery中绑定或者移除事件，首先得页面载入完成，即：

$(document).ready(function () {

    });

这样会让事件不受影响，正常触发。

事件的绑定和移除

参数eve：事件，类似js里面的事件
参数sel：执行该事件调用的函数
参数data：触发事件的时候传递的数据

on(eve,[sel],[data],fn)–事件绑定

$("#btn").on("click", cla, function (e) {
}//执行力事件传递的数据在e(事件的执行对象)

$("#btn").on("click mouseenter mouseleave", handle);//on 同时绑定多个事件，中间用空格隔开
function handle(e) {//同一个回调函数里面如何区分事件？借助事件的参数:e 、event
    if (e.type == "click") {
    }
    else if (e.type == "mouseenter") {
    }
    else {
    }
}

off(eve,[sel],[fn])–事件移除

$("#btn").off();//不写任何参数该元素的所有事件全被移除

bind(type,[data],fn)–事件绑定，和on用法一致

unbind(t,[d|f])–事件移除，和off用法一致

二、事件的处理

1、one(type,[data],fn)— 一次性事件

var str=[1,2,3];
$("#btn").one("click",str,function (e){
    console.log(e.data);
});

2、trigger(type,[data])—触发指定类型事件，自动触发事件

$("input").trigger("focus");

3、自定义事件：

$("input").on("userclick",function (){
    $(this).css({
        border:"1px solid red"
    });
}).trigger("userclick");

4、事件的切换

hover([over,]out)

$(".block").hover(function (){
    //over
    console.log("鼠标悬停");
},function (){
    //out
    console.log("鼠标离开");
});
//等价于下面的写法
$(".block").on("mouseover mouseout",function (){
    console.log(1);
});

toggle([spe],[eas],[fn])–按顺序执行

$(".block").toggle(function (){
    console.log(1);
},function (){
    console.log(2);
},function (){
    console.log(3);
});

5、jQuery的事件汇总

blur([[data],fn])；//当元素失去焦点时触发 blur 事件。
change([[data],fn])；//当元素的值发生改变时，会发生 change 事件。
click([[data],fn])；//触发每一个匹配元素的click事件。
dblclick([[data],fn])；//当双击元素时，会发生 dblclick 事件。
error([[data],fn])；//当元素遇到错误（没有正确载入）时，发生 error 事件。
focus([[data],fn])；//当元素获得焦点时，触发 focus 事件
focusin([data],fn)；//当元素获得焦点时，触发 focusin 事件。
focusout([data],fn)；//当元素失去焦点时触发 focusout 事件。
keydown([[data],fn])；//当键盘或按钮被按下时，发生 keydown 事件。
keypress([[data],fn])；//当键盘或按钮被按下时，发生 keypress 事件。
keyup([[data],fn])；//当按钮被松开时，发生 keyup 事件。它发生在当前获得焦点的元素上。
mousedown([[data],fn])；//当鼠标指针移动到元素上方，并按下鼠标按键时，会发生 mousedown 事件。
mouseenter([[data],fn])；//当鼠标指针穿过元素时，会发生 mouseenter 事件。该事件大多数时候会与mouseleave 事件一起使用。
mousemove([[data],fn])；//当鼠标指针在指定的元素中移动时，就会发生 mousemove 事件。
mouseout([[data],fn])；//当鼠标指针从元素上移开时，发生 mouseout 事件。
mouseover([[data],fn])；//当鼠标指针位于元素上方时，会发生 mouseover 事件。
mouseup([[data],fn])；//当在元素上放松鼠标按钮时，会发生 mouseup 事件。
resize([[data],fn])；//当调整浏览器窗口的大小时，发生 resize 事件。
scroll([[data],fn])；//当用户滚动指定的元素时，会发生 scroll 事件。
select([[data],fn])；//当 textarea 或文本类型的 input 元素中的文本被选择时，会发生 select 事件。
submit([[data],fn])；//当提交表单时，会发生 submit 事件。

三、事件的执行参数

eve.currentTarget  //当前点击的目标元素
eve.data  //事件传递的数据
eve.delegateTarget  //在事件委托中 获取委托的元素
eve.isDefaultPrevented()  //返回值true/false  是否使用过preve
eve.isImmediatePropag...() //根据事件对象中是否调用过 event.stopImmediatePropagation() 方法来返回一个布尔值。
eve.isPropagationStopped() //返回值true/false  是否使用过stop
eve.namespace //当事件被触发时此属性包含指定的命名空间。
eve.pageX //鼠标相对于文档的左边缘的位置。
eve.pageY //鼠标相对于文档的顶部边缘的位置。
eve.preventDefault()  //阻止事件的默认行为
eve.relatedTarget  //在事件中涉及的其它任何DOM元素。
eve.result //这个属性包含了当前事件事件最后触发的那个处理函数的返回值，除非值是 undefined 。
eve.stopImmediatePro...() //阻止剩余的事件处理函数执行并且防止事件冒泡到DOM树上。
eve.stopPropagation()  //阻止事件冒泡
eve.target   //执行事件的目标元素
eve.timeStamp   //执行的事件  ms
eve.type   //类型
eve.which  //键盘上的ascii值   值为 1 是鼠标

用法：

$("ul").on("click",".box",function (e){
            console.log(e.delegateTarget);//获取委托元素
        });

$(window).mousedown(function (e){
            console.log(e.which);  //输出ascii值
        });

四、时间的冒泡和处理
处理事件的冒泡--------用事件参数

$(function (){
    $("div").click(function (e){
        console.log(1);
        //e.stopPropagation(); //处理事件冒泡
        console.log(e.isPropagationStopped());
        return false; //处理事件冒泡
    });
});

五、总结
       jQuery中的事件和JS中的事件相似度很大，但是写法上又有一些不同，在记忆和使用的时候一定要注意格式写法规范。事件在jQuery中用处很多，需要熟练掌握。