鼠标事件

click与dblclick事件

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

    <div class="test2">
        <p>事件</p>
    </div>
    <button>指定触发事件</button>
    <script type="text/javascript">
        $('p').click(function(e) {
            alert(e.target.textContent)
        })
        $("button:eq(1)").click(function() {
            $('p').click() //指定触发绑定的事件
        })
    </script>

点击p标签和button：eq(1)上都有了相同的事件显示。

    <button>不同函数传递数据</button>
    <script type="text/javascript">

        //不同函数传递数据
        function data(e) {
            alert(e.data) //1111
        }
        function a() {
            $("button:eq(2)").click(1111, data)
        }
        a();
    </script>

a函数调用data函数并像data函数里传递了具体数据，之后再单独调用a函数。点击button弹出1111。

mousedown与mouseup事件

监听用户移动的的操作，mousemove事件是当鼠标指针移动时触发的，即使是一个像素。

<div class="aaron1">
            <p>鼠标在绿色区域移动触发mousemove</p>
            <p>移动的X位置：</p>
        </div>
    </div>
    <script type="text/javascript">
    //绑定一个mousemove事件
    //触发后修改内容
    $(".aaron1").mousemove(function(e) {
        $(this).find('p:last').html('移动的X位置：' + e.pageX)
    })
    </script>

当鼠标经过aaron1的区域时触发显示x的位置。

mouseover与mouseout事件

监听用户的移入移出操作。

mouseenter与mouseleave事件

mouseenter事件与mouseover的区别：
冒泡方式处理问题

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

如果在p元素与div元素都绑定mouseover事件，鼠标在离开p元素，但是没有离开div元素的时候,p元素响应事件，div元素也响应事件。原因就是事件冒泡的问题：

在mouseover中，p元素触发了mouseover，他会一直往上找父元素上的mouseover事件，如果父元素有mouseover事件就会被触发。

而在mouseenter中，mouseenter事件只会在绑定它的元素上被调用，而不会在其他节点上被触发。

hover事件

hover()这个方法里头封装的是mouseenter(), mouseleave()两个方法,可以阻止冒泡问题. 这个方法可以用来改变样式,比如鼠标移入div变色,移出回到以前的颜色.

$("p").hover(
        function() {
            $(this).css("background", 'red')
        },
        function() {
            $(this).css("background", '#bbffaa')
        }
    )

相当于

$("p").mouseenter(
        function() {
            $(this).css("background", 'red')
})
$("p").mouseleave(
    function() {
            $(this).css("background", '#bbffaa')
})

focusin事件

聚焦捕捉，例如input聚焦，在点击输入框时给input元素增加一个边框：

   <script type="text/javascript">
        $("input:first").focusin(function() {
             $(this).css('border','2px solid red')
        })
    </script>

点击聚焦并传递参数:

    <script type="text/javascript">
        function a() {
            $("input:last").focusin('慕课网', function(e){
                $(this).val(e.data)
            })
        }
        a();
    </script>

focusout事件

失去焦点时捕捉。

focusin与focusout结合使用，达到点击输入框时为空，如果没有填写点击其他地方时弹出提示字。

    <script type="text/javascript">

        $("input:last").focusin("",function(e){
            if($(this).val() == "请输入账号"){
                $(this).val(e.data)
            }
        });
        $("input:last").focusout("请输入账号",function(e){
            if($(this).val() == ""){
                $(this).val(e.data)
            }
        })

    </script>