当前位置: 澳门新濠3559 > 服务器运维 > 正文

4.事件切换 hover,也可以在同一个页面中无限次地

时间:2019-12-26 07:51来源:服务器运维
当然它的优点并不只在于这点,使用JQuery事件处理机制比直接使用Javascript本身内置的一些事件相应方式更加的灵活,更加不容易暴露在外,而且有更加优雅的语法,大大减少了我们工作

当然它的优点并不只在于这点,使用JQuery事件处理机制比直接使用Javascript本身内置的一些事件相应方式更加的灵活,更加不容易暴露在外,而且有更加优雅的语法,大大减少了我们工作的量度。

Jquery基础之事件操作详解,jquery基础详解

事件是用户操作时页面或页面加载时引发的用来完成javascript和HTML之间的交互操作。常见的元素点击事件、鼠标事件、键盘输入事件等,较传Javascript

相比JQuery增加并扩展了基本的事件处理机制,极大的增强了事件处理的能力。

一、DOM加载事件

页面加载完毕后浏览器会通过javascript为Dom元素加载事件,使用Javascript时候使用的是window.onload方法,而Jquery使用的是$(document).ready()方法,下表

展示两个事件的异同。

window.onload方法 $(document).ready()方法
执行时机 必须等待所有内容加载完成后才能执行 页面的DOM元素绘制完成后可以执行不必等待全部内容加载完成。
绑定函数个数

该方法能够绑定一个函数,如果绑定多个只能执行最后的一个绑定。例:

window.onload=function(){alert("1");}

window.onload=function(){alert("2");}

执行结果只执行最后绑定的函数结果是打印:2.  

能够注册多个函数,按绑定顺序执行绑定函数。例:

$(document).ready(funtction(){alert("1");});

$().ready(function(){alert("2");});

执行结果是顺序执行绑定的函数:先打印1.然后再打印2.

简化写法 $().ready();$.ready()

二、事件处理

当文件加载完成后就可以为元素添加事件处理,进而事件执行某些动作完成相关操作。jquery中有多种事件处理方法,主要有bind()、one()、unbind()、live()、trigger()、triggerHander()等。Jquery方法使用bind()方法为匹配的元素进行特定的事件绑定。bind()方法格式如下:

bind(type,[ data],fun);

bind()方法有三个参数,各个参数说明如下:

第一个参数是事件类型,主要如下:blur、focus、load、resize、scroll、unload、click、dbclick、mousedown、mouseup、mousemove、mouseover、mouseout、mouseenter、mouseleave、change、select、submit、keydown、keypress、keyup和error等。也可以是自定义名称,Jquery中的事件绑定类型比javascript少了"on",因此jquery中事件click对应javascript中的onclick函数。

第二个参数是可选参数,作为event.data属性值传递给事件对象的额外数据对象。

第三个参数是用来绑定的处理函数。

为按钮绑定单击事件示例:

<input type="button" id="btn1" value="单击">

$("#btn1").bind("click",function(){alert("单击事件绑定");});

bind()方法为元素绑定的事件一直有效直到unbind()方法或者删除元素。如果想要绑定事件只能执行一次就要使用one()方法绑定事件。one()同bind()方法一样,区别在于one()方法绑定的事件只能执行一次。

为按钮绑定一次性事件示例:

<input type="button" id="btn1" value="单击">

$("#btn1").one("click",function(){alert("单击事件绑定");});

unbind()方法为元素取消事件绑定,unbind()方法的格式如下:

$(selctor).unbind([type],[data])

unbind()方法是元素bind()方法的反向操作,从每个匹配的元素中删除绑定的事件。当没有参数时候删除所有的绑定事件。如果提供了事件类型的参数则删除指定的绑定事件。如果指定了事件类型,第二个参数指定了函数名称则删除事件类型中与第二个参数名称对应的事件。

示例:

<input type="button" id="btn1" value="click" />

<input type="button" id="btn2" value="removeBind" />

$("#btn1").bind("click", fun1 = function () { alert("事件1"); });

$("#btn1").bind("click", fun2 = function () { alert("事件2"); });

$("#btn2").bind("click", function () {
$("#btn1").unbind("click", fun2);
});

