映射方式绑定不同的事件
2013-10-27 14:00
302 查看
<!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" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>映射方式绑定不同的事件</title> <style> body{font-size: 13px;} .clsTip{border: solid 1px #ccc;background-color: #eee;margin-top: 15px;padding: 5px;width: 185px;display: none;} .txt{border: solid 1px #666;padding: 3px;} </style> <script src="jquery.js"></script> <script> $(function(){ $(".txt").bind({focus:function(){ $("#divTip") .show() //显示 .html("执行的是focus事件"); //设置文本 },change:function(){ $("#divTip") .show() //显示 .html("执行的是change事件"); //设置文本 }}) }) </script> </head> <body> <h3>功能描述:</h3> <p>在页面中,设置一个文本框,通过映射的方式,给文本框绑定两个事件</p> <p>一个是focus事件,另一个是change事件。这两个事件执行时,均为显示事件的名称</p> <div>姓名:<input type="text" class="txt" /></div> <div id="divTip" class="clsTip"></div> </body> </html>
结果如下所示:
在方法bind()中,第二个参数data为可选项,表示作为event.data属性值传递到事件对象的额外数据对象。实际上,该参数很少使用,如果使用,那么可以通过该参数将一些附加的信息传递给事件处理函数fn中,将上面代码中的bind方法修改为带data参数,其修改后的代码如下:
$(function(){ var message="执行的是focus事件"; $(".txt").bind("focus",{msg:message},function(event){ $("#divTip") .show() //显示 .html(event.data.msg); //设置文本 }); message="执行的是change事件"; $(".txt").bind("change",{msg:message},function(event){ $("#divTip") .show() //显示 .html(event.data.msg); //设置文本 }); })
执行后,页面效果跟上面一样。
相关文章推荐
- JQuery入门――用映射方式绑定不同事件应用示例
- JQuery入门――用映射方式绑定不同事件应用示例
- 映射方式绑定不同的事件 4-3
- 映射方式绑定不同的事件 4-3
- JQuery入门——用映射方式绑定不同事件
- jquery中不同方式绑定事件后的解绑方法
- jQuery绑定事件的四种方式
- HTML中绑定点击事件的方式
- JavaScript中利用jQuery绑定事件的几种方式小结
- Javascript(jQuery)中绑定页面上所有按钮点击事件的几种方式
- 【js】【事件驱动】【Dom元素节对象点绑定事件的3种方式】
- Jquery使用代理的方式绑定控件事件
- 【jquery】jquery绑定事件的方式 bind() delegate() live()以及on()
- 用js给div绑定事件,实现点击切换效果的几种方式总结
- javascript事件委托的方式绑定详解
- jquery解除hover事件的绑定方式
- js 函数定义的两种方式以及事件绑定(扫盲)
- jQuery四种事件绑定方式.bind(),.live(),.delegate(),on()的区别
- jQuery绑定事件的四种方式
- Javascript事件绑定的几种方式