jQuery中的事件

一、jQuery中的事件

1.1加载DOM

window.onload：网页结构，内容，一切都准备完成才执行
$(document).ready():DOM就绪就会执行

$(window).load(function(){
    //编写代码
})
    此方法与下面方法等价
    window.onload = function(){

}

多次使用

function one(){
        alert("one");
    }

    function two(){
        alert("two");
    }

    window.onload = one;

    window.onload = two;

    当网页加载完毕后，发现弹出two的对话框

    这是因为JavaScript的onload事件一次只能保存对一个函数的引用，它会自动用后面的函数覆盖前面的函数，因此不能在现有的行为上添加新的行为。

    为了添加新的行为，只能再创建一个新的JavaScript方法来实现，

    window.onload = funcation(){
    one();
    two();
}

    然而$(document).ready(function(){
    one();
});
    和$(document).ready(function(){
    two();
});

    都会依次运行。

3.简写方式

$(document).ready(function(){
    //编写代码
})
    $(function(){
    //编写代码
})
    $().ready(function(){
    //编写代码
})

1.2事件绑定

bind(type[,data],fn);
第一个参数是事件类型。blur、focus、load、resize、scroll、unload、click、dblclick、mousedown、mouseup、mousemove、mouseover、mouseout、mouseenter、mouseleave、change、select、submit、keydown、keypress、keyup和error等，当然也可以是自定义名称。
第二个参数为可选参数，作为event.data属性值传递给事件对象的额外数据对象。
第三个参数是用来绑定的处理函数

1.基本效果

<div id="panel">
        <h5 class="head">什么是jQuery？</h5>
        <div class="content">
        jQuery是继Prototype之后有一个优秀的JavaScript库。jQuery是继Prototype之后有一个优秀的JavaScript库。jQuery是继Prototype之后有一个优秀的JavaScript库。jQuery是继Prototype之后有一个优秀的JavaScript库。jQuery是继Prototype之后有一个优秀的JavaScript库。jQuery是继Prototype之后有一个优秀的JavaScript库。jQuery是继Prototype之后有一个优秀的JavaScript库。jQuery是继Prototype之后有一个优秀的JavaScript库。jQuery是继Prototype之后有一个优秀的JavaScript库。
        </div>
    </div>

    <style type="text/css">
        .content{display:none;
        width:auto;
        height:auto;
        background-color:#CCCCCC}
        #panel{width:200px;
        height:auto;
        background-color:#0099FF}
        *{margin:0px;
        padding:0px;}
    </style>

当点击标题文字时，会显示标题详情。
实现思路：
(1)等待DOM装载完毕。
(2)找到标题所在的元素，绑定click事件
(3)找到内容元素，将内容元素显示

$(function(){//网页加载时运行
    //当点击标题元素时，会显示该标题下的详细信息
    $("#panel h5.head").bind("click",function(){//绑定click事件
        $(this).next("div.content").show();//显示内容元素

    })
})

2.加强效果

再次单击标题，将内容隐藏

$(function(){//网页加载时运行
    //当点击标题元素时，会显示该标题下的详细信息
    $("#panel h5.head").bind("click",function(){//绑定click事件

        if($(this).next("div.content").is(":visible")){//如果内容显示
            $(this).next("div.content").hide();//隐藏
        }else{
            $(this).next("div.content").show();//显示内容元素
        }
    })
})

该代码中$(this).next(“div.content”)被多次使用，因此可以定义一个局部变量：

$(function(){//网页加载时运行
    //当点击标题元素时，会显示该标题下的详细信息
    $("#panel h5.head").bind("click",function(){//绑定click事件
        var $content = $(this).next("div.content");
        if($content.is(":visible")){//如果内容显示
            $content.hide();//隐藏
        }else{
            $content.show();//显示内容元素
        }
    })
})

3.改变绑定事件的类型

上面的例子中，给元素绑定的时间类型是click，当用户单击的时候会触发绑定事件，然后执行事件的函数代码。
现在把事件类型换成mouseover和mouseout，即当光标滑过的时候，就触发事件。
1)等待DOM装载完毕
(2)找到标题所在的元素，绑定mouseover事件。
(3)找到内容元素，显示内容
(4)找到标题所在的元素，绑定mouseout事件。
(5)找到内容元素，隐藏内容。

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

