jQuery框架之event(三)

一、前言

在上篇文章中,我们学到了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是一模一样的,所以这里不再重复,mouseentermouseover主要讲讲区别:

  • 冒泡的方式处理问题。

鼠标离开此区域触发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事件

元素、