jQuery基础-事件篇

一、鼠标事件

1、click与dbclick事件：click方法用于监听用户单击操作，另一个方法是dbclick方法用于监听用户双击操作

方法一：$ele.click()

绑定$ele元素，不带任何参数一般是用来指定触发一个事件，用的比较少

<div id="test">点击触发<div>

$("ele").click(function(){

    alert('触发指定事件')

})

$("#text").click(function(){

     $("ele").click()  //手动指定触发事件

});

方法二：$ele.click( handler(eventObject) )

绑定$ele元素，每次$ele元素触发点击操作会执行回调handler函数，这样可以针对事件的反馈做很多操作了，方法中的this是指向了绑定事件的元素

<div id="test">点击触发<div>

$("#text").click(function() {

    //this指向 div元素

});

方法三：$ele.click( [eventData ], handler(eventObject) )

使用与方法二一致，不过可以接受一个数据参数，这样的处理是为了解决不同作用域下数据传递的问题

<div id="test">点击触发<div>

$("#text").click(11111,function(e) {

    //this指向 div元素

    //e.date  => 11111 传递数据

});

2、mousedown与mouseup事件：mousedown强调是按下触发，mouseup强调是松手触发

方法一：$ele.mousedown()

绑定$ele元素，不带任何参数一般是用来指定触发一个事件，可能一般用的比较少

<div id="test">点击触发<div>

$("ele").mousedown(function(){

    alert('触发指定事件')

})

$("#text").mousedown(function(){

     $("ele").mousedown()  //手动指定触发事件

});

 

方法二：$ele.mousedown( handler(eventObject) )

绑定$ele元素，每次$ele元素触发点击操作会执行回调handler函数

这样可以针对事件的反馈做很多操作了

<div id="test">点击触发<div>

$("#text").mousedown(function() {

    //this指向 div元素

});

方法三：$ele.mousedown( [eventData ], handler(eventObject) )

使用与方法二一致，不过可以接受一个数据参数，这样的处理是为了解决不同作用域下数据传递的问题

<div id="test">点击触发<div>

$("#text").mousedown(11111,function(e) {

    //this指向 div元素

    //e.date  => 11111 传递数据

});

click与mousedown的区别：

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

3、mousemove事件：当鼠标指针移动时触发的，即使是一个像素

方法一：$ele.mousemove()

绑定$ele元素，不带任何参数一般是用来指定触发一个事件，用的比较少

<div id="test">点击触发<div>

$("ele").mousemove(function(){

    alert('触发指定事件')

})

$("#text").click(function(){

     $("ele").mousemove()  //指定触发事件

});

 方法二：$ele.mousemove( handler(eventObject) )

绑定$ele元素，每次$ele元素触发点击操作会执行回调handler函数

这样可以针对事件的反馈做很多操作了

<div id="test">滑动触发<div>

$("#text").mousemove(function() {

    //this指向 div元素

});

 方法三：$ele.mousemove( [eventData ], handler(eventObject) )

使用与方法二一致，不过可以接受一个数据参数，这样的处理是为了解决不同作用域下数据传递的问题

<div id="test">点击触发<div>

$("#text").mousemove(11111,function(e) {

    //this指向 div元素

    //e.date  => 11111 传递数据

});

 

4、mouseover与mouseout事件

方法一：$ele.mouseover()

绑定$ele元素，不带任何参数一般是用来指定触发一个事件，用的比较少

<div id="test">点击触发<div>

$("ele").mouseover(function(){

    alert('触发指定事件')

})

$("#text").click(function(){

     $("ele").mouseover()  //指定触发事件

});

方法二：$ele.mouseover( handler(eventObject) )

绑定$ele元素，每次$ele元素触发点击操作会执行回调 handler函数

这样可以针对事件的反馈做很多操作了

<div id="test">滑动触发<div>

$("#text").mouseover(function() {

    //this指向 div元素

});

方法三：$ele.mouseover( [eventData ], handler(eventObject) )

使用与方法二一致，不过可以接受一个数据参数，这样的处理是为了解决不同作用域下数据传递的问题

<div id="test">点击触发<div>

$("#text").mouseover(11111,function(e) {

    //this指向 div元素

    //e.date  => 11111 传递数据

});

5、mouseenter与mouseleave事件：监听用户移动到内部的操作

使用上非常简单，三种参数传递方式与mouseover和mouseout是一模一样的

mouseenter事件和mouseover的区别关键点就是：冒泡的方式处理问题

6、hover事件

$(selector).hover(handlerIn, handlerOut)

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

handlerOut(eventObject)：当鼠标指针离开元素时触发执行的事件函数

