jquery中的事件

jquery中的事件

toggle()有两种功能：
1、模拟鼠标连续单击事件。第一次单击时触发第一个方法，第二次单击时触发第二个方法，如有更多函数则依次触发。

toggle（function（{}）,function(){},.....）\\注意多个函数之间一定是逗号隔开。

2、切换元素的可见状态。如果可见的，则让该元素隐藏，如果隐藏则显示这个元素。
$("xxx").toggle();
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
事件冒泡：现在模拟冒泡产生的场景：body里面有个div，div里面有个span，这三个元素均添加了click类型的事件，那么现在单击span元素时将产生事件冒泡，即：触发span上的click事件—>触发div上的click事件—>触发body上的click事件。三个事件由内而外依次触发。

既然有事件冒泡就会有阻止事件冒泡，只需在绑定的click事件中添加一行代码
$("span").click(function(e){
        alert("span元素被单击");
        e.stopPropagation();//阻止事件冒泡！
    });


更简单的，更普遍的阻止事假冒泡的方法：
$("span").click(function(e){
        alert("span元素被单击");

        return false;//just this！

    });

之所以说它普遍是因为return false是阻止元素的默认行为。

例如单击表单的“提交”按钮后会提交，当验证不通过时就可以用return false阻止表单的提交。

$("submit").click(function(){
        if（）{//验证不通过}

        return false;//just this！
    });
再例如a标签单击后会自动跳转到相应的网页，就可以
$("a").click(function(){
        alert("阻止默认跳转");

        return false;//just this！
    });
这样就会阻止默认跳转了。
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

事件对象event，当单击绑定事件的元素时，事件对象就被创建了。这个事件对象只有在事件处理函数中能访问到，事件处理函数执行结束时，事件对象就被销毁。

$("xxxx").click(function(event){
        
        //code
    });
1获取事件类型：
(stirng)event.type;

2获取触发（被绑定）事件的元素
(element)event.target;

3获取鼠标光标的相对于页面的位置
event.pageX,event.pageY
如果没有jquery，在IE中是event.x/y,在Firefox是event.pageX/Y.jquery整合了很多这种各种浏览器之间的兼容性问题，就像以前每个手机品牌有自己的数据线一样，现在是每个系统的手机有自己的数据线。这就是整合和统一。大大提高了效率减少了不便。

4获取鼠标单击的左中右键
event.which
返回值1 2 3
分别是左中右

5自然少补了键盘，获取键盘按键
event.which

event.which重载了，在mousedown中就是获取鼠标按键，在keyup中就是获取键盘按键。

tips：event.metaKey，获取ctrl键。
针对不同浏览器的差异化问题，jquery统一了获取ctrl键的方法。

++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
移除事件
$("xxxx").eventType(function(){
    $("xxxx").unbind（[eventtype]，[functionName]）    //[]表示可选的
    });
eventtype：事件类型
functionName：事件上的方法名
哪个参数为空，默认移除该参数的所有。即，[eventtype]，[functionName]都空，移除该元素的所有事件。[functionName]为空，移除该元素的[eventtype]类型的全部事件。

example1：//一个类型的事件上只有一个函数的函数移除，其实直接把第二个参数省略就可以了。


function a(){
        alert("函数a");
    }
$("#p1").click(a);

$("#p2").click(function(){
        $("#p1").unbind("click",a);
    });

example2://某一类型的事件上有多个函数的某一函数移除
$("#p1").bind("click",a=function(){
        alert("函数a");
    }).bind("click",b=function(){
        alert("函数b");
    })
    $("#p2").click(function(){
        $("#p1").unbind("click",a);
    });
bind（）与$(function(){})类似，都可以重复出现，执行顺序即定义的顺序。
    
另外，对于一些事件只需要触发一次的，jquery提供了封装—one()方法
$("xxxx").one("evnetType",function(){
        //code
    });
$("#p1").one("click",function(){
        alert("1");
    }).one("click",function(){
        alert("2");
    }).one("click",function(){
        alert("3");
    })。。。。。。。。
one（）方法与bind方法结构类似，使用one方法的事件，仅仅触发一次后就失效。

++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

模拟操作

绑定多个事件
example1:
$("xxx").bind("mouseover  mouseout",function(){
        $(this).toggleClass("over");
    });
example2:
等价于    
$("xxx").bind("mouseover",function(){
        $(this).toggleClass("over");
    }).bind("mouseout",function(){
    $(this).toggleClass("over");
});
当光标滑入element时，为element添加over样式，当光标移出时返回到元素的本来样子。
obviously，example1代码更简洁，这就是jquery提倡的“write less，do more”

++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
添加命名空间，便于管理
场景1：为不同类型的事件添加同样的命名空间，便于管理这些不同类型的事件。

$("xxx").bind("mouseover.a",function(){
        $("body").append("<p>mouseover事件</p>");
    }).bind("mouseout.a",function(){
    $("body").append("<p>mouseout事件</p>");
}).bind("dbclick",function(){
$("body").append("<p>dbclick事件</p>");
});

$("button").click(function(){
    $("xxx").unbind(".a");
})
这样就把不同类型的事件通过命名空间一次性删完了。
等价于
$("button").click(function(){
    $("xxx").unbind("mouseover").unbind("mouseout");
})

场景2：相同类型事件，不同的命名空间

$("xxx").bind("mouseout.a",function(){
        $("body").append("<p>mouseout.a事件</p>");
    }).bind("mouseout.b",function(){
    $("body").append("<p>mouseout.b事件</p>");
}).bind("mouseout",function(){
$("body").append("<p>mouseout事件</p>");
});

$("button").click(function(){
    $("xxx").trigger("mouseout!");//仅触发mouseout事件
})
因为！的意义是，匹配所有不含有命名空间的mouseout事件。
要想mouseout都触发，就把！去掉即可。
但是既然加了命名空间一般是不想都触发吧。