jQuery绑定事件的三种常见方式（bind、one、【change、click、keydown、hover】）

一、bind(type,[data],fn)：为每个匹配元素的特定事件绑定对应的事件处理函数。

也可以同时给一个元素绑定多个事件，我们来看一下例子：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><script type="text/javascript" src="js/jquery-1.8.3.js" ></script></head><body><div id="bd">百度</div><script>$("#bd").bind("mouseover":function(){$(this).css("backgroundColor","red");}"mouseout": function(){$(this).css("backgroundColor","green");});</script></body>
</html>

有bind（绑定事件），就有unbind（解除事件），

//删除元素中已绑定的事件，若有多个参数，则参数之间用空格隔开，若没有参数，就直接删除该元素所有绑定的事件。
$("#bd").unbind("mouseover mouseout");

二、one(type,[data],fn)：该方法与bind()方法执行方式和效果一模一样，唯一不同的就是bind()可以无限次执行，只要触发事件，就执行一次。而one()触发事件，仅仅执行一次，以后再触发该事件，也不再执行了。（one()多用于提交表单上，防止用户心急多次按提交键，重复向服务区发送请求，导致服务器的压力过大）

三、change、click、keydown

3.1 change[[data],fin]：文本框、密码框、文本域的值发生改变时或下拉列表选项发生改变时触发change事件：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><script type="text/javascript" src="js/jquery-1.8.3.js" ></script></head><body>//文本框<input type="text" name="text" id="text" placeholder="请输入" /><script>//当文本框中的值改变时，边框宽度变为10px$("[name='text']").change(function(){$(this).css("border-width","10px")});</script>//下拉列表<select id="province"><option value="">请选择</option><option value="001">北京市</option><option value="002">湖北省</option><option value="003">河南省</option></select><script>console.log(this);          $("select").change(function(){//通过JavaScript对象来获取下拉选项的value值var array = this.options;for(var i = 0; i< array.length; i++){var option = array[i];if(option.selected){console.log(option.value);}}//直接通过jQuery来获取相应下拉项的value值console.log($(this).val())});</script></body>
</html>

3.2 click([[data],fn])：鼠标点击匹配元素时触发click事件

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><script type="text/javascript" src="js/jquery-1.8.3.js" ></script></head><body><div id="bd">百度</div><script>$("#bd").click(function(){console.log(1111);});</script></body>
</html>

3.3 keydown([[data],fn])：当键盘或按钮被按下时触发keydown事件。

//window指代整个窗口，keydown是按下指定键时触发方法，
//参数event是按下指定键时传过来的值
//enter键对应的值是13
$(window).keydown(function(event){if(event.keyCode==13){console.log("enter");}
});

3.4 hover([over],out)：over表示鼠标移到元素上触发的函数；out表示鼠标移出元素触发的函数。

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><script type="text/javascript" src="js/jquery-1.8.3.js" ></script></head><body><div id="bd">百度</div><script>$("div").hover(function(){//移入时背景变红this.style.backgroundColor="red";},function(){//移出时背景变绿this.style.backgroundColor="green";});</script></body>
</html>

jQuery绑定事件的三种常见方式（bind、one、【change、click、keydown、hover】）相关推荐

updatepanel失效怎么办_【点滴积累】解决jQuery绑定事件在updatepanel更新后失效的方法...
背景接到了领导给的一个New Feature,为系统的菜单导航栏进行一些个性化的操作(鼠标移到导航菜单时下方出现子菜单,移到其他的菜单选项时显示该选项的子菜单,隐藏其他子菜单.其次就是当使用鼠标点击 ...
android如何绑定事件,Android_安卓为按钮控件绑定事件的五种方式
一.写在最前面本次,来介绍一下安卓中为控件--Button绑定事件的五种方式. 二.具体的实现第一种:直接绑定在Button控件上: 步骤1.在Button控件上设置android:onClick ...
Android_安卓为按钮控件绑定事件的五种方式
写在最前面本次,来介绍一下安卓中为控件--Button绑定事件的五种方式. 二.具体的实现第一种:直接绑定在Button控件上: 步骤1.在Button控件上设置android:onClick=& ...
50 jQuery绑定事件阻止默认事件发生内置动画 each data
主要内容 1 阻止后续事件继续执行 return false: 常用于表单提交 event.preventDefault : 阻止默认事件发生 <body> <form acti ...
java c 事件对比_javacsript绑定事件的三种方式与各自特点
javacsript绑定事件的三种方式与各自特点 javacsript绑定事件的三种方式与各自特点点击打开链接 javacsript绑定事件的三种方式与各自特点 feipeng8848 2017-0 ...
打开桌面计算机投屏到扩展屏,苹果电脑投屏到显示器的三种常见方式
苹果电脑投屏到显示器的三种常见方式 AWIND奇机无线投屏器作为专业的跨屏设备,在"商教领域"备受用户青睐.对于AWIND奇机无线投屏器来说,苹果电脑投屏到显示器[投影机.电视机. ...
Mac电脑投屏到Linux,苹果电脑投屏到显示器的三种常见方式
苹果电脑投屏到显示器的三种常见方式 AWIND奇机无线投屏器作为专业的跨屏设备,在"商教领域"备受用户青睐.对于AWIND奇机无线投屏器来说,苹果电脑投屏到显示器[投影机.电视机. ...
Jquery绑定事件（bind和live的区别）[转]
Jquery中绑定事件有三种方法:以click事件为例 (1)target.click(function(){}); (2)target.bind("click",function ...
jQuery绑定事件监听bind和移除事件监听unbind用法实例详解
这里分别采用后bind(eventType,[data],Listener)//data为可选参数,one()该方法绑定的事件触发一次后自动删除,unbind(eventType,Listener), ...

jQuery绑定事件的三种常见方式（bind、one、【change、click、keydown、hover】）

jQuery绑定事件的三种常见方式（bind、one、【change、click、keydown、hover】）相关推荐

最新文章

热门文章