JQuery事件
第一章:鼠标事件
1. .click( )
鼠标点击事件
ele.click(function( ){
})
click事件其实是由mousedown于mouseup 2个动作构成，所以点击的动作只有在松手后才触发
例1:
<div id="test">点击触发<div>
$("#test").click(function() {
//this指向 div元素
});
2. .dbclick( )
鼠标双击事件,语法与.click( )相同
与click( ) 的区别,类似于由俩个click( )事件组成,中间间隔的时间由系统设定
3. .mousedown( )
监听用户鼠标按下的操作
例1:
<div id="test">点击触发<div>
$("#test").mousedown(function() {
//this指向 div元素
});
4. .mouseup( )
监听用户鼠标抬起时的操作
5. .mousemove( )
监听用户鼠标移动时的操作
6. .mouseover( )
监听用户鼠标移入时的操作(冒泡)
#绑定的元素触发了mouseover事件后,它会一直向上找父级元素的mouseover事件,如果父级元素也有mouseover事件则会被触发
7. .mouseout( )
监听用户鼠标移出时的操作(冒泡)
8. .mouseenter( )
监听用户鼠标移入时的操作(不冒泡)
# .mouseenter事件只会在绑定它的元素上被调用，而不会在后代节点上被触发
9. .mouseleave( )
监听用户鼠标移出时的操作(不冒泡)
10. .hover( )
$(selector).hover(handlerIn, handlerOut)
在元素上移入移出,打到mouseenter 和 mouseleave 同时使用的效果
参数:
- handlerIn(eventObject)：当鼠标指针进入元素时触发执行的事件函数
- handlerOut(eventObject)：当鼠标指针离开元素时触发执行的事件函数
例1:
$("p").hover( // hover()方法是同时绑定 mouseenter和 mouseleave事件
function() {
$(this).css("background", 'red'); // 我们可以用它来简单地应用在 鼠标在元素上行为
},
function() {
$(this).css("background", '#bbffaa');
}
);
第二章: 表单事件
1. .focusin( )
当一个元素，或者其内部任何一个元素获得焦点的时候，比如input元素，用户在点击失去焦的时候，如果开发者需要捕获这个动作
冒泡
方法一: $ele.focusin( handler )
参数: handler 回调函数
方法二: $ele.focusin( [eventData ], handler )
参数: eventData 数据参数 handler 回调函数
<div id="test">点击触发<div>
$("#test").focusin(function() {
//this指向 div元素
});
2. .focusout( )
当一个元素，或者其内部任何一个元素失去焦点的时候，比如input元素，用户在点击失去焦的时候，如果开发者需要捕获这个动作
用法与focusin( ) 相同,冒泡
3. .focus( )
focusin( )的不冒泡版
4. .blur( )
focusout( )的不冒泡版
5. .change( )
<input>元素，<textarea>和<select>元素的值都是可以发生改变的，开发者可以通过change事件去监听这些改变的动作
- <input> value( ) 元素发生改变时 ,失去焦点后发生
- <select> 当用户鼠标做出选择时,该事件立即触发
- <textarea> 当输入框中有发生改变时,失去焦点后发生
<select id = "target">
<option value="option1" selected="selected">Option 1</option>
<option value="option2">Option 2</option>
</select>
<div id = "result"></div>
$('#target').change(function(e){ //当选项框发生改变时,在div中输出被选中的选项的值
$('#result').html(e.target.value);
})
=> Option 2
6. .select( )
当 textarea 或文本类型的 input 元素中的文本被选择时，会发生 select 事件。
$ele.select(eventDate,handler(eventObject));
参数: eventDate 数据参数 handler(eventObject) 回调函数
//监听input元素中value的选中
//触发元素的select事件
$("input").select(function(e){
alert(e.target.value)
})
7. .submit( )
监听提交表单事件
$ele.submit( [eventData ], handler(eventObject) )
具体能触发submit事件的行为：
- <input type="submit">
- <input type="image">
- <button type="submit">
- 当某些表单元素获取焦点时，敲击Enter（回车键）
阻止默认行为:
传统的方式是调用事件对象 e.preventDefault() 来处理，
jQuery中可以直接在函数中最后结尾return false即可
例:
$("#target").submit(function(data) {
return false; //阻止默认行为，提交表单
});
第三章: 键盘事件
1. .keydown( )
当用户在一个元素上第一次按下键盘上字母键的时候，就会触发它
//直接绑定事件
$elem.keydown( handler(eventObject) )
//传递参数
$elem.keydown( [eventData ], handler(eventObject) )
//手动触发已绑定的事件
$elem.keydown()
2. .keyup( )
当用户在一个元素上第一次松手键盘上的键的时候，就会触发它。
使用方法与keydown是一致的只是触发的条件是方法的
3. keypess( )
当浏览器捕获键盘输入时,触发它
//监听键盘按键
//获取输入的值
$('.target1').keypress(function(e) {
$("em").text(e.target.value)
});
注:KeyPress主要用来接收字母、数字等ANSI字符，而 KeyDown 和 KeyUP 事件过程可以处理任何不被 KeyPress 识别的击键。诸如：功能键（F1-F12）、编辑键、定位键以及任何这些键和键盘换档键的组合等。
第四章: 事件的绑定与解绑
1. .on( )
给元素绑定事件
基本用法：.on( events ,[ selector ] ,[ data ] )
$("#elem").click(function(){}) //快捷方式
$("#elem").on('click',function(){}) //on方式
多个事件绑定同一函数
$("#elem").on("mouseover mouseout",function(){ });
多个事件绑定不同函数
$("#elem").on({
mouseover:function(){},
mouseout:function(){}
});
2. .off( )
卸载事件
绑定2个事件
$("elem").on("mousedown mouseup",fn)
删除一个事件
$("elem").off("mousedown")
删除所有事件
$("elem").off("mousedown mouseup")
快捷方式删除所有事件，这里不需要传递事件名了，节点上绑定的所有事件讲全部销毁
$("elem").off()
3. event.type
获取事件的类型
$("a").click(function(event) {
alert(event.type); // "click"事件
});
4. event.preventDefault( )
阻止默认行为
$("#content").click(function(event) {
$("#msg").html($("#msg").html() + "<p>外层div元素被单击</p>");
event.stopPropagation(); //阻止事件冒泡
});
5. event.currentTarget
在事件冒泡过程中的当前DOM元素
冒泡前的当前触发事件的DOM对象, 等同于this.
网友评论