一、前言
在上篇文章中,我们学到了jQuery操作Dom元素。本篇文章,我们将继续了解jQuery操作事件。
二、鼠标事件
1.鼠标事件之click事件
- click()
$ele.click()
不带参数的方式用的比较少点。
- click(handler(eventObj))
$('.mib_select').click(function () {
// this 指向绑定的元素
//do someing
})
每次点击某元素都执行这个回调函数,方法中的this指向绑定的元素
- click([eventData],handler(eventObj))
这个方法 也可以传递一个参数.
$('.mib_select').click(111,function (e) {
console.log(e.data); // 111
})
2.鼠标事件之dbclick事件
- dbclick()
dbclick()事件与click()事件相似,区别是:后者其实是鼠标事件mousedown和mouseup2个动作构成的。而dbclick是俩次的click事件。
3.鼠标事件之mousedown和mouseup事件
- $ele.mousedown()
$('div').mousedown()
- $ele.mousedown(handler(obj))
$("div").mousedown(function() {
//this指向 div元素
});
- $ele.mousedown(para,handel(obj))
$('div').mousedown(111,function (t) {
t.data ==>111
})
mouseup
和mousedown的用法一样,只不过是操作上不一样,前者是强调松手触发事件,后者是强调按下触发事件
4.鼠标事件之mousemove
这个方法就是鼠标的移动,即是当鼠标指针移动时触发,即使是一个像素。它的使用很简单,方法和mousedown一样。
- $ele.mousemove()
$('div').mousemove()
- $ele.mousemove(handel(obj))
$('div').mousemove(function () {
})
- $ele.mousemove(para,handel(obj))
$('div').mousemove(11,function (t) {
t.data ==>11
})
5.鼠标事件之mouseover和mouseout事件
这俩个事件就是原生js上的鼠标移入和移出事件。这哥俩的用法和前面的用法一样,在这我就不一一举了。(懒死你 - -)。
6.鼠标事件之mouseenter和mouseleave事件
该方法是监听用户是否移动到内部。使用上非常简单,三种参数传递方式与mouseover和mouseout是一模一样的,所以这里不再重复,mouseenter
和mouseover
主要讲讲区别:
- 冒泡的方式处理问题。
鼠标离开此区域触发mouseleave事件
如div和p标签都是绑定的mouseenter
事件,mouseenter事件只会在绑定它的元素上被调用,而不在后代节点上被触发。而mouseover却不是这样,当p元素触发了mouseover事件后,它会一直往上找父元素上的mouseover事件,如果父元素有mouseover事件,则触发。
7.鼠标事件之hover事件
这个hover
事件就很棒了,可以做一些事件的切换。如mouseenter和mouseleave ,如果使用了hover就会避免冒泡问题。
这个方法很简单,就提供了俩个函数
$(selector).hover(handlerin,handlerout)
$('.mib_select').hover(function () {
// enter
},function () {
// out
})
就是这么皮。好用的很。
8.鼠标事件之focusin事件
获取焦点事件。他和之前的用法基本类似
- $ele.focusin()
这个是不带参数的,一般用的比较少 - $ele.focusin(handler)
$('div').focusin(function () {
//this -> div元素
})
- $ele.focusin(param,handler)
$('.test').focusin(111,function (t) {
alert(t.data);
})
9.鼠标事件之focusout事件
嘻嘻,这个方法就是失去焦点的时候,触发的事件。该事件的方法和focusin事件一样,不在一一列举。但是 必须要注意一点 focusout和focusin事件 是都支持 冒泡处理的
三、表单事件
1.focus和blur事件
这俩个事件同样也用于表单获取焦点事件,但是这俩个哥们是不支持 冒泡处理的,冒泡处理前面也讲过,就是会一级一级向上查找绑定了焦点事件的父元素,如果绑定就触发。
$("input").focusout(function(){
})
$(".father").focus(function(){
})
// input元素触发foucusout事件,因为focusout 是冒泡处理的,即会一级一级向上查找父元素div,div绑定了foucus事件 即会触发。
2.change事件
想元素、
- input元素
当value值发生变化时,失去焦点后获取change事件。 - select元素
用户做出选择时,触发事件
textarea元素
输入文本框有变化时,失去焦点后触发事件
change事件十分的简单,不再列举。
3.select事件
这个事件只能用于textarea元素 和 input元素。选中时。
- $ele.select()
$('input').select();//触发事件
- $ele.select(handler(event))
这个方法带一个回调函数。没触发一次操作,就会执行这个函数
$('.target1').select(function () {
this 直接 class = target 的input元素
})
- $ele.select(para,handler(event))
$('.target1').select(111,function (e) {
alert(e.data); //111
})
4.submit事件
提交表单事件。
- $ele.submit()
无参数用的比较少,用来触发一个事件。
$('.target1').submit()
- $ele.submit(function{})
$('.target1').submit(function (e) {
alert(e.data);
})
- $ele.submit(data,function{})
$('.target1').submit(111,function (e) {
alert(e.data);// 111
})
这俩个方法和之前一些事件一样,可以接受一个函数,或者接受一个参数一个函数。
四、键盘事件
1.keydown()和keyup()事件
这个事件和鼠标的事件mousedown和mouseup事件一样,对于键盘,jQuery也提供了类似的方法。
- keydown
按下某个键的时候触发事件, - keyup
松开某个键的时候,就会触发事件。
理论上这俩个事件可以绑定到任何元素,但keydown/keyup事件只是发送到具有焦点的元素上,不同的浏览器中,可获得焦点的元素略有不同,但是表单元素总是能获取焦点,所以对于此事件类型表单元素是最合适的。这俩个事件的用法和前面的事件一样,不再一一列举。
2.keypress()事件
捕获某个字符的操作,不能捕获组合键,无法响应系统键:delete 。用法和前面的都一样。
五、事件的绑定与解绑
1. on()的多事件绑定
我们之前学到的鼠标事件,键盘事件,表单事件其实内部都是通过on()方法实现的,它的基本用法:$ele.on(events,selector,data)
,可以通过下列的例子来进行比较
$('div').click(function () {
})
$('div').on('click',function () {
})
还可以多事件绑定,用空格隔开,绑定多个事件
$('div').on('mouseover mouseout',function () {
alert(11)
})
或者分开写
$('div').on({
mousedown:function () {
},
mouseout:function () {
}
})
更厉害的是,当要处理某事件的时候,也可以传递一个事件函数,第二个参数为对象
function getName(para) {
alert('hello' + para.data.name);
}
$('#result').on('click',{name:'我是一个帅哥'},getName);
2.on()的高级用法
一听到高级,嘿嘿,没错,越高级的东西越好用。其实on的高级用法就是委托机制,委托我想我们iOS开发的童鞋,一定很熟悉,iOS上就是代理嘛。其实on的委托也很皮,假如某div元素绑定了click事件,但是body元素怕疼,不让别人点击,于是它就委托了它的子元素 a 上,于是点击 a的时候响应 点击事件
目标节点 //点击在这个元素上
事件绑定在最上层div元素上,当用户触发在a元素上,事件将往上冒泡,一直会冒泡在div元素上。如果提供了第二参数,那么事件在往上冒泡的过程中遇到了选择器匹配的元素,将会触发事件回调函数。
3.off()的用法
off翻译过来不就是关闭的意思嘛(英语8级水平 - -)。通过on可以绑定,通过off可以关闭,问事件情为何物,不就是一物降一物。
- $(ele).off()
不传递参数标示所有事件都卸载掉。 - $(ele).off(par)
删除一个事件,如果想删除多个事件,用空格隔开。
六、事件对象
事件对象是用来记录一些事件发生时的相关信息的对象。事件对象只有事件发生时才会产生,并且只能是事件处理函数内部访问,在所有事件处理函数运行结束后,事件对象就被销毁
- event.target
当前触发事件的元素.或者其子元素。
- 点击:触发一
- 点击:触发二
- 点击:触发三
- 点击:触发四
$("ul").on('click',function(e){
alert('触发的元素是内容是: ' + e.target.textContent);//点击哪个 显示哪个内容
})
通常和this来进行比较,是否是冒泡处理。**this是变化的是函数执行时的环境对象,而event.target不会变化,它永远是直接接受事件的目标DOM元素;
**
- event.type
获取事件的类型 - event.pageX event.pageY
元素在当前页面的坐标值,鼠标相对于文档的左边缘的位置(左边)与 (顶边)的距离。 - event.preventDefault()
阻止默认行为。使用此方法后:如果点击一个链接(a标签),浏览器不会跳转到新的 URL 去了。 - event.stopPropagation()
阻止事件冒泡 - event.which
获取在鼠标单击时,单击的是鼠标的哪个键 - event.currentTarget
在事件冒泡过程中的当前DOM元素
七、自定义事件
- trigger事件
简单来讲就是:根据绑定到匹配元素的给定的事件类型执行所有的处理程序和行为。我们之前学的那些事件,是必须要交互才能触发完成,而trigger自动触发事件的。
$('#result').on('click',function () {
alert('ss');
});
$('#result').trigger('click');//自动触发 click事件
它也可以自定义事件,自定义事件可以传递参数
$('#trr').on("ar",function (event,par1,par2) {
alert(par1+par2); })
$('#trr').trigger('ar',['我是一个','帅哥']);
trigger触发浏览器事件与自定义事件区别在于:自定义事件对象是jquery模拟原生事件实现的,自定义事件可以传递参数。
- triggerHandler事件
triggerHandler不会触发浏览器的默认行为,.triggerHandler( "submit" )将不会调用表单上的.submit()
.trigger() 会影响所有与 jQuery 对象相匹配的元素,而 .triggerHandler() 仅影响第一个匹配到的元素
使用 .triggerHandler() 触发的事件,并不会在 DOM 树中向上冒泡。 如果它们不是由目标元素直接触发的,那么它就不会进行任何处理
与普通的方法返回 jQuery 对象(这样就能够使用链式用法)相反,.triggerHandler() 返回最后一个处理的事件的返回值。如果没有触发任何事件,会返回 undefined
举个例子大家应该很明白了
这个例子中,对div绑定了点击事件,对input绑定了聚焦事件,当我使用trigger的时候,由于trigger具有冒泡处理和可以触发浏览器事件默认形为,所以点击第一个按钮的时候,a冒泡到div 触发了div的点击事件,弹框提示,由于input事件也有定义,也触发了改事件,输入框聚焦,当此时title没有值,所以输入框为空;当点击第二个按钮的时候,由于使用的是triggerHandler事件,这个事件不会冒泡,所以无法触发父元素div的事件,由于不能触发浏览器默认事件,所以无法聚焦,此时input有值,即显示了该值。
八、总结
以上就是jQuery的事件,我总结了一些常用的事件方法,希望大家能平常多加练习。我始终相信一万小时理论,任何一件事如果做到一万小时,都可以熟练。经过大概一个月的学习,发现前端需要太多的东西需要掌握,零碎的知识,最后汇聚。但平常也会写写swift,OC,不能把老本行忘了嘛。最后还是送给大家一句励志的诗句
大鹏一日同风起,扶摇直上九万里。
假令风歇时下来,犹能簸却沧溟水。
时人见我恒殊调,闻余大言皆冷笑。
宣父犹能畏后生,丈夫未可轻年少