4.简写绑定事件

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

1.3合成事件

1.hover(enter,leave)方法

用于模拟光标悬停事件。当光标移动到元素上时，会触发指定的第1个函数(enter);
当光标移出这个元素时，会触发指定的第2个函数leave。

将上面的例子改写成使用hover()方法。

//使用hover，代替mouseover和mouseout事件，完成上面的功能
    $("#panel h5.head").hover(function(){//停在该元素上是触发
        $(this).next("div.content").show();
    },function(){//离开时触发
        $(this).next("div.content").hide();
    })

注意：在CSS中伪类选择符，例如:hover，当用户光标悬停在元素上时，会改变元素的外观，在大多数符合规范的浏览器中，伪类选择符可以用于任何元素。然而在IE6浏览器中，伪类选择符仅可用于超链接元素，对于其他元素，可以使用jQuery的hover()方法。
hover()方法准确来说是替代jquery中的bind(“mouseenter”)和bind(“mouseleave”),而不是替代bind(“mouseover”)和bind(“mouseout”)。因此当需要触发hover()方法的第2个函数时，需要用trigger(“mouseleave”)来触发，而不是(“mouseout”)。

1.4事件冒泡

1.什么是冒泡

在页面上可以有很多个事件，也可以多个元素响应同一个事件。假设网页上有两个元素，其中一个元素嵌套在另一个元素里，并且都被绑定了click事件，同时body元素上也绑定了click事件。

如果body中绑定了click事件，body下的子元素div也绑定了click事件。

当点击div元素时，会先执行在div中绑定的click事件，接着执行body中绑定的click事件。

因为，我们很多时候都希望当点击div时，只执行绑定在该元素的click事件，那么该怎么办呢？

2.事件冒泡引发的问题

事件对象

由于IE-DOM和标准DOM实现事件对象的方法各不相同，导致在不同浏览器中获取事件对象变得比较困难。针对这个问题，jQuery进行了必要的扩展和封装，从而使得在任何浏览器重都能轻松的获取事件对象以及事件对象的一些属性。

在程序中使用时间对象非常简单，只需要为函数添加一个参数，jquery代码如下

$("element").bind("click",function(event){//event:事件对象

});

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

停止事件冒泡

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

jQuery代码如下：

        //为span元素绑定click事件
        $(‘span‘).bind("click",function(event){
            var txt = $("#msg").html() + "<p>内层span元素被单击。</p>";
            $("#msg").html(txt);
            event.stopPropagation();//停止事件冒泡
        });

阻止默认行为

网页中的元素有自己默认的行为，例如，单击超级链接后会跳转、单击提交按钮后表单会提交，有时需要阻止元素的默认行为。
jquery解决方法 preventDefault()方法来阻止元素的默认行为。

举一个例子，在单击提交按钮时，验证表单内容。
例如某元素是否是必填字段，某元素长度是否够6位等，当表单不符合提交条件时，要阻止表单的提交(默认行为)。

            //为提交按钮绑定click事件
        $(‘#sub‘).bind("click",function(event){
            var username = $("#username").val();//获取元素的值
            if(username==""){//判断值是否为空
                $("#msg").html("<p>文本框的值不能为空。</p>")//提示信息
                event.preventDefault();//阻止默认行为
            }
            event.stopPropagation();//停止事件冒泡
        });

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

事件捕获

事件捕获和事件冒泡是刚好相反的两个过程，事件捕获是从最顶端往下开始触发。
遗憾的事，并非所有主流浏览器都支持事件捕获，jquery不支持事件捕获，如果读者需要使用事件捕获，直接使用原生JavaScript

