jQuery基础事件

jQuery 事件
1.ready() - 类似于window.onload的作用
　　*写法
　　　　*$(document).ready(function(){});
　　　　*$().ready(function(){});
　　　　*$(function(){});
　　* ready与onload的区别
　　　　* ready
　　　　　　* 具有简写方式
　　　　　　* 在一个HTML页面中允许多个
　　　　　　* 等待HTML页面中所有DOM结构加载完毕后就可以执行
　　　　* onload
　　　　　　* 没有简写方式
　　　　　　* 在一个HTML页面中只能一个
　　　　　　* 必须等待HTML页面中所有内容全部加载完毕后才能执行

   //示例
     $(document).ready(function(){
        console.log($("#user").val());
    });

    // jQuery - undefined - 具有相对完善的事件处理机制
    var $user = $("#user");
    console.log($user.val());//空元素调用方法不报错，返回undefined

    // DOM - 报错 DOM空元素调用方法属性报错
    var user = document.getElementById("user11");
    if(user){
        console.log(user.value);
    }else{
        console.log("undefined");
    }

//jQuery中的事件-ready与onload区别 (相差近6毫秒)
    var startTime = new Date().getTime();
    $(function(){
        var endTime1 = new Date().getTime();
        console.log("ready执行时间: "+(endTime1-startTime)+" ms");
    });
    window.onload = function(){
        var endTime2 = new Date().getTime();
        console.log("onload执行时间: "+(endTime2-startTime)+" ms");
    }

2.事件绑定与解绑
　　* bind(type,data,fn) - 绑定事件
　　　　* type - 指定绑定的事件名称
　　　　* 如果绑定多个事件时,使用空格隔开
　　　　* data - 可选项,作为event.data属性值传递给事件对象的额外数据对象
　　　　* fn - 绑定事件的处理函数
　　* unbind() - 解绑事件
　　　　* type - 指定解绑的事件名称
　　　　　　* 默认不传递任何内容 - 解绑所有事件
　　　　　　* 指定单个事件名称 - 解绑单个事件
　　　　　　* 指定多个事件名称 - 解绑多个事件
　　* 绑定与解绑允许指定哪些事件?
　　　　　　blur, focus, focusin, focusout, load, resize, scroll, unload, click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave, change, select, submit, keydown, keypress, keyup, error 。
　　　　* 注意
　　　　　　* 所谓的click()事件是bind('click')的简写方式

    /*
     * bind(type,data,fn)方法 - 事件绑定
     * * type - 设置绑定的事件名称,string类型.
     * * data - 可选项,作为event.data属性值传递给事件对象的额外数据对象
     * * fn - 事件对应的处理函数
     */
    $(".d1").bind("click",function(){
        if($(".d2").is(":hidden")){
            $(".d2").show(3000);
        }else{
            $(".d2").hide(3000);
        }
    });
    //多事件绑定
    $(".d1>h3").bind("mouseover mouseout",function(){
        if($(".d2").is(":hidden")){
            $(".d2").show(1000);
        }else{
            $(".d2").hide(1000);
        }
    });
    /*
     * unbind() - 解绑事件
     */
    $(".d1").unbind();//解绑所有事件
    //解绑指定事件
    $(".d1>h3").unbind("mouseover mouseout");

3.事件对象(event)
　　* 事件对象被封装在事件对应的处理函数的参数
　　　　ele.onclick = function(event){
　　　　　　event
　　　　　　}
　　* 常用用法
　　　　* pageX/clientX/offsetX/x - 当前x轴
　　　　* pageY/clientY/offsetY/y - 当前y轴
　　　　* target - 当前绑定事件的源对象(元素)
　　　　* returnValue - 返回值,Boolean类型
　　　　* return false - 阻止页面的默认行为
　　　　* which/keyCode/charCode - 键盘对应值
4.事件冒泡
　　* 捕获
　　* 冒泡
5.模拟事件(了解)
　　* trigger()

    $("button").click(function(event,a,b){
        console.log(event.target);
        console.log("a : "+a);
        console.log("b : "+b);
    }).trigger("click",['this is a.','this is b.']);//trigger自动触发同名事件

6.事件切换
　　* hover(over,out)方法
　　　　* over - onmouseover事件的处理函数
　　　　* out - onmouseout事件的处理函数
7.DOM事件回顾
　　* 原生DOM绑定事件三种
　　　　* 在HTML页面元素中指定事件名称
　　　　* 在javascript代码中
　　　　　　* element.onclick = function(){}
　　　　　　* element.addEventListener("click",function(){});