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 事件,该事件只适用于表单元素