this.addEventListener(‘click‘, function (event) {
　　　　　　say(‘捕获‘ + current.tagName + ‘元素，id为‘ + current.id + ‘，目标元素：‘ + event.target.id);
　　　　}, true);
　　　　this.addEventListener(‘click‘, function (event) {
　　　　　　say(‘冒泡‘ + current.tagName + ‘元素，id为‘ + current.id + ‘，目标元素：‘ + event.target.id);
　　　　}, false);

代码中使用了addEventListener方法为元素注册事件。该方法的第一个参数为事件类型，第二个参数为回调方法，第三个参数为在哪一个阶段捕获事件，若为true则是捕获阶段，若为false则是冒泡阶段。

1.5事件对象的属性

jQuery在遵循W3C规范的情况下，对事件对象的常用属性进行了封装，使得事件处理在各大浏览器下都可以正常运行而不需要进行浏览器类型判断。

①event.type()方法

该方法的作用是可以获取到事件的类型。

$("a").click(function(event){
    alert(event.type);//获取事件类型
    return false;//阻止链接跳转
});
    以上代码会返回click。

②event.preventDefault()方法

阻止默认行为。JavaScript中符合W3C规范的preventDefault方法在IE浏览器中却无效。jquery对其进行了封装，使之能兼容各种浏览器。

③event.stopPropagation()方法

停止事件冒泡
JavaScript中符合W3C规范的event.stopPropagation方法在IE浏览器中却无效。jquery对其进行了封装，使之能兼容各种浏览器。

④event.target()方法

获取到触发事件的元素。 jquery对其封装后，避免了W3C、IE和safari浏览器不同标准的差异。

$("a[href=http://google.com]").click(function(event){
    alert(event.target.href);//获取触发事件的a元素的href属性值
    return false;//阻止链接跳转
});

⑤event.relatedTarget()方法

在标准DOM中，mouseover和mouseout所发生的元素可以通过event.target()方法来访问，相关元素是通过event.relatedTarget()方法来访问的。event.relatedTarget()方法在mouseover中相当于IE浏览器的event.fromElement()方法，在mouseout中相当于IE浏览器的event.toElement方法，jquery对其进行了封装，使之能兼容各种浏览器。

⑥event.pageX()方法/event.pageY()方法

该方法的作用是获取到光标相对于页面的x和y坐标。如果没有使用jquery时，那么IE浏览器中是用event.x()/event.y()方法，而在Firefox中用event.pageX()/event.pageY()方法。如果页面上有滚动条，则还要加上滚动条的宽度和高度。在IE浏览器中还应该减去默认的2px的边框。

 $("a").click(function(event){
    alert("Current mouse position:"+event.pageX + " , " + event.pageY);//获取鼠标当前相对于页面的坐标
    return false;// 阻止链接跳转
})

⑦event.which()方法

该方法的作用是在鼠标单击事件中获取到鼠标的左、中、右键；在键盘事件中获取键盘的按键。

$(function(){
    $("body").mousedown(function(e){
        alert(e.which)//1=鼠标左键；2=鼠标中键；3=鼠标右键
    })


})

⑧event.metaKey()方法

针对不同浏览器对键盘中ctrl按键解释不同，jquery也对其进行了封装，并规定event.metaKey()方法为键盘事件中获取ctrl按键

⑨event.originalEvent()方法

该方法的作用是指向原始的事件对象。

1.6移除事件

可以为同一个元素绑定多个事件，也可以为多个元素绑定同一个事件。

假设网页上有一个button元素，使用以下代码为该元素绑定多个相同的事件。

