4、事件

● 通过方法名给元素绑定事件：

$('li').click(function(event){})

● 通过bind方法给元素绑定事件：

$('li')



    .bind('click',function(event){})



    .bind('click',function(event){})

可见，通过bind，可以给元素绑定多个事件。

● 事件的命名空间

为什么需要事件命名空间？

→假设，先给li元素绑定2个click事件。

$('li')



    .bind('click',function(event){})



    .bind('click',function(event){})

→现在我们要把其中一个click事件注销掉，可能这样写：

$('li').unbind('click')

但这样，我们li所有的click事件都注销了，这不是我们想要的。使用事件命名空间可解决这一问题，之所以需要事件命名空间，是因为它为我们在注销事件的时候提供了方便。

如何使用事件命名空间？
→在为元素绑定事件的时候，在事件名称后加上命名空间，符合格式：事件名称.命名空间名称。

$('li')



    .bind('click.editMode',function(event){})



    .bind('click.displayMode',function(event){})

→在注销事件的时候，可以这样写：

$('li').unbind('click.editMode')

● 事件的种类
blur
change
click
dblclick
error
focus
focusin
focusout
keydown
keypress
keyup
load
mousedown
mouseenter
mouseleave
mousemove
mouseout
moseover
mouseup
ready
resize
scroll
select
submit
unload

● one方法

用于创建一次性事件，一旦这个事件执行了一次后，就会被自动删除。



$("p").one("click",function(){



    $(this).animate({fontSize: "+=6px"});



})

● 删除事件

//先给元素添加事件



$("p").click(function(){



    $(this).slideToggle();



})





//再把元素的事件删除



$("button").click(function(){



    $("p").unbind();



})







● Event属性


实际上，它是jquery的全局属性，jQuery.Event。每当触发事件，Event对象实例就会被传递给Event Handler。


可以通过Event的构造函数来创建事件，并触发事件。


var e = jQueery.Event("click")



jQuery("body").trigger(e);




甚至可以通过构造函数，把一个匿名对象放在Event中传递。


var e = jQuery.Event("keydown", {keyCode : 64});



jQuery("body").trigger(e);




使用的时候，通过event.data.KeyCode来获取匿名对象的值。


可以通过jQuery.Event的构造函数把匿名对象放在Event中传递，不仅如此，通过事件也可以传递匿名对象。


$("p").click({param1 : "Hello", param2 : "World"}, someFunction);





function someFunction(event){



    alert(event.data.param1);



    alert(event.data.param2);



}







可见，通过event.data可以获取匿名对象的键。


通过Event对象实例，还可以拿到其它方面的信息，比如：


$("p").click(function(event){



    alert(event.target.nodeName);



})




以上，通过event.target.nodeName获取触发事件的元素名称。


jQuery.Event的其它属性包括：


altKey 如果alt键按下就为true，在Mac键盘中alt键标记为Option
ctrKey ctrl键被按下
shiftKey Shift键被按下
currentTarget 冒泡阶段的当前元素
data
metaKey 一般Meta键是Ctrl，而Mac上是Command键
pageX 鼠标事件时光标相对于页面原点的水平坐标
pageY 鼠标事件时光标相对于页面原点的垂直坐标
relatedTarget 触发鼠标事件时光标离开或进入的元素
screenX 鼠标事件时光标相对于屏幕原点的水平坐标
screenY 鼠标事件时光标相对于屏幕原点的垂直坐标
result 从前面的事件处理器返回最近非undefined的值
target 触发事件的元素
timestamp jQuery.Event创建实例时的时间戳，以毫秒为单位
type 事件类型，比如click
which 如果是键盘事件，代表按键的数字，如果是鼠标事件，记录按下的是左键、中键或右键


● Event方法


event.preventDefault()阻止默认行为
event.stopPropgation()停止"冒泡"，即停止沿着DOM向上进一步传播
event.stopImmediatePropagation()停止所有事件的进一步传播
event.isDefaultPrevented()
event.isPropgationStopped()
isImmediatePropgagationStopped()


● live方法和on方法


该方法允许我们为还不存在的元素创建事件。与bind方法不同的是：能为所有匹配的元素绑定事件，设置是那些暂时还不存在、需要动态创建的元素。而且，live方法不一定要放在$(function(){})就绪处理器中。到了 jQuery 1.7以后，就改为on方法了。


$("p").on("click", function(){



    alert("hello");



})




如果想取消注册事件。


$("button").click(function(){



    $("p").off("click");



})




● trigger方法


当我们想手动触发元素绑定的事件时可以使用trigger方法。


$("#foo").on("click",function(){



    alert($(this).text());



})



$("#foo").trigger("click");




还可以在绑定事件的时候出传入形参，在trigger事件的时候传入实参。


$("#foo").on("custom", function(event, param1, param2){



    alert(param1 + "\n" + param2)



})



$("#foo").trigger("custom",["Custom","Event"]);




trigger触发由jQuery.Event创建的实例。


var event = jQuery.Event("logged");



event.user = "foo";



event.pass = "bar";



$("body").trigger(event);




