溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹了jQuery事件的示例分析，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。
一.window事件
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>New Web Project</title>
<script type="text/javascript" src="js/jQuery1.11.1.js"></script>
<script type="text/javascript">
$(function(){
alert("1");
})
window.onload=function
</script>
</head>
<body>
<h2>New Web Project Page</h2>
</body>
</html>二.鼠標事件(光棒效果)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>New Web Project</title>
<script type="text/javascript" src="js/jQuery1.11.1.js"></script>
<script type="text/javascript">
$(function(){
var aa=$("li");
aa.mouseover(function(){
$(this).css("background","blue")
})
aa.mouseout(function(){
$(this).css("background","")
})
})
</script>
</head>
<body>
<ul>
<li>呵呵</li>
<li>嘻嘻</li>
<li>哈哈</li>
</ul>
</body>
</html>三.鍵盤事件
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>New Web Project</title>
<script type="text/javascript" src="js/jQuery1.11.1.js"></script>
<script type="text/javascript">
$(function(){
$("input").keyup(function(event){
var co=event.keyCode;
alert(co);
})
})
</script>
</head>
<body>
<h2>呵呵</h2>
<input />
</body>
</html>四.表單事件
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>New Web Project</title>
<script type="text/javascript" src="js/jQuery1.11.1.js"></script>
<script type="text/javascript">
$(function(){
$("input").focus(function(){
$("span").addClass("myred")
});
$("input").blur(function(){
$("span").removeClass("myred")
});
});
</script>
</head>
<body>
<h2>呵呵</h2>
<input /><span >啊啊啊啊啊啊</span><br />
<input /><span >啊啊啊啊啊啊</span>
</body>
</html>五.綁定 解除
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>New Web Project</title>
<script type="text/javascript" src="js/jQuery1.11.1.js"></script>
<script type="text/javascript">
$(function(){
$("li").bind({
"mouseover":function(){
$(this).css("background","blue")
},
"mouseout":function(){
$(this).css("background","")
}
"click":function(){
alert($(this).text());
}
}).unbind("mouseover mouseout");
});
</script>
</head>
<body>
<ul>
<li>呵呵</li>
<li>嘻嘻</li>
<li>哈哈</li>
</ul>
</body>
</html>JQ的live(),on(),deletage(),bind()幾個的區別
bind()方法是綁定事件最直接的方法，這個方法是綁定到document上存在最久的方法，也很好的解決了兼容性方面的問題；
bind()方法的優點：
1.很好的解決了各個瀏覽器的兼容性問題；
2.非常方便簡單的能進行事件的綁定；
3.對于利用ID選出來的元素是非常好的，不僅僅是很快的可以hook上去(因為一個頁面只有一個id),而且當事件發生時，handler可以立即被執行實現方式；
bind()方法的缺點：
1.bind()不會綁定在通過bind()添加的元素上面；
2.他會綁定到所有選出來的元素上面；
3.只有當頁面加載完成后才會執行bind()事件，可能會產生效率問題；
live()這個綁定方法是通過冒泡機制來進行綁定的，由于在JQ1.7以上已經不推薦使用，在此不進行說明了；
deletage()這個方法在此之前從來沒有用過，看過萬丈后才知道還有這么一個綁定事件的方法；
deletage()這個方法的有點像live()方法，但不同于live()方法的地方在于他不會將event綁定到所有的ducoment上面，而是由你決定將他綁定在什么上面；
deletage()的優點：
1.支持綁定到動態添加的元素上面
2.你可以選擇把那個那個事件放到你指定的元素上面；
deletage()的缺點：
1.盡管減少了decoment已經很少了，但是還是需要來查找那個元素上面綁定了那個事件。需要花一定的時間。
on()：其實bind(),live(),delegate()都可以用on()方法來代替；就像undind();die()和undeletage()一樣可以用off()來實現一樣;
on()的優點：1.提供了一種統一的綁定事件的機制。
on()的缺點：1.隱藏了一些前面方法的細節。
總結：用bind()的代價是非常大的，他會把所有的時間綁定到DOM上面；
live()zai JQ1.7上面已經不被推薦使用了；
deletage()可以在動態元素上添加綁定事件；
on()結合了前面3種方法，為綁定事件有個統一。但是ON()不支持綁定動態添加的元素
感謝你能夠認真閱讀完這篇文章，希望小編分享的“jQuery事件的示例分析”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，更多相關知識等著你來學習!
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