$(function(){
        $("#btn").bind("click",function(){
    $(‘#test‘).append("<p>我绑定函数1</p>");
}).bind("click",function(){
    $(‘#test‘).append("<p>我绑定函数2</p>");
}).bind("click",function(){
    $(‘#test‘).append("<p>我绑定函数3</p>");
});
})

    <button id="btn">单击我<button>
    <div id="test"></div>

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

$("#delAll").click(function(){
        //$("#btn").unbind("click");//移除绑定在id为btn元素上所有的click事件
        $("#btn").unbind();//移除绑定在id为btn元素上所有的click事件.因为元素绑定的都是click事件，所以不写参数也可以达到同样的目的。
    });

unbind([type][,data]);
第1个参数是事件类型，第2个参数是将要移除的函数，
①如果没有参数，则删除所有绑定的事件
②如果提供了事件类型作为参数，则只删除该类型的绑定事件
③如果把绑定时传递的处理函数作为第2个参数，则只有这个特定的事件处理函数会被删除。

2.移除元素的其中一个事件

首先需要为这些匿名处理函数指定一个变量

$("#btn").bind("click",myFun1 = function(){
    $(‘#test‘).append("<p>我绑定函数1</p>");
}).bind("click",myFun2 = function(){
    $(‘#test‘).append("<p>我绑定函数2</p>");
}).bind("click",myFun3 = function(){
    $(‘#test‘).append("<p>我绑定函数3</p>");
});

然后就可以单独删除某一个事件了。

$("#del2").click(function(){
        $("#btn").unbind("click",myFun2);//删除绑定函数2
    });

3.只需要触发一次事件的使用one()方法。使用与bind()函数类似

1.7模拟操作

1.常用模拟

以上的例子都是用户必须通过单击按钮，才能触发click事件，但是有时，需要通过模拟用户操作，来达到单击的效果。例如在用户进入页面后，就触发click事件，而不需要用户去主动单击。
在jQuery中，可以使用trigger()方法完成模拟操作。例如可以使用下面的代码来触发id为btn的按钮的click事件。

$(‘#btn‘).trigger("click");

这样，当页面装载完毕后，就会立刻输出想要的效果。
简化写法click().

$(‘#btn‘).click();

2.触发自定义事件

trigger()方法不仅能触发浏览器支持的具有相同名称的事件，也可以触发自定义名称的事件。
例如为元素绑定一个myClick的事件，

$("#btn").bind("myClick",function(){
        $(‘#test‘).append("<p>我的自定义事件</p>");
    });

想要触发这个事件，用以下代码实现

$("#btn").trigger("myClick");

3.传递数据

trigger(type[,data])
第一个参数是要触发的事件类型
第二个参数是要传递给事件处理函数的附加数据，以数组形式传递。通常可以通过传递一个参数给回调函数来区别这次事件是代码触发还是用户触发的。

$("#btn").bind("myClick2",function(event,message1,message2){//获取数据
        $("#test").append("<p>" + message1 + message2 + "</p>");
    })

    $("#btn").trigger("myClick2",["我的自定义","事件2"]);//传递两个数据

4.执行默认操作

trigger()方法触发后，会执行浏览器默认操作

$("input").trigger("focus");
    以上代码不仅会触发input元素绑定的focus事件，也会使input元素本身得到焦点(这是浏览器默认的操作)；

    如果只想触发绑定的focus事件，而不像执行浏览器默认操作，可以使用jquery中另一个方法triggerHandler("focus");

5.其他用法

前面对bind()方法进行了介绍，bind方法能为元素绑定浏览器支持的具有相同名称的事件，也可以绑定自定义事件。不仅如此，bind方法还可以做很多事情

1.一次性为元素绑定多个事件

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

当光标滑入div元素时，该元素的class切换为over；当光标滑出div元素时，class切换为先前的值

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

bind("click.plugin",function(){});//为click事件添加了命名空间plugin

    unbind(".plugin");//删除命名空间为plugin的事件

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

$(function(){
    $("div").bind("click",function(){
        $("body").append("<p>click事件</p>");
    });
    $("div").bind("click.plugin",function(){
        $("body").append("<p>click.plugin事件</p>");
    });

    $("button").bind("click",function(){
        $("div").trigger("click!");//注意click后面的感叹号
    });
});

当单击div元素后，会痛恨死触发click事件和click.plugin事件。
如果只是单击button元素，则只触发click事件，而不触发click.plugin事件
后面的感叹号作用是匹配所有不包含在命名空间中的click方法

如果需要 两者都触发去掉感叹号即可。