该示例使用unbind()方法的二个参数形式移除第二次绑定的事件处理函数。

live()方法为元素动态绑定事件,使用该方法绑定事件后,新加对应元素也能触发相应事件。live()方法格式如下:

$(selector).live([type],[data],fun);

live动态绑定示例:

$("p").live("click",function(){$(this).hide();});

该示例为所有的p元素节点动态添加了click事件,无论是现有的p元素节点还是以后要添加的p元素节点都有会中点单击时候触发hide()从而隐藏自己。die()方法是live()方法的反向操作,结果live()方法动态绑定的事件和unbind()方法一样。使用die()方法取法动态绑定后,所有动态绑定的事件将删除。

trigger()方法在匹配的元素上触发参数中的事件,该方法会触发浏览器默认事件,返回false阻止浏览器默认事件。trigger()方法格式如下:

$(selector).trigger([type],[data]);

trigger()方法示例:

$("form:first").trigger("submit");

该示例触发第一个from表单的submit操作。

triggerHandler()方法这个方法会触发绑定事件,但是不会触发浏览器默认事件。与trigger()方法触发后返回false效果一样。使用方法和trigger一样。

三、事件

事件处理中已经列出了主要的事件类型如下:blur、focus、load、resize、scroll、unload、click、dbclick、mousedown、mouseup、mousemove、mouseover、mouseout、mouseenter、mouseleave、change、select、submit、keydown、keypress、keyup和error等。各个事件类型主要是两种用法绑定事件、触发事件。以click事件为例,click方法格式如下:绑定事件$(selector).click(functiron(){//函数体}),触发事件$(selector).click()。例:

<input type="button" id="btn1" value="绑定事件"/>

<input type="button" id="btn2" value="触发事件"/>

$("#btn1").click(function(){alert("事件绑定");});

$("#btn2").click(function(){$("#btn1").click();})

该示例为第一个按钮btn1绑定事件,为按钮btn2绑定事件同时在绑定事件中触发第一个按钮的绑定事件。其余事件类型和click类似。

四、合成事件

合成事件也可以称为交互事件是JQuery自定义的方法,方法有两个hover()和toggle()。

hover()方法模仿鼠标悬停事件,方法格式如下:hover(enter,leave)。例:

$("ul li").hover(function(){alert("Enter");},functiron(){alert("leave");});

该示例为ul的li元素绑定悬停事件,当鼠标停上ul的子元素li上时候会触发enter()函数,打印“Enter”,当鼠标移出li元素时候会打印"leave"。

toggle()方法切换操作循环执行绑定的函数,方法格式如下:toggle(fun1,fun2,...,funN);例:

<input type="button" id="btn1" value="触发切换操作"/>

$("#btn1").toggle(function(){alert("开始");},function(){alert("继续");},function(){alert("结束");});

该示例为按钮btn1绑定切换事件每次单击都会顺序触发绑定事件中的一个。该示例第一次点击打印"开始",第二次点击打印"继续",第三次点击打印"结束",再次点击和第一次一样打印"开始",循环顺序执行函数。

五、事件属性

Jquery对事件属性进行了封装使事件处理在各浏览器下不需要判别类型都能正常运行。各个事件属性的如下:

事件类型event.type.该属性用于获得触发该事件的类型,对不引发事件的不同操作返回不同的结果;例:

$("p").click(function(event){alert(event.type);});

该示例返回元素p单击事件的事件类型,结果打印是 "click";

事件类型event.target该属性用于获得触发事件的元素;例:

$("a").click(function(event){alert(event.target.href);});

该示例返回元素a的href属性。

事件默认行为event.preventDefault;该属性用于阻止事件的默认属性,例:

$("a").click(function(event){event.preventDefault;});

使用该属性阻止元素a的默认的跳转行为,结果和return false一样。

事件冒泡event.stropPropagation属性用于阻止事件冒泡,例:

$("div").click(function(event){alert("里层点击");event.stopPropagation;});

该示例中使用stopPropagation属性阻止div的父元素的click事件被触发。

event.pageX和event.pageY属性,使用这两个属性可以获得鼠标的相对于页面的当前位置。例:

$("p").click(function(event){alert("current mouse location "+event.pageX+" "+event.pageY);});

该示例当点击元素p的时候获得鼠标的当前位置,并打印出来。

event.witch属性,使用这个属性可以获得鼠标单击时候鼠标的左中右键,在键盘事件中获得键值。

$("p").mousedown(function(event){alert(event.witch);});

该示例当鼠标按下时候打印鼠标键值。左中右健分别对应值是1、2、3。

event.metaKey属性用于在事件获得键盘的ctrl键,例:

$("body").keydown(function(event){if(event.metaKey){alert("ctrl");}else{alert("no ctrl");}});

该示例当在页面中按下键盘时候如果按键为ctrl键就打印ctrl,否则打印"no ctrl".

六、事件冒泡

页面中有多个绑定事件因此可能出现多个元素响应同一个事件,由此引发了事件不是我们预期的,这种现象就是事件冒泡,要处理这个问题可以对事件的作用范围进行限制,Jquery中使得stopPropagation()方法停止事件的冒泡。事件冒泡示例:

<body><div>事件冒泡div内容</div>body内容</body>

$("body").click(function(){alert("body");});

$("body div").click(function(){alert("div");});

$("span").click(function(){alert("span");});

在该示例中当点击span时候会触发三个打印事件 "span" "div" "body",如何阻止事件冒泡?可以使用Jquery事件中的stropPropagation()方法来停止事件冒泡。上面示例改成这样:

$("body").click(function(event){alert("body");event.stopPropagation();});

$("body div").click(function(event){alert("div");event.stopPropagation();});

$("span").click(function(event){alert("span");event.stopPropagation();});

这样当点击不同元素时候就不会发生冒泡事件。

七、事件命名空间

事件添加命名空间便于事件的管理:删除事件和触发事件。例:

<div>元素绑定多个事件</div>

$("div").bind("click.plugin",function(){alert("click.plugin");});

$("div").bind("click",function(){alert("click");});

$("div").bind("mouseover.plugin",function(){alert("mouseover.plugin");});

$("div").bind("dbclick",function(){alert("dbclick");});

由于使用了命名空间可以删除指定命名空间中的事件,如移除所有plugin命名空间下的事件函数方法如下:$("button").click(function(){$("div").unbind(".plugin");});这样就移除了所有命名空间是plugin的事件函数。div中只剩下click和dbclick绑定事件。

使用命名空间对触发特定的事件了带来了方便,如为div绑定了两个click事件,一个是带命名空间的一个是不带命名空间。如果想要触发不包含在命名空间中的事件可以使用trigger("click!")方法,!感叹号的作用是匹配所有不包含在命名空间中的click方法。

以上这篇Jquery基础之事件操作详解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持帮客之家。

事件是用户操作时页面或页面加载时引发的用来完成javascript和HTML之间的交互操作。常见的元素点...

首先我们来看一看JQuery事件,包括如下几部分:

JQuery的事件处理机制包括:页面加载、事件绑定、事件委派、事件切换四种机制。我们先从$事件开始。

1.页面载入 ready(fn)

一、页面加载$相当与Javascript中的onLoad()事件,都是在页面加载的时候执行该方法,但是两者又有着微妙的差别,ready()事件是当HTML下载完成并解析成DOM树之后就可以执行,而onLoad()事件要等HTML包括文件都下载完成之后才能执行。我们在ready()事件中可以绑定其他的一些事件或者函数,ready()有几种语法可以表示:

2.事件处理 bind,one,trigger,triggerHandler,unbind

$.ready;

3.事件委派 live,die

$;

4.事件切换 hover,toggle

$;

5.普通事件 click,blur,focus......

当然我个人还是习惯于用第一种,增强可读性,需要注意的是在使用ready()事件的时候请确保在

页面载入:
ready事件是JQuery的一个标志性事件,ready事件和传统的javascript的load事件有点相像,主要区别是在执行时机方面。我们先来看一个例子吧:

元素的onload事件中没有注册函数,否则不会触发$事件。也可以在同一个页面中无限次地使用$事件。其中注册的函数会按照先后顺序依次执行。

[javascript] 
<script type="text/javascript" src="js/jquery-1.10.1.min.js"></script> 
<script type="text/javascript"> 
    function Test(){ 
        alert("JavaScript"); 
    } 
     
    function Test2(){ 
        alert("JQuery"); 
4.事件切换 hover,也可以在同一个页面中无限次地使用$事件。    } 
     
    $(document).ready(function(){ 
        Test2(); 
    }) 
     
</script> 
</head> 
 
<body onLoad="Test()"> 
 
</body> 

二、事件切换只有两个方法,就是hover两个方法,由于他们截取组合的用户操作,并且以多个函数响应,因此也称为复合事件处理机制。hover()方法是一个模仿鼠标悬停变化的方法,简单的说就是鼠标移入移出是时候执行你指定的行为的方法,我们最常用的就是做菜单切换效果。toggle()方法就是当你点击按照顺序执行你指定的函数方法,第一次点击执行第一个函数,第二次点击执行第二个函数,以此类推,它可以使用事件绑定中的unbind方法删除。

<script type="text/javascript" src="js/jquery-1.10.1.min.js"></script>
<script type="text/javascript">
 function Test(){
  alert("JavaScript");
 }
 
 function Test2(){
  alert("JQuery");
 }
 
 $(document).ready(function(){
  Test2();
 })
 
</script>
</head>

hover实例:

<body onLoad="Test()">

复制代码 代码如下:

</body>运行这个例子,会发现先弹出"JQuery",然后再弹出"JavaScript",这是他们两者之间的一个明显的区别。

JQuery事件处理

区别:

页面加载

1.)window.onload方法是在网页中所有的元素(包括元素的所有关联文件)完全加载到浏览器之后才执行,即JavaScript此时才可以访问网页中的任何元素(图片,div)等等。

事件绑定

而通过JQuery中的$(document).ready()方法注册的事件处理程序,在DOM完全就绪时就可以被调用了,也就是说JQuery的ready方法优于js的onload方法。

事件委派

2.)JQuery中的$(document).ready()方法可以多次使用,而window.onload只加载一次,需要点技巧才可以多次使用(想知道的话,百度一下哈)。案例:

