jQuery基础（三）- 事件篇

 

1、jQuery鼠标事件之click与dbclick事件

click方法用于监听用户单击操作，dbclick方法用于监听用户双击操作，这两个方法用法及其类似，所以这只介绍click事件，只有单击释放后才生效，而且同一元素不能同时绑定click和dbclick事件

 

方法一：$ele.click()

click无参，只是绑定一个事件，在函数里可以实现其他的绑定事件

 

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

click的参数是函数（回调函数），单击会执行函数里的操作，如果里面含有this，this指向触发事件元素的对象

 

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

click增加了一个参数，和上面的功能是一样的，只不过传递了一个数据，即eventObject.data = eventData

//不同函数传递数据

    function data(e) {

        $(this).find('p:last').html('数据:' + e.data)

    }

 

    function a() {

        $(".right").click(1111, data)

    }

    a();

注：只有鼠标按钮键which值为1（即鼠标左键）才会实现所绑定的事件

 

2、jQuery鼠标事件之mousedown与mouseup事件

mousedown方法用于监听用户鼠标按下操作，只有鼠标按下后才生效，mouseup方法用于监听用户鼠标松开操作，只有鼠标松开后才生效，这两个方法用法及其类似，所以这只介绍mousedown事件。

 

方法一：$ele.mousedown()

mousedown 无参，只是绑定一个事件，在函数里可以实现其他的绑定事件

 

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

mousedown 的参数是函数（回调函数），鼠标按下后会执行函数里的操作，如果里面含有this，this指向触发事件元素的对象

 

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

mousedown增加了一个参数，和上面的功能是一样的，只不过传递了一个数据，即eventObject.data = eventData

 

注：mousedown强调按下，mouseup强调松开；如果点击按住不放并离开元素，还是会实现所绑定的事件；任何鼠标按钮都会实现所绑定的事件； 用event 对象的which区别按键，敲击鼠标左键which的值是1，敲击鼠标中键which的值是2，敲击鼠标右键which的值是3

 

3、jQuery鼠标事件之mousemove事件

mousemove方法用于监听用户鼠标指针移动的操作，只有鼠标指针移动就生效，只在绑定事件的元素的区域里。

 

方法一：$ele.mousemove()

mousemove 无参，只是绑定一个事件，在函数里可以实现其他的绑定事件

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

mousemove 的参数是函数（回调函数），鼠标指针移动会执行函数里的操作，如果里面含有this，this指向触发事件元素的对象

//绑定一个mousemove事件

    //触发后修改内容

    $(".aaron1").mousemove(function(e) {

        $(this).find('p:last').html('移动的X位置：' + e.pageX)

    })

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

mousemove 增加了一个参数，和上面的功能是一样的，只不过传递了一个数据，即eventObject.data = eventData

注：mousemove 强调鼠标指针移动；如果处理器做任何重大的处理，或者如果该事件存在多个处理函数，这可能造成浏览器的严重的性能问题

 

4、jQuery鼠标事件之mouseover与mouseout事件

mouseover方法用于监听用户鼠标移入操作，只有鼠标移入区域内后才生效，mouseout方法用于监听用户鼠标移出操作，只有鼠标移除区域后才生效，处理事件的过程中会有事件冒泡，这两个方法用法及其类似，所以这只介绍mouseover事件。

 

方法一：$ele.mouseover ()

mouseover 无参，只是绑定一个事件，在函数里可以实现其他的绑定事件

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

mouseover 的参数是函数（回调函数），鼠标移入后会执行函数里的操作，如果里面含有this，this指向触发事件元素的对象

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

mouseover 增加了一个参数，和上面的功能是一样的，只不过传递了一个数据，即eventObject.data = eventData

注：mouseover 强调鼠标移入区域内，mouseover 强调鼠标移除区域；

 

5、jQuery鼠标事件之mouseenter与mouseleave事件

　　这和第四点的基本功能，理论知识点是一模一样的，不加赘述。但是他们最主要的区别是第四点可能会处理冒泡事件，这第五点是不会处理冒泡事件

 

6、jQuery鼠标事件之hover事件

这个事件是第五点的总结方法，所以他也不会处理冒泡事件，即悬停事件，在元素区域内悬停（移入），在元素外（移出）

方法：$ele.hover( handlerIn(eventObject) , handlerOut(eventObject))

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

handlerOut(eventObject)：当鼠标指针离开元