甚至可以在trigger触发方法的时候传入匿名对象。


$("body").trigger({



    type: "logged",



    user: "foo",



    pass: "bar"



});




如果想停止触发事件的传播，可通过jQuery.Event实例的stopPropgation()方法，或在任何事件中返回false。


● triggerHandler方法


triggerHandler方法与trigger方法的不同之处在于：triggerHandler方法不会执行元素的默认事件，也不会"冒泡"。


//给一个元素绑定一个focus事件



$("input").focus(function(){



    $("<span>Focused</span>").appendTo("#id").fadeOut(1000);



})





//用triggerHandler触发



$("#id").click(function(){



    $("input").triggerHandler("focus");//不会触发focus的默认行为，即进入文本框



})





//用trigger触发



$("#id").click(function(){



    $("input").trigger("focus");//同时触发foucs的默认行为和绑定行为



})







● 事件冒泡和事件委托


什么是事件冒泡？


有这么一段代码。


<!DOCTYPE html>



<html xmlns="http://www.w3.org/1999/xhtml">



<body>



    <div>



        <p><a href="#foo"><span>I am a Link!</span></a></p>



        <p><a href="#bar"><b><i>I am another Link!</i></b></a></p>



    </div>



</body>



</html>




现在，给该页面所有的元素绑定click事件，包括window和document。


        $(function () {





            $('*').add([document, window]).on('click', function(event) {



                event.preventDefault();



                console.log(this);



            });



        });







当单击页面任何元素，单击事件会从当前元素开始，向上一级元素传播，直到最顶级元素，这里是window。


如何阻止事件冒泡？


显然，通常只希望在某个特定元素发生特定的事件，不希望事件冒泡的发生。这时候我们可以针对某个特定元素绑定事件。


        $(function () {



            $('a').on('click', function(event) {



                event.preventDefault();



                console.log($(this).attr('href'));



            });



        });




以上，只为a绑定了click事件，无它。


如何有效利用事件冒泡？


在jquery中，事件委托却很好地利用了事件冒泡。


<html>



<body>



<div id="container">



    <ul id="list">



        <li><a href="http://domain1.com">Item #1</a></li>



        <li><a href="/local/path/1">Item #2</a></li>



        <li><a href="/local/path/2">Item #3</a></li>



        <li><a href="http://domain4.com">Item #4</a></li>



    </ul>



</div>



</body>



</html>




现在，我们想给现有li中的a标签绑定事件，这样写：


$( "#list a" ).on( "click", function( event ) {



    event.preventDefault();



    console.log( $( this ).text() );



});




但是，如果又在现有的ul中添加新的li和a，那情况又如何呢？


$( "#list" ).append( "<li><a href='http://newdomain.com'>Item #5</a></li>" );




结果，点击新添加的li中的a，什么都没有发生。那么，如何为动态添加的元素绑定事件呢？


如果我们能把事件绑定到a的父级元素，那在父级元素内生成的子级动态元素，也会有绑定事件的行为。


$( "#list" ).on( "click", "a", function( event ) {



    event.preventDefault();



    console.log( $( this ).text() );



});




以上，我们把click事件绑定到a的父级元素id为list的ul上，on方法中的第二个参数，这里是a，是事件真正的执行者。具体过程如下：
→点击某个a标签
→根据事件冒泡，触发了a的父级元素ul的click事件
→而事件真正的执行者是a


事件委托允许我们把事件绑定到父级元素，这相当于给所有的子级元素绑定了事件，不管这个子级元素是静态的、还是动态添加的。


● toggle方法


允许我们依次执行多个事件，当执行完最后一个事件后，再执行第一个事件。


$('img[src*=small]').toggle({



    function(){},



    function(){},



    function(){}



});




● mouseenter和mouseleave方法


$(element).mouseenter(function(){}).mouseleave(function(){})




● hover方法


$("p").hover(function(){



  $("p").css("background-color","yellow");



  },function(){



  $("p").css("background-color","pink");



});




参考资料：
jQuery实战(第二版)    
Events and Event Delegation
What does “event bubbling” mean?


jQuery碎语系列包括：


jQuery碎语(1) 基础、选择要操作的元素、处理DOM元素


jQuery碎语(2) 事件


jQuery碎语(3) 动画特效