事件切换

[javascript]
<script type="text/javascript"> 
    $(function(){ 
        JQTe(); 
    }) 
    $(function(){ 
        JQTe2(); 
    }) 
     
    function JQTe(){ 
        alert("abc1"); 
    } 
     
    function JQTe2(){ 
        alert("abc2"); 
    } 
     
    function Js(){ 
        alert("0"); 
    } 
     
    function Js2(){ 
        alert("1"); 
    } 
     
    window.onload=Js; 
    window.onload=Js2; 
</script> 

toggle实例: 复制代码 代码如下: HTML代码 JQuery代码 $.toggle { alert; }, function; }, function; }, function; }); 三、事件委派中也只有两个方法,live两个方法,这两个方法是1.3版本之后才新增的,之前的版本是没有的。live()可以理解成元素组事件委派方法,比如li元素用live绑定了click事件。那么当在以后增加一个li到这个页面时,对于这个新增加的li,其click事件依然可用,而无需重新给这种新增加的元素绑定事件,在编写树形插件的时候相当有用。die绑定的方法。

<script type="text/javascript">
 $(function(){
  JQTe();
 })
 $(function(){
  JQTe2();
 })
 
 function JQTe(){
  alert("abc1");
 }
 
 function JQTe2(){
  alert("abc2");
 }
 
 function Js(){
  alert("0");
 }
 
 function Js2(){
  alert("1");
 }
 
 window.onload=Js;
 window.onload=Js2;
