jQuery:事件篇

鼠标事件

jQuery鼠标事件之click与dblclick事件

  • $ele.click( handler(eventObject) ) : 每次$ele元素触发点击操作会执行回调 handler函数,方法中的this是指向了绑定事件的元素
1
2
3
$("button:eq(0)").click(function() {
alert(this);
})
  • $ele.click( [eventData ], handler(eventObject) ) : 可以接受一个数据参数,这样的处理是为了解决不同作用域下数据传递的问题
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
$("button:eq(2)").click(1111, function (e) {
alert(e.data) //1111
})
```


## jQuery鼠标事件之mousedown与mouseup事件

- `$ele.mousedown( handler(eventObject) )`

- `$ele.mouseup( [eventData ], handler(eventObject) )`

> 用event 对象的which区别按键,敲击鼠标左键which的值是1,敲击鼠标中键which的值是2,敲击鼠标右键which的值是3

```js
$("button:eq(0)").mousedown(function(e) {
alert('e.which: ' + e.which);
})

$("button:eq(2)").mousedown(1111, function (e) {
alert(e.data); //1111
})

jQuery鼠标事件之mousemove事件

  • $ele.mousemove( handler(eventObject) )
1
2
3
4
5
6
7
$(".aaron1").mousemove(function(e) {
$(this).find('p:last').html('移动的X位置:' + e.pageX);
})

$(".right").mousemove(1111,function(e){
$(this).find('p:last').html('数据:' + e.data);
})

如果处理器做任何重大的处理,或者如果该事件存在多个处理函数,这可能造成浏览器的严重的性能问题

jQuery鼠标事件之mouseover与mouseout事件

  • $ele.mouseover( handler(eventObject) )
1
2
3
$(".right p:first").mouseover('data = 慕课网', function(e) {
$(".right a").html('mouseover事件触发次数:' + (++n) + '<br/> 传入数据为 :'+ e.data)
})

jQuery鼠标事件之mouseenter与mouseleave事件

mouseenter事件和mouseover的区别

关键点就是:冒泡的方式处理问题

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

只有在鼠标指针穿过被选元素时,才会触发 mouseenter 事件。如果鼠标指针穿过任何子元素,同样会触发 mouseover 事件。

只有在鼠标指针离开被选元素时,才会触发 mouseleave 事件。如果鼠标指针离开任何子元素,同样会触发 mouseout 事件。

jQuery鼠标事件之hover事件

  • $(selector).hover(handlerIn, handlerOut)

  • handlerIn(eventObject) :当鼠标指针进入元素时触发执行的事件函数

  • handlerOut(eventObject) :当鼠标指针离开元素时触发执行的事件函数
1
2
3
4
5
6
7
8
$("p").hover(
function() {
$(this).css("background", 'red');
},
function() {
$(this).css("background", '#bbffaa');
}
)

jQuery鼠标事件之focusin事件

  • $ele.focusin( [eventData ], handler ) : 当一个元素,或者其内部任何一个元素获得焦点的时候触发事件
1
2
3
4
5
6
7
$("input:first").focusin(function() {
$(this).css('border','2px solid red');
})

$("input:last").focusin('慕课网', function(e) {
$(this).val(e.data);
})

jQuery鼠标事件之focusout事件

  • $ele.focusout( [eventData ], handler ) : 当一个元素,或者其内部任何一个元素失去焦点的时候触发事件
1
2
3
4
5
6
7
$("input:first").focusout(function() {
$(this).css('border','2px solid red');
})

$("input:last").focusout('慕课网', function(e) {
$(this).val(e.data);
})

表单事件

jQuery表单事件之blur与focus事件

focus和blur不支持冒泡,focusin和focusout支持冒泡

jQuery表单事件之change事件

可以通过change事件去监听这些改变的动作

input元素 : 监听value值的变化,当有改变时,失去焦点后触发change事件。对于单选按钮和复选框,当用户用鼠标做出选择时,该事件立即触发。

