Jquery的常用事件
2019-02-18 10:23:57 0 举报AI智能生成
web前端jquery常用事件总结
作者其他创作
大纲/内容
加载DOM
.ready()
将函数绑定到文档的就绪事件（当文档完成加载时）
jQuery事件绑定
.bind(type,[data],fn)
1.第一个参数是事件类型，常用的click，blur，hover等
2.多个事件类型可以通过将每个空格分隔开来一次绑定
3.我们可以通过传递事件类型/处理程序对的对象来同时绑定多个事件处理程序
2.多个事件类型可以通过将每个空格分隔开来一次绑定
3.我们可以通过传递事件类型/处理程序对的对象来同时绑定多个事件处理程序
$( "#foo" ).bind( "click", function() {
alert( "User clicked on 'foo.'" );
});
alert( "User clicked on 'foo.'" );
});
$( "#foo" ).bind( "mouseenter mouseleave", function() {
$( this ).toggleClass( "entered" );
});
$( this ).toggleClass( "entered" );
});
$( "#foo" ).bind({
click: function() {
// Do something on click
},
mouseenter: function() {
// Do something on mouseenter
}
});
click: function() {
// Do something on click
},
mouseenter: function() {
// Do something on mouseenter
}
});
第二个参数是可选参数，作为event.data属性值传递给事件对象的额外数据对象
第三个参数是用来绑定的处理函数
jquery移除事件
.unbind(type,fn)
第一个参数是事件类型
如果不写参数，移除所有的事件
$( "#foo" ).unbind();
第二个参数是将要移除的函数
$( "#foo").unbind( "click" ，function(){})
jquery的合成事件
hover事件
鼠标悬停事件 .hover（handlerIn，handlerOut）
将两个处理程序绑定到匹配的元素，当鼠标指针进入和离开元素时执行
hover事件是鼠标的mouseenter和mouseleave事件的实现
等价于：
$( selector ).mouseenter( handlerIn ).mouseleave( handlerOut );
$( selector ).mouseenter( handlerIn ).mouseleave( handlerOut );
事件对象的常见属性
e.type
获取事件的类型
e.target
获取事件发生的DOM对象
e.pageX和e.pageY
获取到光标相对于页面的x的坐标和y的坐标
e.which
该方法的作用是在鼠标单击事件中获取到鼠标的左、中、右键；在键盘事件中获取键盘的按键
事件冒泡
阻止事件冒泡
e.stopPropagation()方法
1.return false 在jQuery中是即阻止事件冒泡又阻止默认行为
2.jQuery不支持事件捕获
阻止默认行为
e.preventDefault()方法
鼠标事件
click
鼠标单击触发事件，参数可选（data,fn）
dblclick
双击触发 ，同上
mousedown()/up()
鼠标按下/弹起触发事件
mousemove()
鼠标移动事件
mouseover()/out()
鼠标移入/移出触发事件
鼠标指针穿过/离开被选元素或者当前元素的子元素，会触发事件
mouseenter()/leave()
鼠标进入/离开触发事件*
鼠标指针只在穿过/离开被选元素触发事件
focus()/blur()
鼠标聚焦/失去焦点触发事件（不支持冒泡）
keydown()/up
键盘按键按下/弹起触发
表单事件
change()
表单元素发生改变时触发事件
此事件仅限于<input>元素，<textarea>框和<select>元素
对于选择框，复选框和单选按钮，当用户使用鼠标进行选择时，会立即触发事件
但对于其他元素类型，事件将延迟到元素失去焦点
但对于其他元素类型，事件将延迟到元素失去焦点
select()
文本元素发生改变时触发事件
此事件仅限于input type类型为text和textarea表单元素
submit()
表单元素发生改变时触发事件
form表单有默认的submit行为，当对input type=submit按钮点击的时候会触发form的默认action行为，
此时可以调用 jquery的submit方法通过e.preventDefault()来阻止默认事件，这样我们就能动态的跟服务端来发送数据了
此时可以调用 jquery的submit方法通过e.preventDefault()来阻止默认事件，这样我们就能动态的跟服务端来发送数据了
收藏
0 条评论
下一页