</script>运行如上的案例:我们会发现通过JQuery中的$(document).ready()方法弹出了两个提示框,而传统的JavaScript只执行了最后一个。

live中type参数目前只支持click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, keydown, keypress, keyup事件。实例如下

温馨提示:$(document).ready(function(){...Code..})可以简写成:$(function(){..Code..})

复制代码 代码如下: HTML代码:

事件处理:(bind,one,trigger,triggerHandler,unbind)
bind事件:绑定的元素必定要事先存在,后添加进来的元素无效(例如通过js动态添加新的元素,该元素将不会被bind事件所绑定)。

  • 页面加载
  • 事件绑定
  • 事件委派
  • 事件切换

语法:$(选择器).bind('事件',function(){});

JQuery代码: $.live { var index = $;//获取li的索引 var text = $.text();//根据单击项索引获得文本值 alert("索引:" + index + ",文本值:"

例如:

  • text); }); die使用起来相当简单,一种删除所有live()事件,一种指定删除,两个参数是可选的。 复制代码 代码如下: $.click.die事件 $;//删除指定为click的live.die { alert;//删除指定为click的live; 仅供参考,欢迎感兴趣的朋友参与讨论。下篇文章再说事件绑定,写一起太长了。未完待续........

  html代码:

  <div id="abc">Div内容</div>

  js代码:

