JAVA-HTML——jQuery之事件绑定方式

事件处理

bind(type,[data],fn)

为每个匹配元素的特定事件绑定对应的事件处理函数，各参数含义如下：
1、type表示事件类型，多个事件类型使用空格分隔；
2、data表示传递给绑定函数的额外数据对象，函数中使用event.data接收（了解）；
3、fn表示绑定的函数；
eg：

<script>
			$("a").bind("click",function(){
				console.log("输出成功");
			})
</script>
<a href="http://www.baidu.com" target="_blank">百度一下，你就知道</a>

不同事件对应函数格式不一样，可多次绑定
eg：

<script>
			$("a").bind({
				mouseover:function(){
					$("span").css("color","#00FFFF");
				},mouseout:function(){
					$("span").css("color","red");
				}
			})
</script>
<a href="http://www.baidu.com" target="_blank">百度一下，你就知道</a>
<span>河南</span>
<span>北京</span>
<span>上海</span>

运行结果：

unbind(type,[data|fn]])

删除每个匹配的元素上已绑定的事件，如果没有参数，则删除该元素上绑定的所有事件，例子如下：
eg：

<script>
			$("a").bind("click",function(){
				console.log("输出成功");
			})
			$("a").bind({
				mouseover:function(){
					$("span").css("color","#00FFFF");
				},mouseout:function(){
					$("span").css("color","red");
				}
			})
			$("a").unbind();
</script>
<a href="http://www.baidu.com" target="_blank">百度一下，你就知道</a>
<span>河南</span>
<span>北京</span>
<span>上海</span>

one(type,[data],fn)

该方法可以为元素绑定处理函数，当处理函数触发一次后, 立即被删除，即在每个对象上, 事件处理函数只会被执行一次。

<script>
			$("a").one("click",function(){
				console.log("helloworld")
			})
</script>
<a href="http://www.baidu.com" target="_blank">百度一下，你就知道</a>

运行结果：

hover([over,]out)

over表示鼠标移到元素上触发的函数；out表示鼠标移出元素触发的函数（类似于mouseover和mouseout），如下例子：

<script>
			$("div").hover(function(){
				this.style.backgroundColor = "red";
			},function(){
				this.style.backgroundColor = "blue";
			});
</script>
		<div style="border: 1px solid aquamarine;">
			<span>河南</span>
			<span>北京</span>
			<span>上海</span>
		</div>

运行结果：

change([[data],fn])

文本框、密码框和文本域的值发生改变时或下拉列表选项发生变化时触发change 事件；

<script>
		$("select").change(function(){
//			var elements = this.options;//此为另一种获取值的方法
//			for (var i=0;i<elements.length;i++) {
//				var option = elements[i];
//				if(option.selected){
//					console.log(option.value);
//				}
//			}
			console.log($(this).val());
		})
</script>
		<select>
			<option>--请选择--</option>
			<option value="0">河南</option>
			<option value="1">北京</option>
			<option value="2">上海</option>
		</select>

运行结果：

keydown([[data],fn])

当键盘或按钮被按下时触发keydown事件，例子如下：

此时页面点击回车即可进行搜索