select元素 : 对于下拉选择框,当用户用鼠标作出选择时,该事件立即触发

textarea元素 : 多行文本输入框,当有改变时,失去焦点后触发change事件

1
2
3
$(".target3").change(function(e) {
$("#result").html(e.target.value)
})

jQuery表单事件之select事件

当 textarea 或文本类型的 input 元素中的文本被选择时,会发生 select 事件。

  • $ele.select( [eventData ], handler(eventObject) )
1
2
3
$("input").select(function(e){
alert(e.target.value)
})

jQuery表单事件之submit事件

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

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

  • <input type="submit">
  • <input type="image">
  • <button type="submit">
  • 当某些表单元素获取焦点时,敲击Enter(回车键)

form元素是有默认提交表单的行为,如果通过submit处理的话,需要禁止浏览器的这个默认行为

传统的方式是调用事件对象 e.preventDefault() 来处理, jQuery中可以直接在函数中最后结尾return false即可

1
2
3
4
$('#target2').submit(function() {
alert('捕获提交表达动作,阻止页面跳转')
return false;
})

键盘事件

jQuery键盘事件之keydown()与keyup()事件

keydown是在键盘按下就会触发

keyup是在键盘松手就会触发

理论上它可以绑定到任何元素,但keydown/keyup事件只是发送到具有焦点的元素上,不同的浏览器中,可获得焦点的元素略有不同,但是表单元素总是能获取焦点,所以对于此事件类型表单元素是最合适的。

1
2
3
$('.target1').keydown(function(e) {
$("em:first").text(e.target.value);
})

keydown事件会少一个字符是因为事件触发在前,keydown事件触发在文字还没敲进文本框

jQuery键盘事件之keypress()事件

keypress事件与keydown和keyup的主要区别

  • 只能捕获单个字符,不能捕获组合键
  • 无法响应系统功能键(如delete,backspace)
  • 不区分小键盘和主键盘的数字字符

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

1
2
3
$('.target1').keypress(function(e) {
$("em").text(e.target.value)
});

事件的绑定和解绑

on()的多事件绑定

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
$("#elem").click(function(){})  //快捷方式
$("#elem").on('click',function(){}) //on方式

// 多个事件绑定同一个函数
$("#elem").on("mouseover mouseout",function(){ })

// 多个事件绑定不同函数
$("#elem").on({
mouseover:function(){},
mouseout:function(){}
});

// 将数据传递到处理程序
$( "button" ).on( "click", {
name: "慕课网"
}, function ( event ) {
alert( "Hello " + event.data.name ); //Hello 慕课网
} )

on()的高级用法

委托机制

.on( events ,[ selector ] ,[ data ], handler(eventObject) )

1
2
3
4
5
6
//给body绑定一个click事件
//没有直接a元素绑定点击事件
//通过委托机制,点击a元素的时候,事件触发
$('body').on('click', '.aaron', function(e) {
alert(e.target.textContent)
})

卸载事件off()方法

  • 通过.on()绑定的事件处理程序
  • 通过.off() 方法移除该绑定
1
2
3
4
5
6
7
8
9
10
11
// 绑定2个事件
$("elem").on("mousedown mouseup",fn)

// 删除一个事件
$("elem").off("mousedown")

// 删除所有事件
$("elem").off("mousedown mouseup")

// 快捷方式删除所有事件
$("elem").off()

事件对象的作用

jQuery事件对象的作用

1
2
3
4
//多事件绑定一个,不用每个li元素都绑定事件
$("ul").on('click',function(e){
alert('触发的元素是内容是: ' + e.target.textContent)
})

jQuery事件对象的属性和方法

event.type:获取事件的类型

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

event.pageX 和 event.pageY:获取鼠标当前相对于页面的坐标

以页面为参考点,不随滑动条移动而变化

event.preventDefault() 方法:阻止默认行为

可以用 event.isDefaultPrevented() 来确定这个方法是否(在那个事件对象上)被调用过了

event.stopPropagation() 方法:阻止事件冒泡

