jQuery中的事件 - 快车库

1、加载DOM

$(document).ready()方法，替代传统的JavaScript中的window.load()

区别:
1、windows.onload()只可以使用一次，$(document).ready()可以使用多次。
2、windows.onload()在窗体加载完毕后触发，而$(document).ready()在DOM完全就绪的时候就可以被调用
3、简写方式$(document).ready()可以简写成$(function(){});,还可以简写成$().ready(function(){})

2、事件绑定

bind()方法可以用来绑定事件，且可以多次调用，格式为:

    bind(type[ , data],fn);

第一个参数为事件类型，包括：blur、focus、load、resize、click等，也可以自定义。
第二个参数为可选参数，作为event.data属性值传递给事件对象的额外数据对象。
第三个参数用来绑定的处理函数。

    $(function(){
        $("#body h5.head").bind("click",function(){
            $(this).next().show(); //获取$(this).next()元素
        })
    });

2.1 改变绑定事件的类型

    $(function(){
        $("#body h5.head").bind("mouseover",function(){
            $(this).next().show(); //绑定mouseover事件
        }).bind("mouseout",function(){
            $(this).next().hide(); //绑定mouseout事件
        })
    });

等待DOM装载完毕。
找到#body所在元素，绑定mouseover事件
找到内容元素，执行事件
找到#body所在元素，绑定mouseout事件
找到内容元素，执行事件
简写绑定事件的方式

    $(function(){
        $("#body h5.head").mouseover(function(){
            $(this).next().show(); //绑定mouseover事件
        }).mouseout(function(){
            $(this).next().hide(); //绑定mouseout事件
        })
    });

3. 事件冒泡

事件冒泡
: 这个概念通俗来讲，就是页面上多个元素响应了同一个事件，这些元素有可能是包含、嵌套关系，当事件发生时，会按照元素的嵌套顺序从内向外进行执行，直到顶端。
为了解决这些问题，引入以下内容：

3.1 事件对象

在程序中使用事件对象，只需要在函数

    $(function(){
        $("#element").bind("mouseover",function(event){
            //event:事件对象
    });

当点击element元素时，事件对象被创建，这个对象只有在事件处理函数才可以访问到，事件处理函数执行完毕后，事件对象就会被销毁。

3.2 停止事件冒泡

停止事件冒泡可以阻止事件中其他对象的事件处理函数被执行。jQuery提供了stopPropagation()方法来停止事件冒泡。

    $(function(){
        $("#element").bind("mouseover",function(event){
            //event:事件对象
            event.stopPropagation();//停止事件冒泡
    });

3.3 阻止默认行为

网页上的元素有自己默认的行为，jQuery提供了preventDefault()方法来阻止元素的默认行为。

    $(function(){
        $("#submit").bind("click",function(event){
            //event:事件对象
            event.preventDefault();//阻止默认行为（表单提交）
    });

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

3.4 事件捕获

与事件冒泡相反的两个过程，事件捕获是从最顶端往下开始触发。但是jQuery目前不支持事件捕获。

4 事件对象的属性

event.type 获取到事件的类型
event.preventDefault() 阻止事件的默认行为
event.stopPropagation() 阻止事件冒泡
event.target() 获取到触发事件的元素
event.relatedTarget 获取到触发事件的元素
event.pageX和event.pageY 获取到光标相对页面的x坐标和y坐标
event.which 在鼠标点击事件中获取鼠标的左1、中2、右3键，和键盘的按键
event.metaKey 为键盘事件中获取ctrl按键

5 移除事件

5.1 移除按钮元素上以前注册的事件

        $("#submit").unbind();//删除所有绑定事件
        $("#submit").unbind("click");//删除click事件

如果没有参数，则移除所有的绑定事件，若提供事件类型参数，则只删除该类型的绑定事件。

5.2 one()方法

jQuery提供的one()方法，可以为元素绑定处理函数，当函数触发一次后，立即被删除。即在每个对象上，事件处理函数只会被执行一次。

6 模拟操作

模拟操作
: 模拟用户操作的方式，触发类似于click类型的事件。

        $("#submit").trigger("click");//模拟click事件

有时候trigger()方法执行后，会执行浏览器默认行为，例如：

        $("input").trigger("focus");
        //不仅会触发绑定的focus事件，也会使input本身得到焦点

若只想触发绑定的focus事件，而不想执行浏览器默认操作，可以使用另一个类似的方法triggerHandler("focus")

7 事件其他用法

7.1 绑定多个事件类型

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

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


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

        $("div").bind("click.plugin",function(){
            $(this).toggleClass("over");
        });
        
        $("div").bind("dbclick.plugin",function(){
            $(this).toggleClass("over");
        });
        
        $("button").click(){
            $("div").unbind(".plugin");
        });

在绑定事件类型后面添加命名空间，这在删除事件时只需要置顶命名空间即可。

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

可以为元素绑定相同的事件类型，然后以命名空间的不同按需调用。

        
        $("div").bind("click",function(){
            $(this).toggleClass("over");
        });
        
        $("div").bind("click.plugin",function(){
            $(this).toggleClass("over");
        });
        
        $("button").click(){
            $("div").trigger("click!");
            //带！号，匹配所有不包含在命名空间中的click方法
        });
        
        $("div").bind("click.plugin",function(){
            $("div").trigger("click");
            //去掉！，两者都会被触发
        });