jquery事件及事件代理

1. 常用事件

• click() 滑鼠單擊
• blur() 元素失去焦點
• focus() 元素獲得焦點
• mouseover() 滑鼠進入（進入子元素也觸發）
• mouseout() 滑鼠離開（離開子元素也觸發）
• ready() DOM加載完成

示例代碼:

<script>
    $(function(){
        var $li = $('.list li');
        var $button = $('#button1')
        var $text = $("#text1");
        var $div = $("#div1")

        //  滑鼠點選
        $li.click(function(){             
            // this指的是目前發生事件的對象，但是它是一個原生js對象
            // this.style.background = 'red';

            // $(this) 指的是目前發生事件的jquery對象
            $(this).css({'background':'gold'});
            // 擷取jquery對象的索引值,通過index() 方法
            alert($(this).index());
        });

        //  一般和按鈕配合使用
        $button.click(function(){
            alert($text.val());
        });

        //  擷取焦點
        $text.focus(function(){
            $(this).css({'background':'red'});

        });

        //  失去焦點
        $text.blur(function(){
            $(this).css({'background':'white'});

        });

        //  滑鼠進入
        $div.mouseover(function(){
            $(this).css({'background':'gold'});

        });

        //  滑鼠離開
        $div.mouseout(function() {
            $(this).css({'background':'white'});
        });
    });
</script>

<div id="div1">
    <ul class="list">
        <li>清單文字</li>
        <li>清單文字</li>
        <li>清單文字</li>
    </ul>

    <input type="text" id="text1" value="學習">
    <input type="button" id="button1" value="點選">
</div>      

說明:

• this指的是目前發生事件的對象，但是它是一個原生js對象
• $(this) 指的是目前發生事件的jquery對象

2. 小結

jQuery常用事件:

• click() 滑鼠單擊
• blur() 元素失去焦點
• focus() 元素獲得焦點
• mouseover() 滑鼠進入（進入子元素也觸發）
• mouseout() 滑鼠離開（離開子元素也觸發）
• ready() DOM加載完成

1. 事件代理介紹

事件代理就是利用事件冒泡的原理(事件冒泡就是事件會向它的父級一級一級傳遞),把事件加到父級上，通過判斷事件來源，執行相應的子元素的操作，事件代理首先可以極大減少事件綁定次數，提高性能；其次可以讓新加入的子元素也可以擁有相同的操作。

事件冒泡代碼:

<script>
    $(function(){

        var $div1 = $('#div1');
        var $div2 = $('#div2');

        $div1.click(function(){
            alert($(this).html());
        }); 

        $div2.click(function(){
            alert($(this).html());
        }); 
    });
</script>

 <div id="div1" style="width:200px; height:200px; background: red;">
    <div id="div2" style="width:100px; height:100px;background: yellow;">
        哈哈
    </div>
</div>      

說明:

當點選子元素div，它的點選事件會向它父元素傳遞，也會觸發了父元素的點選事件，這就是事件冒泡。

2. 事件代理的使用

一般綁定事件的寫法:

$(function(){
    $ali = $('#list li');
    $ali.click(function() {
        $(this).css({background:'red'});
    });
})

<ul id="list">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>      

事件代理的寫法

$(function(){
    $list = $('#list');
    // 父元素ul 來代理 子元素li的點選事件
    $list.delegate('li', 'click', function() {
        // $(this)表示目前點選的子元素對象
        $(this).css({background:'red'});
    });
})

<ul id="list">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>      

• childSelector: 子元素的選擇器
• event: 事件名稱，比如: ‘click’
• function: 當事件觸發執行的函數

3. 小結

• 事件代理就是使用父元素來代理子元素的事件，好處是減少事件的綁定次數，提高性能。
• 使用場景當多個相同的子元素綁定同一個事件，可以使用事件代理。
• 事件代理使用是使用delegate方法來完成