一、前言

在上篇文章中，我们学到了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，不能把老本行忘了嘛。最后还是送给大家一句励志的诗句

大鹏一日同风起，扶摇直上九万里。
假令风歇时下来，犹能簸却沧溟水。
时人见我恒殊调，闻余大言皆冷笑。
宣父犹能畏后生，丈夫未可轻年少