$('#abc').bind('click',function(){

  alert('bind事件');

});

 

one事件:为元素绑定一次性事件,该事件只会执行一次。

语法:$('选择器').one('click',function(){})

例如:

html代码:

  <div id="abc">Div内容</div>

  js代码:

$('#abc').one('click',function(){

  alert('只会弹出一次');

});

 

trigger事件:模拟用户触发事件,该事件会引起冒泡(冒泡事件会在稍后提到)

例如:

html代码:

  <div id="abc2">Div2内容<div id="abc">Div内容</div>

js代码:

[javascript] 
$(function(){ 
    $('#abc').click(function(){ 
        alert('test'); 
    }) 
         
    $('#abc2').click(function(){ 
        alert('test2'); 
    }) 
         
    $('#abc').trigger('click'); 
    $('#abc').click(); 
}) 

$(function(){
 $('#abc').click(function(){
  alert('test');
 })
  
 $('#abc2').click(function(){
  alert('test2');
 })
  
 $('#abc').trigger('click');
 $('#abc').click();
})程序运行的时候为id为abc的元素绑定单击事件,并且为id为abc2的元素也绑定单击事件,绑定完成之后使用trigger模拟用户的点击操作,程序弹出alert('test');和alert('test2');

如此可见,该trigger会触发事件冒泡,模拟事件还可以使用如上写到的直接调用事件($('#abc').click()),不为事件指定方法体即可,实现的效果和trigger一致。要阻止事件冒泡可以使用:stopPropagation(),该方法稍后会提到。

 

triggerHandler事件:与trigger事件相似,有如下不同之处:

1)triggerHandler方法并不会触发事件的默认行为。(例如,表单提交)。

2)trigger()会影响所有与 jQuery 对象相匹配的元素,而triggerHandler()仅影响第一个匹配到的元素。

3)使用 triggerHandler()创建的事件,并不会在 DOM 树中向上冒泡。如果事件没有被目标元素直接处理,那么它就不会进行任何处理。

4)  与普通的方法返回 jQuery 对象(这样就能够使用链式用法)相反,triggerHandler()返回最后一个处理的事件的返回值。如果没有触发任何事件,会返回 undefined。

 

unbind事件:移除bind方法绑定的事件。

1)当直接使用unbind方法的时候,将去除对应元素上所有的bind方法绑定的事件,例如:$('#abc').unbind();

2)当然unbind方法也可以指定移除具体的事件,例如:$('#abc').unbind('click');移除id为abc上的click事件。

3)通过指定click事件类型,只有该事件类型的处理程序将解除绑定。但是,这种方法有种负面影响,这是因为有可能在代码的其它地方在相同的元素上绑定了相同的事件处理。为了避免该问题,对于一个健壮性和扩展性强的应用程序而言,通过在使用该方法时,会传入两个参数,例如:$('#abc').unbind('click',handler);

对于指定两个参数的情况下:下面的代码实现上是错误的:

[javascript]
<script type="text/javascript"> 
    $(function(){ 
        $('#abc').bind('click',function(){ 
            alert('aa'); 
        }) 
         
        $('#btnTest').click(function(){ 
            $('#abc').unbind('click',function(){ 
                alert('abc'); 
            }); 
        }) 
    }) 
</script> 
</head> 
 
<body> 
<div id="abc">Div内容</div> 
<button id="btnTest">按钮</button> 
</body> 

