每天学点JQuery(3)—事件

加载DOM：

JQuery用$(document).ready()方法来代替JS中的window.onload()方法，但两者之间也存在着细微的差别：window.onload()方法是在网页中所有的元素(包括元素的所有关联文件)完全加载到浏览器之后才执行，而$(document).ready()方法可以在DOM载入就绪时就可以执行，例如有一个大的图片库，为每张图片都加上链接，window.onload()需要等所有图片下载完毕后才可以处理，而$(document).ready()则只需等到DOM就绪后，不用等到图片都加载完成就可以处理。但JQuery中提供$(window).load(function(){})则等价于window.onload()。

事件绑定：bind(type[, data], fu)

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

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

第3个参数则是用来绑定的处理函数

//基本事件
$(function(){
    $("a").bind("click", function(){
        alert("点我");
    })
})

//改变事件
$(function(){
    $("a").bind("mouseover", function(){
        alert("鼠标滑过");
    }).bind("mouseout", function(){
        alert("鼠标滑出");
    })
})

//简写事件绑定
$(function(){
    $("a").mouseover(function(){
        alert("鼠标划入");
    })
})

合成事件：
(1) hover(enter, leave)：模拟光标悬停事件，当光标移动到元素上会触发enter函数，当光标移出元素，会触发第二个函数

//这个方法实际是替代bind("mouseenter")和bind("mouseleave")的
$(function(){
    $("a").hover(function(){
        alert("in");
    }, function(){
        alert("out");
    })
})

(2) toggle(fn1, fn2,…fnn)：模拟鼠标连续单击事件，第一次单击触发第一个，再次单击触发第二个，以此类推。

$(function(){
    $("a").toggle(function(){
        alert("first click");
    }, function(){
        alert("second click");
    })
})

toggle()在JQuery中还有另一个作用：切换元素的可见状态。

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

事件冒泡：：事件会按照DOM的层次结构像水泡一样不断向上直至顶端

(1)阻止事件冒泡：

//event为事件对象：只有处理函数能访问到，处理完毕后，事件对象被销毁
$("a").click(function(event){
    event.stopPropagation()//停止冒泡
    alert("body的alert不会触发");
});

$("body").click(function(){
    alert("我被冒泡了");
})

(2)阻止默认行为：例如点击链接跳转，点击提交表单提交

$("a").click(function(event){
     event.preventDefault();//阻止默认行为
     alert("链接不会跳转");
})

如相同时停止冒泡和默认行为，则在处理函数中添加return false；

事件对象的属性：
(1)event.type：获取事件类型

$("a").click(function(event){
    alert(event.type);//返回click
})

(2)event.preventDefault()：阻止默认行为
(3)event.stopPropagation()：阻止事件的冒泡
(4)event.target：获取到触发事件的元素

$("a").click(function(event){
    alert(event.target);//返回链接url
})

(5)event.relatedTarget：返回相关联的对象

$("a").hover(function(event){
    alert(event.relatedTarget);//返回的是一个对象
},function(event){
    alert(event.relatedTarget);
})

(6)event.pageX，event.pageY：取得光标相对于页面的X坐标和Y坐标

$("a").click(function(event){
    alert(event.pageX + " " + event.pageY);
})

(7)event.which：该方法获取鼠标单击事件中获取的鼠标左中右键

$("a").click(function(event){
    alert(event.which);//返回1:鼠标左键 2:鼠标中键 3:鼠标右键
})

移除事件：unbind([type],[data])
第一个参数是事件类型，第二个参数是将要移除的函数，如果么有参数删除所有绑定事件，如果提供了事件类型作为参数，则删除所有此类型的绑定事件，如果传第二个参数，则删除特定的绑定函数。

$("a").unbind();
$("a").unbind("click");
$("a").unbind("click",fun);

模拟操作：

(1)常用模拟：

$(function(){
    $("a").trigger("click");//模拟点击操作
})

等价于

$(function(){
    $("a").click();//模拟点击操作
})

(2)触发自定义事件：

$("a").bind("myClick",function(){
    alert("myClick为自定义点击事件");
});

$("a").trigger("myClick");

(3)传递参数：trigger(“type”, [data])

$("a").bind("myClick",function(event, message1, message2){
    alert(message1+message2);
});

$("a").trigger("myClick",["Hello", "World"])

其他用法
(1)绑定多个事件类型

$(function(){
    $("a").bind("mouseover mouseut", function(){
        $(this).hide();
    })
})

等价于

$(function(){
    $("a").bind("mouseover",function(){
        $(this).show();
    }).bind("mouseout",function(){
        $(this).hide()
    });
})

(2)添加事件命名空间，便于管理

$(function(){
    $("a:first").bind("click").function(){
        alert("1")
    });

    $("a:last").bind(click.plugin).function(){
        alert("2");
    }

    $("a").unbind(".plugin")//只删除click.plugin
})

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

$(function(){
    $("a").bind("click").function(){
        alert("1")
    });

    $("a").bind(click.plugin).function(){
        alert("2");
    }

    $("a").trigger("click!")//感叹号的作用是匹配所有不包含在命名空间中的方法
})