7、focusin事件

方法一：$ele.focusin()

绑定$ele元素，不带任何参数一般是用来指定触发一个事件，一般用的比较少

<div id="test">点击触发<div>

$("ele").focusin(function(){

    alert('触发指定事件')

})

$("#text").mouseup(function(){

     $("ele").focusin()  //指定触发事件

});

 

方法二：$ele.focusin( handler )

绑定$ele元素，每次$ele元素触发点击操作会执行回调handler函数

这样可以针对事件的反馈做很多操作了

<div id="test">点击触发<div>

$("#text").focusin(function() {

    //this指向 div元素

});

 

方法三：$ele.focusin( [eventData ], handler )

使用与方法二一致，不过可以接受一个数据参数，这样的处理是为了解决不同作用域下数据传递的问题

<div id="test">点击触发<div>

$("#text").focusin(11111,function(e) {

    //this指向 div元素

    //e.date  => 11111 传递数据

});

8、focusout事件

 //input失去焦点给input元素增加一个边框

        $("input:first").focusout(function() {

             $(this).css('border','2px solid red')

        })

 //不同函数传递数据

        function fn(e) {

             $(this).val(e.data)

        }

 

        function a() {

            $("input:last").focusout('慕课网', fn)

        }

        a();

二、表单事件

1、blur与foucus事件

2、change事件

3、select事件：当 textarea 或文本类型的 input元素中的文本被选择时，会发生 select事件，只能用于<input>元素与<textarea>元素

4、submit事件：验证表单输入的正确性，如果错误就阻止提交，从新输入

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

    <input type="submit">

    <input type="image">

    <button type="submit">

   当某些表单元素获取焦点时，敲击Enter（回车键）

 

 

 

三、键盘事件

keydown事件：

当用户在一个元素上第一次按下键盘上字母键的时候，就会触发它。使用上非常简单，与基本事件参数处理保持一致，这里使用不在重复了，列出使用的方法

//直接绑定事件

$elem.keydown( handler(eventObject) )

//传递参数

$elem.keydown( [eventData ], handler(eventObject) )

//手动触发已绑定的事件

$elem.keydown()

 keyup事件：

当用户在一个元素上第一次松手键盘上的键的时候，就会触发它。使用方法与keydown是一致的只是触发的条件是方法的

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

四、事件的绑定和解绑

1、on()的多事件绑定：

多个事件绑定同一个函数

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

通过空格分离，传递不同的事件名，可以同时绑定多个事件

多个事件绑定不同函数

$("#elem").on({

    mouseover:function(){},  

    mouseout:function(){},

});

通过空格分离，传递不同的事件名，可以同时绑定多个事件，每一个事件执行自己的回调方法

将数据传递到处理程序

function greet( event ) {

  alert( "Hello " + event.data.name ); //Hello 慕课网

}

$( "button" ).on( "click", {

  name: "慕课网"

}, greet );

2、卸载事件off()方法

绑定2个事件

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

删除一个事件

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

删除所有事件

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

快捷方式删除所有事件，这里不需要传递事件名了，节点上绑定的所有事件讲全部销毁     $("elem").off()

五、事件对象的使用

事件对象是用来记录一些事件发生时的相关信息的对象。事件对象只有事件发生时才会产生，并且只能是事件处理函数内部访问，在所有事件处理函数运行结束后，事件对象就被销毁

event.target代表当前触发事件的元素，可以通过当前元素对象的一系列属性来判断是不是我们想要的元素

event.type：获取事件的类型

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

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

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

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

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

this和event.target的区别：

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

.this和event.target都是dom对象

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

六、自定义事件

trigger事件：

$('#elem').on('Aaron', function(event,arg1,arg2) {

    alert("自触自定义时间")

 });

$('#elem').trigger('Aaron',['参数1','参数2'])

trigger触发浏览器事件与自定义事件区别：自定义事件对象，是jQuery模拟原生实现的，自定义事件可以传递参数

triggerHandler事件：

triggerHandler不会触发浏览器的默认行为，.triggerHandler( "submit" )将不会调用表单上的.submit()

.trigger() 会影响所有与 jQuery对象相匹配的元素，而 .triggerHandler()仅影响第一个匹配到的元素

使用 .triggerHandler() 触发的事件，并不会在DOM 树中向上冒泡。 如果它们不是由目标元素直接触发的，那么它就不会进行任何处理

与普通的方法返回 jQuery 对象(这样就能够使用链式用法)相反，.triggerHandler()返回最后一个处理的事件的返回值。如果没有触发任何事件，会返回 undefined