<script type="text/javascript">
 $(function(){
  $('#abc').bind('click',function(){
   alert('aa');
  })
  
  $('#btnTest').click(function(){
   $('#abc').unbind('click',function(){
    alert('abc');
   });
  })
 })
</script>
</head>

<body>
<div id="abc">Div内容</div>
<button id="btnTest">按钮</button>
</body>这里当点击按钮移除元素id为abc的单击事件时,移除将会失败,程序会认为这是两个不同的事件。尽管上述代码中,两个匿名函数的内容是一样的,但是它们是在不同的地方被创建的,因此 JavaScript 会将它们当成是不同的函数对象。若要解除绑定特定的事件处理函数,我们需要的是指向该函数的引用,而不是内容相同的不同函数。

4)为了移除绑定处理程序的范围进一步的缩小,我们可以使用unbind()来移除相应命名空间的处理程序。

例如:

[javascript]
<script type="text/javascript"> 
    $(function(){ 
        $('#txtName').bind('click.abc1',function(){ 
            alert('click abc1命名空间'); 
        }); 
         
        $('#txtName').bind('click.abc',function(){ 
            alert('click'); 
        }); 
        $('#txtName').bind('blur.abc',function(){ 
            alert('blur'); 
        }); 
         
        $('#btnTest').click(function(){ 
            $('#txtName').unbind('click.abc');//只移除id为txtName元素上命名空间为.abc的click事件  
        }) 
         
        $('#btnTest2').click(function(){ 
            $('#txtName').unbind('.abc');//移除id为txtName元素上命名空间为.abc的所有事件  
        }) 
    }) 
</script> 
</head> 
 
<body> 
    <input type="text" id="txtName"/> 
    <button id="btnTest">移除abc命名空间中的点击事件</button> 
    <button id="btnTest2">移除abc命名空间中的所有事件</button> 
</body> 

<script type="text/javascript">
 $(function(){
  $('#txtName').bind('click.abc1',function(){
   alert('click abc1命名空间');
  });
  
  $('#txtName').bind('click.abc',function(){
   alert('click');
  });
  $('#txtName').bind('blur.abc',function(){
   alert('blur');
  });
  
  $('#btnTest').click(function(){
   $('#txtName').unbind('click.abc');//只移除id为txtName元素上命名空间为.abc的click事件
  })
  
  $('#btnTest2').click(function(){
   $('#txtName').unbind('.abc');//移除id为txtName元素上命名空间为.abc的所有事件
  })
 })
</script>
</head>

<body>
    <input type="text" id="txtName"/>
    <button id="btnTest">移除abc命名空间中的点击事件</button>
    <button id="btnTest2">移除abc命名空间中的所有事件</button>
</body>5)unbind()也可以在事件处理内部解除事件处理。

例如:

[javascript]
<script type="text/javascript"> 
    var num=1; 
    $(function(){ 
        $('#btnTest').bind('click',function(event){//注意此处要加event  
            alert('第'+num+"次"); 
            num++; 
            if(num>3){ 
                $(this).unbind(event); 
            } 
        }) 
    }) 
</script> 
</head> 
 
<body> 
<button id="btnTest">调用3次就移除事件</button> 
</body> 

<script type="text/javascript">
 var num=1;
 $(function(){
  $('#btnTest').bind('click',function(event){//注意此处要加event
   alert('第'+num+"次");
   num++;
   if(num>3){
    $(this).unbind(event);
   }
  })
 })
</script>
</head>

<body>
<button id="btnTest">调用3次就移除事件</button>
</body>当我们点击按钮到第四次时,事件已经不会再触发了,事件已经被移除。
注意:JQuery1.7版本以上推荐使用off移除事件处理。

off事件:移除一个事件处理。

语法:$('元素选择器').off(事件event,[选择器selector],[,函数]);

[javascript] 
<script src="js/jquery-1.10.1.min.js" type="text/javascript"></script> 
<script type="text/javascript"> 
    $(function(){ 
        $('#abc').bind('click',function(){ 
            $('body').on('click','#abc1',aClick);//当点击id为abc的元素时,为body下的id为abc1的元素附加事件aClick  
        }); 
         
        function aClick(){ 
            alert('text'); 
        } 
         
        $('#btnTest').click(function(){ 
            $('body').off('click','#abc1',aClick);//去除body中id为abc1的元素的aClick事件  
        }) 
    }) 
