JQuery事件

第一章:鼠标事件

1. .click( )

鼠标点击事件

ele.click(function( ){

})

click事件其实是由mousedown于mouseup 2个动作构成,所以点击的动作只有在松手后才触发

1
2
3
4
5
例1:
<div id="test">点击触发<div>
$("#test").click(function() {
//this指向 div元素
});

2. .dbclick( )

鼠标双击事件,语法与.click( )相同

与click( ) 的区别,类似于由俩个click( )事件组成,中间间隔的时间由系统设定

3. .mousedown( )

监听用户鼠标按下的操作

1
2
3
4
5
例1:
<div id="test">点击触发<div>
$("#test").mousedown(function() {
//this指向 div元素
});

4. .mouseup( )

监听用户鼠标抬起时的操作

5. .mousemove( )

监听用户鼠标移动时的操作

6. .mouseover( )

监听用户鼠标移入时的操作(冒泡)

1
#绑定的元素触发了mouseover事件后,它会一直向上找父级元素的mouseover事件,如果父级元素也有mouseover事件则会被触发

7. .mouseout( )

监听用户鼠标移出时的操作(冒泡)

8. .mouseenter( )

监听用户鼠标移入时的操作(不冒泡)

1
# 	.mouseenter事件只会在绑定它的元素上被调用,而不会在后代节点上被触发

9. .mouseleave( )

监听用户鼠标移出时的操作(不冒泡)

10. .hover( )

$(selector).hover(handlerIn, handlerOut)

在元素上移入移出,打到mouseenter 和 mouseleave 同时使用的效果

参数:

  • handlerIn(eventObject):当鼠标指针进入元素时触发执行的事件函数
  • handlerOut(eventObject):当鼠标指针离开元素时触发执行的事件函数
1
2
3
4
5
6
7
8
9
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 回调函数

1
2
3
4
5

<div id="test">点击触发<div>
$("#test").focusin(function() {
//this指向 div元素
});

2. .focusout( )

当一个元素,或者其内部任何一个元素失去焦点的时候,比如input元素,用户在点击失去焦的时候,如果开发者需要捕获这个动作

用法与focusin( ) 相同,冒泡

3. .focus( )

focusin( )的不冒泡版

4. .blur( )

focusout( )的不冒泡版

5. .change( )

元素,

  • value( ) 元素发生改变时 ,失去焦点后发生
1
2
3
4
5
6
7
8
9
10
11
<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) 回调函数

1
2
3
4
5
//监听input元素中value的选中
//触发元素的select事件
$("input").select(function(e){
alert(e.target.value)
})

7. .submit( )

监听提交表单事件

$ele.submit( [eventData ], handler(eventObject) )

具体能触发submit事件的行为:

  • 当某些表单元素获取焦点时,敲击Enter(回车键)

阻止默认行为:

1
2
3
4
5
6
传统的方式是调用事件对象  e.preventDefault() 来处理, 
jQuery中可以直接在函数中最后结尾return false即可
例:
$("#target").submit(function(data) {
return false; //阻止默认行为,提交表单
});

第三章: 键盘事件

1. .keydown( )

当用户在一个元素上第一次按下键盘上字母键的时候,就会触发它

1
2
3
4
5
6
//直接绑定事件
$elem.keydown( handler(eventObject) )
//传递参数
$elem.keydown( [eventData ], handler(eventObject) )
//手动触发已绑定的事件
$elem.keydown()

2. .keyup( )

当用户在一个元素上第一次松手键盘上的键的时候,就会触发它。

使用方法与keydown是一致的只是触发的条件是方法的

3. keypess( )

当浏览器捕获键盘输入时,触发它

1
2
3
4
5
//监听键盘按键
//获取输入的值
$('.target1').keypress(function(e) {
$("em").text(e.target.value)
});

注:KeyPress主要用来接收字母、数字等ANSI字符,而 KeyDown 和 KeyUP 事件过程可以处理任何不被 KeyPress 识别的击键。诸如:功能键(F1-F12)、编辑键、定位键以及任何这些键和键盘换档键的组合等。

第四章: 事件的绑定与解绑

1. .on( )

给元素绑定事件

基本用法:.on( events ,[ selector ] ,[ data ] )

1
2
$("#elem").click(function(){})  //快捷方式
$("#elem").on('click',function(){}) //on方式

多个事件绑定同一函数

1
$("#elem").on("mouseover mouseout",function(){ });

多个事件绑定不同函数

1
2
3
4
$("#elem").on({
mouseover:function(){},
mouseout:function(){}
});

2. .off( )

卸载事件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
绑定2个事件

$("elem").on("mousedown mouseup",fn)

删除一个事件

$("elem").off("mousedown")

删除所有事件

$("elem").off("mousedown mouseup")

快捷方式删除所有事件,这里不需要传递事件名了,节点上绑定的所有事件讲全部销毁

$("elem").off()

3. event.type

获取事件的类型

1
2
3
$("a").click(function(event) {
alert(event.type); // "click"事件
});

4. event.preventDefault( )

阻止默认行为

1
2
3
4
$("#content").click(function(event) {
$("#msg").html($("#msg").html() + "<p>外层div元素被单击</p>");
event.stopPropagation(); //阻止事件冒泡
});

5. event.currentTarget

在事件冒泡过程中的当前DOM元素

冒泡前的当前触发事件的DOM对象, 等同于this.

6.trigger

根据绑定到匹配元素的给定的事件类型执行所有的处理程序和行为

像click mouseover 等事件需要用户交互才能完成,而trigger能够获取这些事件用以模拟用户交互

1
2
3
4
5
6
7
8
9
10
11
//给class名为son1的元素添加点击事件
$('.son1').on('click',function(){
console.log('a');
});
//给class名为son2的元素添加点击事件,触发son1元素的点击事件
$('.son2).on('click',function(){
$('.son1').trigger('click');
}

=>a //点击.son1
=>a //点击.son2也可以触发.son1的点击事件

7.triggerHandler

和trigger用法一样,但是也有不同之处

  • triggerHandler不会触发浏览器的默认行为,.triggerHandler( “submit” )将不会调用表单上的.submit()
  • .trigger() 会影响所有与 jQuery 对象相匹配的元素,而 .triggerHandler() 仅影响第一个匹配到的元素
  • 使用 .triggerHandler() 触发的事件,并不会在 DOM 树中向上冒泡。 如果它们不是由目标元素直接触发的,那么它就不会进行任何处理
  • 与普通的方法返回 jQuery 对象(这样就能够使用链式用法)相反,.triggerHandler() 返回最后一个处理的事件的返回值。如果没有触发任何事件,会返回 undefined

评论