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