27、Jquery事件

2024-04-27 15:00:53

字體：大中小

來源：轉載

供稿：網友

Jquery 事件

在javascript中事件調用方式為onclick、onmouSEOver等，在jquery中使用事件無需寫前面的on

bind()方法

為元素綁定事件

$("#id").bind("click",function(){    //為id綁定click事件    alert("ok");});

使用bind()方法綁定的事件，是多播事件委托，就是再次定義的事件不會覆蓋前一個事件

//可以按順序執行兩個事件$("#id").bind("click",function(){alert("1");});$("#id").bind("click",function(){alert("2")});

one()方法

綁定一次性事件

//只執行一次單擊操作 下次不會再執行$("#id").one("click",function(){    alert("a");    return false;});

unbind()方法

刪除事件，取消綁定

$("#id").unbind(); //刪除id的所有事件$("#id").unbind("click"); //刪除id的所有click事件

快捷事件

Javascript事件去掉on基本都支持

click()方法

單擊事件

$("#id").click(); //如果不寫函數體 表示立即觸發事件$("#id").click(function(){    //這是一個點擊事件});

dbclick()方法

雙擊事件

$("#id").dbclick(); //觸發事件$("#id").dbclick(function(){    //雙擊后執行});

focus()方法

獲得焦點

$("#id").focus(); //觸發$("#id").focus(function(){    //獲得焦點后執行});

blur()方法

失去焦點

$("#id").blur(); //觸發失去焦點事件$("#id").blur(function(){    //失去焦點后執行});

change()方法

改變時

$("#id").change(); //觸發改變事件$("#id").change(function(){    //改變后執行});

mouseover()方法

鼠標移入

$("#id").mouseover();$("#id").mouseover(function(){});

mouseout()方法

鼠標移出

$("#id").mouseout();$("#id").mouseout(function(){});

submit()方法

提交表單

$("#id").submit(); $("#id").submit(function(){});

hover()方法

用于解決mouseover和mouseout存在的問題

//兩個function 分別對應移入和移出$("div").hover(function(){    $("div").html("啊啊啊啊啊啊啊 快跑啊他來了");},function(){    $("div").html("呼、嚇死了 終于走了！")});

toggle()方法

依次執行每個函數，如果執行完畢重復執行

$("#div").toggle(    function(){        $("#div").CSS({ "width": "100px" });    },    function(){        $("#div").css({ "width": "200px" });    },    function(){        $("#div").css({ "width": "300px" });    });

Jquery 事件對象

Jquery event將不同瀏覽器的差異進行了合并，比如可以在所有瀏覽器中都使用event.target來獲取觸發者而不用判斷瀏覽器使用srcElement。

$("#div").click(function(e){    alert(e.type); //返回事件名 click    alert(e.target); //返回事件源 誰觸發的    alert(e.altKey); //返回alt是否按下     alert(e.screenX);//...等等 js中的事件});