Day03jQuery事件綁定

事件綁定

`

1. 基於HTML實現的事件綁定

存在耦合

//HTML:
    <input type="button" value="按鈕" id="btn" onclick="test()"/>
//Script:
    function test(){
            alert("按鈕點擊了");
        }

2.基於編程的方式給標籤添加事件

注意：頁面從上到下加載，將寫function方法的那個script標籤放於body標籤裏下面，防止未加載就出來
1)js:

//HTML:
<input type="button" value="按鈕" id="btn"/>

//script:
var btn = document.getElementById('btn');
btn.onclick = test;//對監聽屬性賦值一個function
function test(){
    alert('按鈕點擊');
}

2)jq:

function test(){
            alert("按鈕點擊了");
        } 
$('#btn').click(test);//對id爲btn的按鈕綁定單擊事件
//或者
$('#btn').click(function(){
            alert("按鈕點擊了");
        } );//對id爲btn的按鈕綁定單擊事件

3.在文檔加載完畢之後執行代碼

若寫function的script標籤放在上面，則寫上window.onload

js:

window.onload = function(){//加載完頁面之後執行

        }
//eg:
window.onload = function(){
            var btn = document.getElementById('btn');
            btn.onclick = test;
        }
        function test(){
            alert("按鈕點擊了");
        } ;     

jq:
①jq完整版:

$(document).ready(function(){//文檔加載完畢後運行

}
//eg:
$(document).ready(function(){
            $('#btn').click(function(){
                alert("按鈕點擊了");
            } );
        })

②jq簡化版:

$(function(){

})
eg:
$(function(){
            $('#btn').click(function(){
                alert("按鈕點擊了");
            } );
        })

4）其他單擊事件
①toggle(); //綁定單擊事件，可以綁定多個function,每次觸發一個函數，且函數依次循環出現
toggle(test1,test2,test3……)；

function test1(){
            alert(1);
        }
        function test2(){
            alert(2);
        }
        function test3(){
            alert(3);
        }
        $(function(){
            $('#btn').toggle(test1,test2,test3);//每次點擊按鈕，觸發一個函數，且函數依次循環出現
        })

②hover(fn1,fn2); //綁定兩個function 相當於mouseover+mouseout(鼠標移入移出)
當鼠標移入時執行fn1，鼠標移出時執行fn2

③submit(); //提交form
form對象(jq).submit();將該表單提交