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();将该表单提交