event.which:获取在鼠标单击时,单击的是鼠标的哪个键

event.currentTarget : 在事件冒泡过程中的当前DOM元素

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

this和event.target的区别:

js中事件是会冒泡的,所以this是可以变化的,但event.target不会变化,它永远是直接接受事件的目标DOM元素;

this和event.target都是dom对象

如果要使用jquey中的方法可以将他们转换为jquery对象。比如this和$(this)的使用、event.target和$(event.target)的使用;

自定义事件

jQuery自定义事件之trigger事件

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

  • 触发浏览器事件
1
$('#elem').trigger('click');
  • trigger除了能够触发浏览器事件,同时还支持自定义事件,并且自定义事件还支持传递参数
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
$('#elem').on('Aaron', function(event,arg1,arg2) {
alert("自触自定义时间")
});
$('#elem').trigger('Aaron',['参数1','参数2'])

// 实例
$("button:first").click(function(event,bottonName) {
bottonName = bottonName || 'first';
update($("span:first"),$("span:last"),bottonName);
});

//通过自定义事件调用,更新次数
$("button:last").click(function() {
$("button:first").trigger('click','last');
});

function update(first,last,bottonName) {
first.text(bottonName);
var n = parseInt(last.text(), 10);
last.text(n + 1);
}

jQuery自定义事件之triggerHandler事件

triggerHandlertrigger的用法是一样的,重点看不同之处:

  • triggerHandler不会触发浏览器的默认行为,.triggerHandler( “submit” )将不会调用表单上的.submit()
  • .trigger() 会影响所有与 jQuery 对象相匹配的元素,而 .triggerHandler() 仅影响第一个匹配到的元素
  • 使用 .triggerHandler() 触发的事件,并不会在 DOM 树中向上冒泡。 如果它们不是由目标元素直接触发的,那么它就不会进行任何处理
  • 与普通的方法返回 jQuery 对象(这样就能够使用链式用法)相反,.triggerHandler() 返回最后一个处理的事件的返回值。如果没有触发任何事件,会返回 undefined
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
$("input").on("focus",function(event,title) {
$(this).val(title)
});

$("#accident").on("click",function() {
alert("trigger触发的事件会在 DOM 树中向上冒泡");
});
//trigger触发focus
$("button:first").click(function() {
$("a").trigger("click");
$("input").trigger("focus");
});

//triggerHandler触发focus
$("button:last").click(function() {
$("a").triggerHandler("click");
$("input").triggerHandler("focus","没有触发默认聚焦事件");
});
文章目录
  1. 1. 鼠标事件
    1. 1.1. jQuery鼠标事件之click与dblclick事件
    2. 1.2. jQuery鼠标事件之mousemove事件
    3. 1.3. jQuery鼠标事件之mouseover与mouseout事件
    4. 1.4. jQuery鼠标事件之mouseenter与mouseleave事件
    5. 1.5. jQuery鼠标事件之hover事件
    6. 1.6. jQuery鼠标事件之focusin事件
    7. 1.7. jQuery鼠标事件之focusout事件
  2. 2. 表单事件
    1. 2.1. jQuery表单事件之blur与focus事件
    2. 2.2. jQuery表单事件之change事件
    3. 2.3. jQuery表单事件之select事件
    4. 2.4. jQuery表单事件之submit事件
  3. 3. 键盘事件
    1. 3.1. jQuery键盘事件之keydown()与keyup()事件
    2. 3.2. jQuery键盘事件之keypress()事件
  4. 4. 事件的绑定和解绑
    1. 4.1. on()的多事件绑定
    2. 4.2. on()的高级用法
    3. 4.3. 卸载事件off()方法
  5. 5. 事件对象的作用
    1. 5.1. jQuery事件对象的作用
    2. 5.2. jQuery事件对象的属性和方法
  6. 6. 自定义事件
    1. 6.1. jQuery自定义事件之trigger事件
    2. 6.2. jQuery自定义事件之triggerHandler事件
|