鼠标事件

jQuery鼠标事件之click与dblclick事件

click方法用于监听用户单击操作，dbclick方法用于监听用户双击操作。

  • 方法一：$ele.click()
    绑定$ele元素，不带任何参数一般是用来指定触发一个事件，用的比较少
<div id="test">点击触发<div>
$("ele").click(function(){
    alert('触发指定事件')
})
$("#test").click(function(){
     $("ele").click()  //手动指定触发事件 
});
  • 方法二：$ele.click( handler(eventObject) )
    绑定$ele元素，每次$ele元素触发点击操作会执行回调 handler函数，这样可以针对事件的反馈做很多操作了，方法中的this是指向了绑定事件的元素
<div id="test">点击触发<div>
$("#test").click(function() {
    //this指向 div元素
});
  • 方法三：$ele.click( [eventData ], handler(eventObject) )
    使用与方法二一致，不过可以接受一个数据参数，这样的处理是为了解决不同作用域下数据传递的问题
<div id="test">点击触发<div>
$("#test").click(11111,function(e) {
    //this指向 div元素
    //e.data  => 11111 传递数据
});

dblclick()的用法和click()的用法是类似的，可以参考以上click()的用法。

SRE实战 互联网时代守护先锋，助力企业售后服务体系运筹帷幄！一键直达领取阿里云限量特价优惠。

jQuery鼠标事件之mousedown与mouseup事件

mousedown的快捷方法可以监听用户鼠标按下的操作，与其对应的还有一个方法mouseup快捷方法可以监听用户鼠标弹起的操作。

    <h4>测试一</h4>
    <button>弹出回调中的鼠标键</button>
    <script type="text/javascript">
    //this指向button元素
    $("button:eq(0)").mousedown(function(e) {
        alert('e.which: ' + e.which)
    })
    </script>


    <h4>测试二</h4>
    <div class="test2">
        <p>$('button:first').mousedown(function(e) {alert(this)})</p>
    </div>
    <button>指定触发事件</button>
    <script type="text/javascript">
    $('p').mousedown(function(e) {
            alert(e.target.textContent)
        })
        //this指向button元素
    $("button:eq(1)").mousedown(function() {
        $('p').mousedown() //指定触发绑定的事件
    })
    </script>


    <h4>测试三</h4>
    <div class="test3">
        <p>$('.right').mousedown(1111, set)</p>
    </div>
    <button>不同函数传递数据</button>
    <script type="text/javascript">
    //不同函数传递数据
    function mydata(e) {
        alert(e.data) //1111
    }

    function a() {
        $("button:eq(2)").mousedown(1111, mydata)
    }
    a();
    </script>

注意：

  • 用event 对象的which区别按键，敲击鼠标左键which的值是1，敲击鼠标中键which的值是2，敲击鼠标右键which的值是3
  • target：返回触发事件的节点
  • e：指代event（事件）
  • data：是event的属性
  • $ele.click( [eventData ], handler(eventObject) )eventData可以被当作参数传递到事件event的data属性里

jQuery鼠标事件之mousemove事件

mousemove的快捷方法可以监听用户移动的的操作

  • 方法一：$ele.mousemove()
    绑定$ele元素，不带任何参数一般是用来指定触发一个事件，用的比较少
<div id="test">点击触发<div>
$("ele").mousemove(function(){
    alert('触发指定事件')
})
$("#test").click(function(){
     $("ele").mousemove()  //指定触发事件 
});
  • 方法二：$ele.mousemove( handler(eventObject) )
    绑定$ele元素，每次$ele元素触发点击操作会执行回调 handler函数
    这样可以针对事件的反馈做很多操作了
<div id="test">滑动触发<div>
$("#test").mousemove(function() {
    //this指向 div元素 
});
  • 方法三：$ele.mousemove( [eventData ], handler(eventObject) )
    使用与方法二一致，不过可以接受一个数据参数，这样的处理是为了解决不同作用域下数据传递的问题
<div id="test">点击触发<div>
$("#test").mousemove(11111,function(e) {
    //this指向 div元素
    //e.data  => 11111 传递数据
});
  • jQuery html() 方法：html() 方法设置或返回被选元素的内容（innerHTML）。

jQuery鼠标事件之mouseover与mouseout事件

移入移出事件

  • 方法一：$ele.mouseover()
    绑定$ele元素，不带任何参数一般是用来指定触发一个事件，用的比较少
<div id="test">点击触发<div>
$("ele").mouseover(function(){
    alert('触发指定事件')
})
$("#test").click(function(){
     $("ele").mouseover()  //指定触发事件 
});
  • 方法二：$ele.mouseover( handler(eventObject) )
    绑定$ele元素，每次$ele元素触发点击操作会执行回调 handler函数
    这样可以针对事件的反馈做很多操作了
<div id="test">滑动触发<div>
$("#test").mouseover(function() {
    //this指向 div元素 
});
  • 方法三：$ele.mouseover( [eventData ], handler(eventObject) )
    使用与方法二一致，不过可以接受一个数据参数，这样的处理是为了解决不同作用域下数据传递的问题
<div id="test">点击触发<div>
$("#test").mouseover(11111,function(e) {
    //this指向 div元素
    //e.data  => 11111 传递数据
});

jQuery鼠标事件之mouseenter与mouseleave事件

mouseenter事件和mouseover的区别

关键点就是：冒泡的方式处理问题
简单的例子：

mouseover为例：

<div class="aaron2">
    <p>鼠标离开此区域触发mouseleave事件</p>
</div>

如果在p元素与div元素都绑定mouseover事件，鼠标在离开p元素，但是没有离开div元素的时候，触发的结果:

  1. p元素响应事件
  2. div元素响应事件
    这里的问题是div为什么会被触发？ 原因就是事件冒泡的问题，p元素触发了mouseover，他会一直往上找父元素上的mouseover事件，如果父元素有mouseover事件就会被触发
    所以在这种情况下面，jQuery推荐我们使用 mouseenter事件
mouseenter事件只会在绑定它的元素上被调用，而不会在后代节点上被触发

这就是最本质的区别。

jQuery鼠标事件之hover事件

扫码关注我们
微信号：SRE实战
拒绝背锅 运筹帷幄