事件 事件綁定方式 常用事件 事件冒泡 阻止後續事件發生 事件委托 頁面載入和window.onload ...
事件
事件綁定方式
<script src="jquery.js"></script>
<script>
//方式1
// $('#d1').click(function () {
// $(this).css({'background-color':'green'});
// });
//方式2
$('#d1').on('click',function () {
$(this).css({'background-color':'green'});
})
</script>常用事件
click 左鍵點擊事件
//獲取游標觸發的事件
$('[type="text"]').focus(function () {
$('.c1').css({'background-color':'black'});
});
//失去游標(焦點)觸發的事件
$('[type="text"]').blur(function () {
$('.c1').css({'background-color':'purple'});
});
//域內容發生改變時觸發的事件
$('select').change(function () {
$('.c1').toggleClass('cc');
});
//滑鼠懸浮觸發的事件
$('.c1').hover(
第一步:滑鼠放上去
function () {
$(this).css({'background-color':'blue'});
},
第二步,滑鼠移走
function () {
$(this).css({'background-color':'yellow'});
}
)
// 滑鼠懸浮 等同於hover事件
// 滑鼠進入
$('.c1').mouseenter(function () {
$(this).css({'background-color':'blue'});
});
// 滑鼠移出
$('.c1').mouseout(function () {
$(this).css({'background-color':'yellow'});
});
$('.c2').mouseenter(function () {
console.log('得港綠了');
});
// 滑鼠懸浮事件
$('.c2').mouseover(function () {
console.log('得港綠了');
});
// mouseover 和 mouseenter的區別是：mouseover事件是如果該標簽有子標簽，那麼移動到該標簽或者移動到子標簽時會連續觸發，mmouseenter事件不管有沒有子標簽都只觸發一次，表示滑鼠進入這個對象
//鍵盤按下觸發的事件 e\event事件對象
$(window).keydown(function (e) {
// console.log(e.keyCode); //每個鍵都有一個keyCode值,通過不同的值來觸發不同的事件
if (e.keyCode === 37){
$('.c1').css({'background-color':'red'});
}else if(e.keyCode === 39){
$('.c1').css({'background-color':'green'});
}
else {
$('.c1').css({'background-color':'black'});
}
})
// 鍵盤抬起觸發的事件
$(window).keyup(function (e) {
console.log(e.keyCode);
})
input事件:
22期百度:<input type="text" id="search">
<script src="jquery.js"></script>
<script>
$('#search').on('input',function () {
console.log($(this).val());
})
</script>
事件冒泡
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#d1{
background-color: red;
height: 200px;
}
#d2{
background-color: green;
height: 100px;
width: 100px;
}
</style>
</head>
<body>
<div id="d1">
<div id="d2"></div>
</div>
<script src="jquery.js"></script>
<script>
$('#d1').click(function () {
alert('父級標簽');
});
$('#d2').click(function () {
alert('子級標簽');
});
</script>
</body>
</html>
阻止後續事件發生
$('#d1').click(function () {
alert('父級標簽');
});
$('#d2').click(function (e) {
alert('子級標簽');
return false;
// e.stopPropagation();
});
事件委托
//事件委托是通過事件冒泡的原理，利用父標簽去捕獲子標簽的事件，將未來添加進來的某些子標簽自動綁定上事件。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="d1">
<button class="c1">愛的魔力轉圈圈</button>
</div>
<script src="jquery.js"></script>
<script>
$('.c1').on('click',function () {
alert('得港被雪飛調教了,大壯很難受!');
var btn = document.createElement('button');
$(btn).text('愛的魔力轉圈圈');
$(btn).addClass('c1');
console.log(btn);
//添加到div標簽裡面的後面
$('#d1').append(btn);
});
#將'button' 選擇器選中的標簽的點擊事件委托給了$('#d1');
$('#d1').on('click','button',function () {
alert('得港被雪飛調教了,大壯很難受!');
var btn = document.createElement('button');
$(btn).text('愛的魔力轉圈圈');
$(btn).addClass('c1');
console.log(btn);
console.log($(this)) //還是我們點擊的那個button按鈕
//添加到div標簽裡面的後面
$('#d1').append(btn);
});
</script>
</body>
</html>頁面載入和window.onload
1. jquery文件要在使用jquery的代碼之前引入
2. js代碼最好都放到body標簽下麵或者裡面的最下麵來寫
3.window.onload
window.onload = function () {
$('.c1').click(function () {
$(this).css({'background-color':'green'});
})
}
4.頁面載入,$(function (){alert('xx');}) -- $(document).ready(function(){});
頁面載入與window.onload的區別
1.window.onload()函數有覆蓋現象，必須等待著圖片資源載入完成之後才能調用
2.jQuery的這個入口函數沒有函數覆蓋現象，文檔載入完成之後就可以調用（建議使用此函數）
示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery.js"></script>
<script>
// 等待整個頁面中的內容全部載入完成之後,觸發window.onload對應的函數裡面的內容
// window.onload 有覆蓋現象,會被後面的window.onload給重新賦值
window.onload = function () {
$('.c1').click(function () {
$(this).css({'background-color':'green'});
})
}
$(function () {
$('.c1').click(function () {
$(this).css({'background-color':'green'});
})
});
</script>
<script src="xx.js"></script>
<style>
.c1{
background-color: red;
height: 200px;
width: 200px;
}
</style>
</head>
<body>
<div class="c1"></div>
<img src="" alt="">
</body>
</html>