jQuery碎语(4) 实用函数
												


											
jQuery碎语(2) 事件的更多相关文章
	

    
								
  1. jQuery碎语(4) 实用函数
		
    6.实用函数 ● 修剪字符串 $('#id').val($.trim($('#someid').val())) ● 遍历集合 可能这样写: var anArray = ['one','two']; f ...
    
		
    2. 
						
  2. jQuery碎语(3) 动画特效
		
    5.动画特效 ● 自制折叠内容块 内容块如下 <div class="module"> <div class="caption"> &l ...
    
		
    3. 
						
  3. jQuery碎语(1) 基础、选择要操作的元素、处理DOM元素
		
    1.基础 jquery对象集: $():jquery对象集合 获取jquery对象集中的元素: 使用索引获取包装器中的javascript元素:var temp = $('img[alt]')[0]  ...
    
		
    4. 
						
  4. jQuery中的事件绑定方法
		
    在jQuery中,事件绑定方法大致有四种:bind(),live(), delegate(),和on(). 那么在工作中应该如何选择呢?首先要了解四种方法的区别和各自的特点. 在了解这些之前,首先要知 ...
    
		
    5. 
						
  5. jQuery：详解jQuery中的事件（二）
		
    上一篇讲到jQuery中的事件,深入学习了加载DOM和事件绑定的相关知识,这篇主要深入讨论jQuery事件中的合成事件.事件冒泡和事件移除等内容. 接上篇jQuery:详解jQuery中的事件(一)  ...
    
		
    6. 
						
  6. jQuery：详解jQuery中的事件（一）
		
    之前用过一些jQuery的动画和特效,但是用到的部分也不超过10%的样子,感觉好浪费啊——当然浪费的不是jQuery,而是Web资源.后来就想深入研究下jQuery的内部机理,读过两遍jQuery源代 ...
    
		
    7. 
						
  7. jquery on 绑定事件
		
    jquery on 绑定事件 1. 多个选择器绑定一个事件 2. 多个事件绑定一个函数 3. 一个选择器绑定多个事件,有两种写法: 或者 on只绑定一次事件,绑定父元素,防止初始化时数据未加载,绑定出 ...
    
		
    8. 
						
  8. jQuery学习笔记（三）jQuery中的事件
		
    目录 加载DOM 事件绑定 合成事件 事件冒泡 移除事件 一．加载DOM Javascript 与HTML之间的交互是通过用户操作浏览器页面引发的事件来处理的.jQuery提供了丰富的事件处理机制.从 ...
    
		
    9. 
						
  9. jQuery原生框架-----------------事件
		
    jQuery.extend({ // 绑定事件 addEvent: function( ele, type, fn ) { // ele不是DOM,type不是字符串,fn不是函数,打包打走 if(  ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. Centos之其他帮助命令
			
    选项帮助 命令 -help 获取命令选项的帮助 例如 ls --help 我们会发现用这种方式查看帮助命令 居然还有中文解释: 详细命令帮助info info 命令 -回车:进入子帮助页面(带有*号标 ...
    
			
    2. 
						
  2. Centos之链接命令
			
    链接命令:ln  (link) ln -s [源文件] [目标文件] 功能描述:生成链接文件 选项: -s 创建软链接 硬链接特征: 1,拥有相同的i节点和存储block块,可以看作是同一个文件: 2 ...
    
			
    3. 
						
  3. Oracle学习笔记：decode函数
			
    decode函数主要作用:将查询结果翻译成其他值(即以其他形式变现出来) 使用方法: SELECT DECODE(colunm_name,值1,翻译值1,值2,翻译值2……值n,翻译值n,缺省值) F ...
    
			
    4. 
						
  4. CVE-2013-2729 Adobe Reader和Acrobat 数字错误漏洞
			
    这个洞是在论坛里看到的,感觉很有意思,来学习一下.个人感觉IE或者说是浏览器的洞和Adobe洞都是比较难调的,主要是有大量的类难以摸清之间的关系. 这个洞是一个整数溢出的洞,这个不是重点.重点是利用的 ...
    
			
    5. 
						
  5. 20165333 实验二 Java面向对象程序设计
			
    姓名:陈国超 学号:20165333 班级:1653 实验课程:JAVA程序设计 实验名称:Java面向对象程序设计 实验时间:2018.4.14 指导老师:娄家鹏 实验内容及步骤 (一) " ...
    
			
    6. 
						
  6. 【Codechef】Random Number Generator（多项式除法）
			
    题解 前置技能 1.多项式求逆 求\(f(x)\*g(x) \equiv 1 \pmod {x^{t}}\) 我们在t == 1时,有\(f[0] = frac{1}{g[0]}\) 之后呢,我们倍增 ...
    
			
    7. 
						
  7. Web_add_cookie的作用
			
    1. Web_add_cookie的作用:保存Server传过来的cookie,以后的访问都会基于此cookie,直到脚本的结束. 2. 关联:服务器端返回给客户端一些动态变化的值,客户端使用这些值去 ...
    
			
    8. 
						
  8. NetCore+Dapper WebApi架构搭建（二）：底层封装
			
    看下我们上一节搭建的架构,现在开始从事底层的封装 1.首先需要一个实体的接口IEntity namespace Dinner.Dapper { public interface IEntity< ...
    
			
    9. 
						
  9. poj2676(数独)
			
    也是一个简单剪枝的dfs.记录所有为0的位置,依次填写,当发现某个空格可选的填写数字已经没有时,说明该支路无效,剪掉. 不算是一个难题吧,但是还是花了不少时间,问题主要出在细节上,行列坐标反了.3乘3 ...
    
			
    10. 
						
  10. 简单介绍下python中函数的基础语法
			
    python 函数 定义 函数是指将一组语句的集合通过一个名字(函数名)封装起来,要想执行这个函数,只需调用其函数名即可. 特性 减少代码重复 使程序变得可扩展 使程序变得易于维护 函数的创建 pyt ...
    
			
    11.