jQuery事件绑定（处理，委派，切换）
来源：互联网 发布：13年网络炒作事件 编辑：程序博客网 时间：2024/05/16 01:34
jQuery事件绑定（处理，委派，切换）
事件处理
bind(type ,fn) 给当前对象绑定一个事件。例如：A.bind(“click”, fn ); 类型：A.click( fn );
unbind(type ) 解绑bind绑定事件
one(type ,fn ) 给当前对象绑定一次事件。
on(events , fn) 提供绑定事件处理程序所需的所有功能。完成3个方法功能.bind(), .delegate(), 和 .live().
off(events) 解绑
trigger(type) 在每一个匹配的元素上触发某类事件。例如：A.trigger(“submit”) ,类似 A.submit();
triggerHandler(type) 在每一个匹配的元素上触发某类事件。但不会执行浏览器默认动作，也不会产生事件冒泡。
事件委派
live(type , fn) 绑定事件，之后动态添加同样的成员，也具有相同的事件。
die(type) 解绑事件
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</title> <script type="text/javascript" src="../js/jquery-1.8.3.js"></script> <script type="text/javascript"> $(function(){ //<input id="h01" type="button" value="1只能点击一次，之后失效" /> $("#h01").one("click",function(){ alert("只能点我一次"); }); //<input id="h02" type="button" value="2可以点击多次" /> //绑定多个事件时，都执行 //为了只解绑特定事件，使用事件别名 $("#h02").bind("click.a",function(){ alert("可以多次执行"); }); $("#h02").bind("click.b",function(){ alert("可以多次执行222222222222"); }); //<input id="h03" type="button" value="3解绑2" /> //事件全部都会解绑 $("#h03").click(function(){ $("#h02").unbind("click.b"); }); //<input type="button" value="4 添加一个按钮，样式为myClass，且拥有相同的事件" class="myClass" /> $("#h04").live("click",function(){ //使用live添加的按钮h04自动具备相同的事件 $("body").append("<input type='button' id='h04'/>"); }); //<input id="h05" type="button" value="5 解绑4"/> $("#h05").click(function(){ $("#h04").die("click"); }); }); </script></head><body> <input id="h01" type="button" value="1只能点击一次，之后失效" /> <input id="h02" type="button" value="2可以点击多次" /> <input id="h03" type="button" value="3解绑2" /> <input id="h04" type="button" value="4 添加一个按钮，样式为myClass，且拥有相同的事件" class="myClass" /> <input id="h05" type="button" value="5 解绑4"/> </body></html>事件切换
hover(over , out)简化版，鼠标移入和移出 ，A.mouseover( fn ).mouseout( fn) 简化 A.hover( fn , fn )
toggle( fn , fn , fn ,…) 执行click事件，每点击一次执行一个fn
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</title> <style type="text/css"> #e02{ border: 1px solid #000000; height: 200px; width: 200px; } </style> <script type="text/javascript" src="../js/jquery-1.8.3.js"></script> <script type="text/javascript"> $(function(){ //在两个函数之间切换 $("#e01").toggle(function(){ alert("aa"); },function(){ alert("bb"); }); //在两个事件切换，代替了mouseover，mouseout $("#e02").hover(function(){ $("#divMsg").html("鼠标移入"); },function(){ $("#divMsg").html("鼠标移出"); }); }); </script></head><body> <input id="e01" type="text" /><span id="textMsg"></span> <br/> <hr/> <div id="e02" ></div><span id="divMsg"></span> <br/></body></html>事件案例1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>文字提示</title> <!-- 引入jQuery --> <script src="../js/jquery-1.8.3.js" type="text/javascript"></script><style type="text/css">body{ margin:0; padding:40px; background:#fff; font:80% Arial, Helvetica, sans-serif; color:#555; line-height:180%;}p{ clear:both; margin:0; padding:.5em 0;}/* tooltip */#tooltip{ position:absolute; border:1px solid #333; background:#f7f5d1; padding:1px; color:#333; display:none;}</style><script type="text/javascript"> $(function(){ //a标签的title属性就是在鼠标放上去的时候的提示 //手动生成提示，并显示 $(".mytooltip").mouseover(function(){ //因为各自都有自己的提示数据，所以使用数据绑定处理 //先得到绑定的数据 var temp = $(this).data("tishi");//第一次得到的是undefined---false if(!temp){ //绑定数据 temp = $(this).attr("title"); $(this).data("tishi",temp); $(this).removeAttr("title"); } //为了让div显示title内容 //var tt = $(this).attr("title"); //鼠标移入时，生成提示，再显示 var $div = $("<div id='tooltip'></div>"); $div.html(temp); //$(this).removeAttr("title"); //把div加入页面 $div.appendTo("body").show(); //设置提示现实的位置 $div.offset({"left":0,"top":0}); }).mouseout(function(){ $("#tooltip").remove(); }).mousemove(function(event){ //鼠标移动时，提示信息的位置也随着动 $("#tooltip").offset({"left":event.pageX,"top":event.pageY}); }); });</script></head><body><p><a href="#" class="mytooltip" title="这是我的超链接提示1.">提示1.</a></p><p><a href="#" class="mytooltip" title="这是我的超链接提示2.">提示2.</a></p><p><a href="#" title="这是自带提示1.">自带提示1.</a></p><p><a href="#" title="这是自带提示2.">自带提示2.</a> </p></body></html>事件案例2
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>图片提示</title> <!-- 引入jQuery --> <script src="../js/jquery-1.8.3.js" type="text/javascript"></script><style type="text/css">body{ margin:0; padding:40px; background:#fff; font:80% Arial, Helvetica, sans-serif; color:#555; line-height:180%;}img{border:none;}ul,li{ margin:0; padding:0;}li{ list-style:none; float:left; display:inline; margin-right:10px; border:1px solid #AAAAAA;}/* tooltip */#tooltip{ position:absolute; border:1px solid #ccc; background:#333; padding:2px; display:none; color:#fff;}</style><script type="text/javascript"> $(function(){ var x = 10; var y = 20; var href; $("a[class=tooltip]").mouseover(function(e){ //1 获取对应标签的自带提示 //var title = $("a[class=tooltip]").attr("title"); //this代表的是DOM对象(页面中的元素) href = this.href; //删除自带提示 this.href = ""; //2 创建标签用于自定义提示 var $div = $("<div id='tooltip'><img src='"+href+"'></img></div>"); //3 将自定义提示的标签，添加到body标签下 $("body").append($div); //4 如何调整显示位置(相对鼠标的坐标值:e.pageX和e.pageY) $("#tooltip").css({ "top" : e.pageY + y + "px", "left" : e.pageX + x + "px" }).show(1000); }).mouseout(function(){ this.href = href; $("#tooltip").remove(); }).mousemove(function(e){ $("#tooltip").css({ "top" : e.pageY + y + "px", "left" : e.pageX + x + "px" }); }); });</script></head><body><h3>有效果：</h3> <ul> <li><a href="images/apple_1_bigger.jpg" class="tooltip" title="苹果 iPod"><img src="images/apple_1.jpg" alt="苹果 iPod" /></a></li> <li><a href="images/apple_2_bigger.jpg" class="tooltip" title="苹果 iPod nano"><img src="images/apple_2.jpg" alt="苹果 iPod nano"/></a></li> <li><a href="images/apple_3_bigger.jpg" class="tooltip" title="苹果 iPhone"><img src="images/apple_3.jpg" alt="苹果 iPhone"/></a></li> <li><a href="images/apple_4_bigger.jpg" class="tooltip" title="苹果 Mac"><img src="images/apple_4.jpg" alt="苹果 Mac"/></a></li> </ul><br/><br/><br/><br/><br/><br/><br/><br/><h3>无效果：</h3><ul> <li><a href="images/apple_1_bigger.jpg" title="苹果 iPod"><img src="images/apple_1.jpg" alt="苹果 iPod" /></a></li> <li><a href="images/apple_2_bigger.jpg" title="苹果 iPod nano"><img src="images/apple_2.jpg" alt="苹果 iPod nano"/></a></li> <li><a href="images/apple_3_bigger.jpg" title="苹果 iPhone"><img src="images/apple_3.jpg" alt="苹果 iPhone"/></a></li> <li><a href="images/apple_4_bigger.jpg" title="苹果 Mac"><img src="images/apple_4.jpg" alt="苹果 Mac"/></a></li> </ul></body></html> 1 0
- jQuery事件绑定（处理，委派，切换）
- JQuery事件处理，事件委派，事件切换
- jquery之事件切换，事件处理，事件委派
- jQuery事件委派一次绑定多种事件
- jquery 中 live事件委派 与 bind事件绑定
- jquery事件委派
- radio 切换效果 -JQuery绑定事件.bind() 绑定radio值
- jquery事件的切换，和多个事件的绑定
- jQuery-bind不能处理绑定hover事件
- JQuery处理绑定多个button事件
- Jquery使用on()绑定事件失效处理
- jquery绑定事件-bind（）
- jQuery 事件绑定（新版本）
- jQuery事件绑定（一）
- jQuery事件绑定（二）
- jQuery事件绑定（三）
- Jquery 动态事件绑定（.live()事件）
- jquery之jquery事件处理模型(利用jquery绑定事件处理程序)
- Node.js 学习过程总结(一)
- eclipse中debug断点上有一个斜杠是什么
- 杭电2549 壮志难酬
- maven pom文件详解
- Python列表操作（list）
- jQuery事件绑定（处理，委派，切换）
- 面向对象的特征
- 【JavaEE—Hibernate】Hibernate概述
- 共享内存 进程间通信
- python中如何理解装饰器
- 获取视频的缩略图
- SequelizeAccessDeniedError的原因和解决方式
- c++中 strchr strrchr wcsrchr _tcsrchr 字符串操作
- lintcode,编辑距离