</script> 
</head> 
 
<body> 
<div id="abc">div 内容</div> 
<div id="abc1">abc1 内容</div> 
<button id="btnTest">off移除</button> 
</body> 

<script src="js/jquery-1.10.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
 $(function(){
  $('#abc').bind('click',function(){
   $('body').on('click','#abc1',aClick);//当点击id为abc的元素时,为body下的id为abc1的元素附加事件aClick
  });
  
  function aClick(){
   alert('text');
  }
  
  $('#btnTest').click(function(){
   $('body').off('click','#abc1',aClick);//去除body中id为abc1的元素的aClick事件
  })
 })
</script>
</head>

<body>
<div id="abc">div 内容</div>
<div id="abc1">abc1 内容</div>
<button id="btnTest">off移除</button>
</body>注意:当有多个过滤参数时,只有与这些参数完全匹配的事件处理函数才会被移除。

事件委派:(live,die,on)
Jquery1.7版本上已经不推荐使用live,die,他们都有对应的优化使用方案:live推荐使用on,die推荐使用off,在这里我们就讲解on的用法。

on:在选定的元素上绑定一个或多个事件处理函数。

语法:on(事件event[,选择器selector][澳门新濠3559,,要传递给事件处理函数的event.data。data][,事件被执行要触发的函数])

$('#abc').on('click',function(){});//为id为abc的元素绑定一个点击事件,无论这个元素是已经存在的,还是动态创建(后续添加进来的)

 

事件切换:(hover,toggle)
hover事件:是mouseenter和mouseleve方法的结合,这是官方API给出的,其实这两个方法就是我们所熟知的mouseover和mouseout。因为mouseenter和mouseleve这两个方法是专门针对IE的,JQuery对其进行了优化和适用。

[javascript] 
<script type="text/javascript"> 
    $(function(){ 
        $('div').hover(function(){ 
            alert('a');//鼠标悬浮弹出  
        },function(){ 
            alert('b');//鼠标离开位置弹出  
        }) 
    }) 
</script> 
</head> 
 
<body> 
<div style="width:200px;height:200px;background:#ccc;"></div> 
</body> 

<script type="text/javascript">
 $(function(){
  $('div').hover(function(){
   alert('a');//鼠标悬浮弹出
  },function(){
   alert('b');//鼠标离开位置弹出
  })
 })
</script>
</head>

<body>
<div style="width:200px;height:200px;background:#ccc;"></div>
</body>toggle事件:显示或隐藏事件,当元素是隐藏时,把元素显示出来,当元素是显示时,把元素进行隐藏。

语法一:toggle([,时间][,执行完触发的函数])

语法二:toggle(options),有如下附加参数:

1)duration运行时间,

2)easing过渡效果(Jquery提供了liner,swing,想实现更多的效果需要下载插件),

3)complete成功执行完触发的函数,

4)step(Number now, PlainObject fx)每步动画执行后调用的函数。

5)queue(默认为true一个布尔值,指示是否将动画放置在效果队列中。如果为false时,将立即开始动画。 从jQuery1.7开始,队列选项也可以接受一个字符串,在这种情况下,在动画被添加到由该字符串表示的队列中。),

6)specialEasing:一组一个或多个通过相应的参数和相对简单函数定义的CSS属性

 

案例:

[javascript]
<script type="text/javascript"> 
    $(function(){ 
        $('#btn').click(function(){ 
            $('div').toggle(1000,'swing');//点击按钮时触发,对div元素以1秒执行显示或隐藏动画  
        }) 
    }) 
</script> 
</head> 
 
<body> 
    <div style="width:200px;height:200px;background:#ccc;"></div> 
    <button id="btn">按钮</button> 
</body> 

1.页面载入 ready(fn) 2.事件处理 bind,one,trigger,triggerHandler,unbind 3.事件委派 live,die 4.事件切换...

编辑:服务器运维 本文来源:4.事件切换 hover,也可以在同一个页面中无限次地

关键词: