jQuery事件绑定

jQuery中定义了许多事件绑定方法,大致可分为事件处理、事件切换、事件
一、bind(type,[data],fn):
为每个匹配元素的特定事件绑定对应的事件处理函数,各参数含义如下:
type表示事件类型,多个事件类型使用空格分隔;
data表示传递给绑定函数的额外数据对象,函数中使用event.data接收;
fn表示绑定的函数;
例子:

		<span style="border: 1px solid red;">郑州</span>
		<script>
			$("span").bind({
				mouseover: function(){
					$("span").css("color","red");
				},
				mouseout: function(){
					$("span").css("color","black");
				}
			});
		</script>

二、unbind(type,[data|fn]]):
删除每个匹配的元素上已绑定的事件,如果没有参数,则删除该元素上绑定的所有事件,例子如下:

			$("span").unbind("mouseover mouse out");

三、one(type,[data],fn):
该方法可以为元素绑定处理函数,当处理函数触发一次后, 立即被删除,即在每个对象上, 事件处理函数只会被执行一次。
例子:

			<input id="test" type="button" value="按钮"/>
		<script>
			$("#test").one("click", function(){
				console.log("11111");
			})
		</script>

四、trigger(type,[data]):
触发每一个匹配元素上某类事件,type表示一个或多个事件类型, data表示传入函数的数据,例子如下

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

五、事件切换:
hover([over,]out):
over表示鼠标移到元素上触发的函数;out表示鼠标移出元素触发的函数,如下例子:

		<script>
			<!--$("form").trigger("submit");-->
			$("div").hover(
			function(){
				this.style.backgroundColor="red";
			},
			function(){
				this.style.backgroundColor="black";
			});
		</script>

六、事件:
jQuery中定义了很多事件,其常用事件如下:
change([[data],fn]) :文本框、密码框和文本域的值发生改变时或下拉列表选项发生变化时触发change 事件;
click([[data],fn]) :鼠标点击匹配元素时触发click事件,例子如下:

		<select>
			<option value="">---请选择---</option>
			<option value="0">---北京---</option>
			<option value="1">---上海---</option>
			<option value="2">---天津---</option>
		</select>
		<script>
			$("select").change(function(){
				/*var obj = this.options;
				for (var i=1;i<obj.length;i++) {
					var option = obj[i];
					if(option.selected){
						console.log(option.value)
					}
					*/
				console.log($(this).val());
			})
		</script>

keydown([[data],fn]) :当键盘或按钮被按下时触发keydown事件
mouseout([[data],fn]) :鼠标从元素上移开时触发mouseout 事件;
mouseover([[data],fn]):鼠标位于元素上方时触发mouseover 事件;
submit([[data],fn]):提交表单时触发submit 事件,该事件只适用于表单元素

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值