jQuery事件

事件在元素对象与功能代码中起着很是重要的做用

严格来讲，事件在触发以后分为两个阶段，第一是捕获阶段，而后是冒泡阶段，可是遗憾的是，不少浏览器都不支持捕获事件，所以直接执行冒泡事件，所谓的冒泡就是事件执行中的顺序

能够经过stopPropagation()方法阻止冒泡事件

页面载入事件

jQuery中的页面载入事件ready()相似于JavaScript中的OnLoad()方法，只是在事件执行时间上有区别。OnLoad()方法必须是页面中的所有元素彻底加载到浏览器后才触发，在这种状况下，若是页面中的元素过多或者过大，那么要等到OnLoad()方法执行完毕后，用户才能进行操做。若是使用jQuery中的ready()方法加载页面，则只要页面的DOM模型加载完毕，就会触发ready方法。

ready方法的工做原理：

在jQuery加载页面时，会设置一个isReday的标记，用于监听页面的加载的进度。固然遇到执行ready方法时经过查看isReady值是否被设置，若是未被设置，那么说明页面没有被彻底加载，在此状况下，将未完成加载的部分用一个数组缓存起来，当所有加载完成后，再将未完成的部分经过缓存一一执行。

ready方法的写法

<script type="text/javascript">
    //写法一
    $(function() {
        //代码部分
    });
    //写法二
    $(document).ready(function() {
        //代码部分
    });
    //写法三
    jQuery(document).ready(function() {
        //代码部分
    });
    //写法四
    jQuery(function() {
        //代码部分
    });
</script>

绑定事件

绑定按钮的单机事件

<script type="text/javascript">
    //写法一
    $(function() {
        $("input").click(function(){
            alert("绑定按钮的单击事件");
        });
    });     
</script>
<div class="wrapper">
    <input type="button" value="点击开始" />
</div>

在jQuery中还可使用bind()方法进行事件的绑定

bind()功能是为每一个选择元素的事件绑定处理函数。语法：bind(type,[data],fn);

其中type为一个或多个类型的字符串，如"click",也能够自定义类型，也能够是被参数type调用的类型，

data参数是做为event.data属性值传递给事件对象的额外数据对象。

经过bind方法绑定事件

<script type="text/javascript">
            $(function() {
                $("input").bind("click",function(){
                    alert("bind");
                });
            });
            
        </script>
        <div class="wrapper">
            <input type="button" value="点击开始" />
        </div>

切换事件

在jQuery中有两个方法能够用来切换事件，分别是hover()和toggle(),所谓切换事件，就是两个以上的事件绑定一个元素，在元素的行为动做间进行切换，

hover方法是在鼠标悬停和鼠标移出的事件进行切换

该方法所实现的功能，也能够经过jQuery事件mouseseenter和mouseleave实现

hover方法语法：hover(over,out);

两个参数over和out，分别是鼠标悬停和鼠标移出的事件代码段

用hover方法，实现鼠标通过文字变红色，鼠标移出文字变蓝色的功能

<script type="text/javascript">
    $(function() {
        $("p").hover(function(){
            $(this).css('color','red');
        },function(){
            $(this).css('color','blue');
        });
    });
            
</script>
<div class="wrapper">
    <p>hover方法</p>
</div>

toggle方法

该方法能够依次调用N个指定函数，知道最后一个函数，而后重复对这些函数轮番调用，每次单机后依次调用函数。语法如是：toggle(fn1,fn2...);

用toggle方法，实现鼠标单击文字，依次改变文字的颜色

<script type="text/javascript">
    $(function() {
        $("p").toggle(function() {
            $("p").css("color", "green");
        }, function() {
            $("p").css("color", "red");
        }, function() {
            $("p").css("color", "yellow");
        });
    });
</script>
<div class="wrapper">
    <p>
        hover方法
    </p>
</div>

移除事件

在DOM对象的操做中，有绑定事件，固然也有解除绑定，在jQuery中，提供unbind()方法移除绑定事件，语法：unbind([type],[fn]);其中type为移除的事件类型，fn为须要移除的事件出来函数，若是该方法没有参数，则移除全部的绑定事件。

点击按钮，移除p元素的绑定事件

<script type="text/javascript">
    $(function() {
        $("p").click(function(){
            alert("绑定点击");
        });
        $("input").click(function(){
            $("p").unbind("click");
        });
    });
</script>
<div class="wrapper">
    <p>
        hover方法
    </p>
    <input type="button" value="移除绑定" />
</div>

其余事件

one();

该方法是为所选元素绑定一个仅触发一次的处理函数，语法：one(type,[data],fn);

其中type为事件的类型，既要触发的事件类型。data参数是做为event.data属性值传递给事件对象的额外数据对象。fn为绑定事件是所要触发的函数。

使用one方法为按钮绑定一个click事件，点击按钮时弹出p元素的文本内容，再次点击按钮，再也不弹出

<script type="text/javascript">
    $(function() {
        $("input").one("click",function(){
            alert($("p").text());
        });
    });
</script>
<div class="wrapper">
    <p>
        hover方法
    </p>
    <input type="button" value="one" />
</div>

trigger()方法

在DOM页面中，有时候须要在页面加载完成后自动执行如下人性化的操做，好比文本框处于选中的状态，某个按钮处于焦点中。jQuery提供trigger方法，能够很简单的实现这个功能。
该方法在所选元素上触发指定事件。语法：trigger(type,[data]);type为触发事件的类型，data为可选参数，表示在触发事件时传递给函数的附加参数。

使用trigger方法，实现文本框在页面加载完毕处于选中状态

<script type="text/javascript">
    $(function() {
        $("input").trigger("select");
    });
</script>

<div class="wrapper">
    <input type="text" />
</div>