zoukankan      html  css  js  c++  java
  • jQuery学习教程(八):事件

    绑定事件

    jQuery绑定事件方法:

    bind(type[,data],fn)//type: 事件类型;data:作为event.data传递给对象的参数;fn:绑定的处理函数

    示例,在《锋利的jQuery》一书中讲到了这个例子:

    $(function(){  
    	$("#panel h5.head").bind("click",function(){  
    		if($(this).next("div.content").is(":visiable")){  
    			$(this).next("div.content").hide();  
    		}else{ 
    			$(this).next("div.content").show();  
    		}  
    	});  
    });
    

      

    该例子是用来实现点击上面文字隐藏或显示下面文字,经过测试发现只能显示无法隐藏。可能是上面的$(this)函数默认为匿名函数指向的是$(this).next("div.content")了。因此经过改进后的函数修正此bug

    $(function(){  
    	$("#panel h5.head").bind("click",function(){  
    		var $content = $(this).next("div.content"); 
    		if($content.is(":visible")){  
    			$content.hide(); 
    		}else{ 
    			$content.show(); 
    		}  
    	})  
    });
    

    以上代码可简写:

    $("#panel h5.head").click(function(){  
    	var $content=$(this).next("div.content"); 
    	if($content.is(":visible")){  
    		$content.hide(); 
    	}else{  
    		$content.show(); 
    	}  
    }
    

    针对使用频繁的onmouseover,onmouseout,jQuery使用了合成事件的方法:

    hover(enter,leave)方法//模拟光标悬停事件,光标移动到 元素上触发enter函数,移出元素时触发leave函数。

    <script type="text/javascript"> 
    	$(function(){  
    		$("#source").hover(function(){  
    		$("#pointer").text("移入光标");},function(){  
    		$("#pointer").text("移出光标");});  
    	})
    </script>
    <div id="source"></div> 
    <div id="pointer"></div>
    

      

    toggle(fc1,fc2,fc3,fc4,…)//该 函数实现模拟鼠标连续单击事件,依次触发fn1,fn2,fn3,fn4……。(一般应用不多)

    事件冒泡与事件捕获

    事件冒泡:一种很形象的说法;事件会按照DOM的层次结构像水泡一样不断向上直到顶端。

    事件捕获:与事件冒泡相反,从最顶端往下触发。

    事件解除绑定

    删除元素的注册事件,ie中的detachEvent,ff中的removeEventListener中。

    $("#btn").click(function(){  
    	 alert("点击"); 
    	 $(this).unbind(); 
    });
    

    模拟操作

    trigger(event)//触发事件

    trigger可为元素一次性绑定多个事件。

    $("#btn").bind("mouseover mouseout",function(){ 
    	$(this).toggleClass("over");  
    });
    

      

  • 相关阅读:
    3n+1问题
    判断x的m次方和y的m次方末尾三位数是否相等
    OpenJudge 计算概论1007:点评赛车
    整数划分问题【转】
    证明:平面内有5个整点,必有两个点连线的中点为整点【本资源整理自网络】
    欧几里德算法的证明
    导出本地和远程SVN项目, Export remote SVN repository
    Centos7的firewalld配置
    ESXi5.5下的Centos7虚机配置静态IP
    Dubbo消费端错误: ClassNotFoundException: org.apache.zookeeper.proto.WatcherEvent
  • 原文地址:https://www.cnblogs.com/rmbteam/p/2113456.html
Copyright © 2011-2022 走看看