（八）jQuery中的事件

1.加载DOM
在常规的JavaScript中，使用window.onload方法；而在jQuery中，使用$(document).ready(function(){ })方法。
window.onload与$(document).ready()的不同：
● 执行时间
window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行。
$(document).ready()是DOM结构绘制完毕后就执行，不必等到加载完毕。
● 编写个数不同
window.onload不能同时编写多个，如果有多个window.onload方法，只会执行一个。它会默认用后面的函数覆盖前面的函数。
$(document).ready()可以同时编写多个，并且都可以得到执行

● 简化写法
window.onload没有简化写法
$(document).ready(function(){})可以简写成$(function(){});

2.事件绑定
在文档加载完成后，如果打算为元素绑定事件来完成某些操作，可以使用bind()方法对匹配元素进行特定事件的绑定。

bind()的调用格式：

bind(type [,data] ,fn);

type：代表事件类型，类型包括：blur、focus、load、resize、scroll、unload、click、dblclick、mousedown、mouseup、mousemove、mouseover、mouseout、mouseinter、mouseleave、change、select、submit、keydown、keypress、keyup和error等。

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

fn：有来绑定处理的函数

<body>
<!-- 第1种效果-->
<div id="panel">
    <h5 class="head">什么是jQuery？</h5>
    <div class="content" style="display: none">
        jQuery是一个兼容多浏览器的javascript库，核心理念是write less,do more(写的更少,做的更多)。
    jQuery在2006年1月由美国人John Resig在纽约的barcamp发布，吸引了来自世界各地的众多JavaScript
    高手加入，现在由Dave Methvin率领团队进行开发。如今，jQuery已经成为最流行的javascript库，
    在世界前10000个访问最多的网站中，有超过55%在使用jQuery。
    </div>
</div>
<hr />
<!-- 第2种效果-->
<div id="panel_2">
    <h5 class="head">什么是jQuery？</h5>
    <div class="content" style="display: none">
        jQuery是一个兼容多浏览器的javascript库，核心理念是write less,do more(写的更少,做的更多)。
    jQuery在2006年1月由美国人John Resig在纽约的barcamp发布，吸引了来自世界各地的众多JavaScript
    高手加入，现在由Dave Methvin率领团队进行开发。如今，jQuery已经成为最流行的javascript库，
    在世界前10000个访问最多的网站中，有超过55%在使用jQuery。
    </div>
</div>
<script type="text/javascript"> 
    //光标滑过时显示，离开隐藏
    $("#panel h5.head").bind("mouseover", function(){
        $(this).next("div.content").show();
    });
    $("#panel h5.head").bind("mouseout", function(){
        $(this).next("div.content").hide();
    });
    //单击以改变是否显示
    $("#panel_2 h5.head").bind("click", function(){
        if($(this).next("div.content").is(":visible")){//如果显示
            $(this).next("div.content").hide();
        }else{
            $(this).next("div.content").show();
        }
    });
</script>
</body>

3.合成事件

● hover()方法

　　hover()方法的语法结构：hover(enter, leave);

　　hover()方法用于模拟光标悬停事件。当光标移动到元素上时，会触发enter函数；当光标移出这个元素时，会触发leave函数。

● toggle()方法

　　toggle()方法的语法结构：toggle(fn1, fn2,...,fnN);

　　toggle()方法用于模拟鼠标连续单击事件。第一次单击元素时，触发fn1函数，当再次单元素时，触发fn2函数；如果有更多函数，则依次触发，直到最后一个。

4.事件冒泡

事件冒泡现象重现：

<body>
<div id="content">
    外层div元素
    <span>内层span元素</span>
    外层div元素
</div>
<div id="msg"></div>
<script type="text/javascript"> 
    //为span元素绑定事件
    $("#content span").bind("click", function(){
        var txt = $("#msg").html() + "<p>span元素被单击</p>";
        $("#msg").html(txt)
    });
    //为span元素绑定事件
    $("#content").bind("click", function(){
        var txt = $("#msg").html() + "<p>div元素被单击</p>";
        $("#msg").html(txt)
    });
    //为span元素绑定事件
    $("body").bind("click", function(){
        var txt = $("#msg").html() + "<p>body元素被单击</p>";
        $("#msg").html(txt)
    });
</script>
</body>

停止事件冒泡：

<script type="text/javascript"> 
    //为span元素绑定事件
    $("#content span").bind("click", function(event){
        var txt = $("#msg").html() + "<p>span元素被单击</p>";
        $("#msg").html(txt);
        event.stopPropagation();
    });
    //为span元素绑定事件
    $("#content").bind("click", function(event){
        var txt = $("#msg").html() + "<p>div元素被单击</p>";
        $("#msg").html(txt);
        event.stopPropagation();
    });
    //为span元素绑定事件
    $("body").bind("click", function(event){
        var txt = $("#msg").html() + "<p>body元素被单击</p>";
        $("#msg").html(txt);
        event.stopPropagation();
    });
</script>

当单击元素时，事件对象event就被创建了。这个事件对象只有在事件处理函数才能访问到。事件处理函数执行完毕后，事件对象就被毁弃。

5.事件对象的属性

1)event.type:该方法的作用是可以获取到事件的类型

$("a").bind("click",function(){
    console.log(event.type);   //输出为click
    return false;
});

2)event.preventDefault() 阻止默认的事件行为（JavaScript中符合w3c规范中的preventDefault()方法在IE中无效）

3)event.stopPropagation() 阻止时间的额冒泡（JavaScript中符合w3c规范中的stopPropagation()方法在IE中无效）

4)event.target 获取到触发事件的元素

5)event.relatedTarget 如在mouseover事件触发时,相关的元素,如另外一个mouseout元素

6)event.pageX和event.pageY 获取到光标相对于页面的x坐标和y坐标

7)event.which() 在鼠标单击事件中获取到鼠标的左中右键

8)event.metaKey 判断事件是否包含ctrl按键

9)event.originalEvent() 指向原始的事件对象

6.移除事件：unbind()
7.模拟操作：使用trigger()方法模拟事件
● 常用模拟
　　模拟单击事件：$("#btn").trigger("click");（简化：$("#btn").click();）
● 触发自定义事件:

HTML：

<script type="text/javascript"> 
    //为Button绑定单击事件
    $("#btn").bind("myClick", function(){
        $("#test").append("<p>我自定义的事件<p>");
    });
    //触发自定义事件
    #("#btn").trigger("myClick");
</script>

● 传递数据

<script type="text/javascript"> 
    //为Button绑定单击事件
    $("#btn").bind("myClick", function(event, message1, message2){
        $("#test").append("<p>"+message1+message2+<p>");
    });
    //触发自定义事件
    #("#btn").trigger("myClick" ,["我自定义的", "事件"]);//传递两个参数
</script>

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

<script type="text/javascript">
    $("#btn").bind("click.plugin", function(event, message1, message2){
        $("#test").append("<p>"+message1+message2+<p>");
    });
    $("#btn").bind("mouseover.plugin", function(event, message1, message2){
        $("#test").append("<p>"+message1+message2+<p>");
    });
    $("#btn").bind("myClick", function(event, message1, message2){
        $("#test").append("<p>"+message1+message2+<p>");
    };
    #("#btn").unbind(".plugin");//移除plugin命名空间下的事件
</script>