jquery中的事件

淩亂°似流年 2022-07-16 10:42 169阅读 0赞

**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("mouseover事件"); 
    \}).bind("mouseout.a",function()\{ 
    $("body").append("mouseout事件"); 
\}).bind("dbclick",function()\{ 
$("body").append("dbclick事件"); 
\}); 
 
$("button").click(function()\{ 
    $("xxx").unbind(".a"); 
\}) 
这样就把不同类型的事件通过命名空间一次性删完了。 
等价于 
$("button").click(function()\{ 
    $("xxx").unbind("mouseover").unbind("mouseout"); 
\}) 
 
场景2：相同类型事件，不同的命名空间 
 
$("xxx").bind("mouseout.a",function()\{ 
        $("body").append("mouseout.a事件"); 
    \}).bind("mouseout.b",function()\{ 
    $("body").append("mouseout.b事件"); 
\}).bind("mouseout",function()\{ 
$("body").append("mouseout事件"); 
\}); 
 
$("button").click(function()\{ 
    $("xxx").trigger("mouseout!");//仅触发mouseout事件 
\}) 
因为！的意义是，匹配所有不含有命名空间的mouseout事件。 
要想mouseout都触发，就把！去掉即可。 
但是既然加了命名空间一般是不想都触发吧。