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>