一前言
在上篇文章中, 我们学到了 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 主要讲讲区别:
冒泡的方式处理问题
- <div class="Joshua">
- <p class="test">鼠标离开此区域触发 mouseleave 事件</p>
- </div>
如 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 事件
这俩个事件同样也用于表单获取焦点事件, 但是这俩个哥们是不支持 冒泡处理的, 冒泡处理前面也讲过, 就是会一级一级向上查找绑定了焦点事件的父元素, 如果绑定就触发
- <div class = "father">
- <input type="text" />
- </div>
- $("input").focusout(function(){
- })
- $(".father").focus(function(){
- })
- // input 元素触发 foucusout 事件, 因为 focusout 是冒泡处理的, 即会一级一级向上查找父元素 div,div 绑定了 foucus 事件 即会触发
2.change 事件
想 < input > 元素 < textarea > 元素 < select 元素>的值发生改变时, 都可以通过 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 class="left">
- <p class="aaron">
- <a > 目标节点</a> // 点击在这个元素上
- </p>
- </div>
事件绑定在最上层 div 元素上, 当用户触发在 a 元素上, 事件将往上冒泡, 一直会冒泡在 div 元素上如果提供了第二参数, 那么事件在往上冒泡的过程中遇到了选择器匹配的元素, 将会触发事件回调函数
3.off()的用法
off 翻译过来不就是关闭的意思嘛 (英语 8 级水平 - -) 通过 on 可以绑定, 通过 off 可以关闭, 问事件情为何物, 不就是一物降一物
$(ele).off()
不传递参数标示所有事件都卸载掉
$(ele).off(par)
删除一个事件, 如果想删除多个事件, 用空格隔开
六事件对象
事件对象是用来记录一些事件发生时的相关信息的对象事件对象只有事件发生时才会产生, 并且只能是事件处理函数内部访问, 在所有事件处理函数运行结束后, 事件对象就被销毁
event.target
当前触发事件的元素. 或者其子元素
- <div class="aaron">
- <ul>
- <li > 点击: 触发一</li>
- <li > 点击: 触发二</li>
- <li > 点击: 触发三</li>
- <li > 点击: 触发四</li>
- </ul>
- </div>
- $("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 id="result">
- </div>
- <div id="trr" style="background-color: #ff99cc;margin-top: 22px;height: 60px">
- <a>
triggerHandler 事件
- </a>
- <input type="text">
- </div>
- <script type="text/javascript">
- $(function() {
- $("input").on('focus',
- function(event, title) {
- $(this.val(title));
- }) $('#trr').on('click',
- function() {
- alert('trigger 触发的事件会在 DOM 树中向上冒泡');
- }) $('button:first').click(function() {
- $('a').trigger('click');
- $('input').trigger('focus');
- }) $('button:last').click(function() {
- $('a').triggerHandler('click');
- $('input').triggerHandler('focus');
- })
- })
- </script>
这个例子中, 对 div 绑定了点击事件, 对 input 绑定了聚焦事件, 当我使用 trigger 的时候, 由于 trigger 具有冒泡处理和可以触发浏览器事件默认形为, 所以点击第一个按钮的时候, a 冒泡到 div 触发了 div 的点击事件, 弹框提示, 由于 input 事件也有定义, 也触发了改事件, 输入框聚焦, 当此时 title 没有值, 所以输入框为空; 当点击第二个按钮的时候, 由于使用的是 triggerHandler 事件, 这个事件不会冒泡, 所以无法触发父元素 div 的事件, 由于不能触发浏览器默认事件, 所以无法聚焦, 此时 input 有值, 即显示了该值
八总结
以上就是 jQuery 的事件, 我总结了一些常用的事件方法, 希望大家能平常多加练习我始终相信一万小时理论, 任何一件事如果做到一万小时, 都可以熟练经过大概一个月的学习, 发现前端需要太多的东西需要掌握, 零碎的知识, 最后汇聚但平常也会写写 swift,OC, 不能把老本行忘了嘛最后还是送给大家一句励志的诗句
大鹏一日同风起, 扶摇直上九万里
假令风歇时下来, 犹能簸却沧溟水
时人见我恒殊调, 闻余大言皆冷笑
宣父犹能畏后生, 丈夫未可轻年少
来源: http://www.jianshu.com/p/a7f97803478d