11.jQuery—事件和篩選器方法
阿新 • • 發佈：2020-08-08
目錄
一、事件
1、事件和事件流
HTML和js的互動是通過事件驅動來實現的，事件流描述的就是頁面接受事件的順序，“DOM2級事件”規定的事件流包括三個階段：（1）事件捕獲階段；（2）處於目標階段；（3）事件冒泡階段。
2、繫結事件的兩種方式：
<script src="jquery-3.1.1.js"></script> <script> //方式一 $('#d1').click(function(){ $(this).css({'background-color':'green'}); }) //方式二 $('#d1').on('click', function(){ $(this).css({'background-color':'green'}); }) </script>
3、常用事件：
- click(function(){}) 滑鼠單擊觸發
- dbclick(function(){}) 滑鼠雙擊觸發
- hover(function(){})
- focus(function(){}) 滑鼠聚焦觸發事件
- blur(function(){}) 滑鼠失焦觸發
- change(function(){}) 內容發生變化，input等
- keydown(function(){}) 鍵盤按下觸發
- keyup(function(){}) 鍵盤彈起觸發
- mouseover(function(){}) 滑鼠移動觸發
- mouseenter(fucntion(){}) 滑鼠進入觸發
mouseover和mouseenter的區別是：mouseover事件是如果該標籤有子標籤，那麼移動到該標籤或者子標籤時會連續觸發，mouseenter事件不敢管有沒有子標籤只觸發一次，表示滑鼠進入這個標籤。
mouseover示例：
4、鍵盤按下和抬起
keydown和keyup事件（鍵盤按下和抬起事件，還有一些其他的key事件），如：按下shift實現批量操作。
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>keydown和keyup</title>
<style>
.c1{
height: 100px;
width: 100px;
background-color:rgb(173, 111, 30);
}
</style>
</head>
<body>
<from name="" id="">
keydown<input type="text" id="k1" value="0"><br>
keyup<input type="text" id="k2">
</from>
<div id="" class="c1"></div>
<script src="jquery-3.1.1.js"></script>
<script>
var num = 0;
//window物件下的,e\event時當前事件物件
$(window).keydown(function(e){
console.log(e.keyCode)
num++;
//$("#k1").val(num)
//e.keyCode 是每個按鍵對應的keyCode值,通過不同的值觸發不同的事件
if(e.keyCode === 37){
$('.c1').css({'background-color':'red'});
}else if(e.keyCode === 39){
$('.c1').css({'background-color':'green'})
}
});
$(window).keyup(function(e){
$('#k2').val(e.keyCode)
})
</script>
</body>
二、事件冒泡
在一個物件上觸發某類事件（比如單擊onclick事件），如果此物件定義了此事件的處理程式，那麼此事件就會呼叫這個處理程式，如果沒有定義此事件處理程式或者事件返回true，那麼這個事件會向這個物件的父級物件傳播，從裡到外，直至它被處理（父級物件所有同類事件都將被啟用），或者它到達了物件層次的最頂層，即document物件（有些瀏覽器是window）。即一個子標籤的事件可能會觸發父級標籤的事件處理函式。
1、阻止事件冒泡
- 阻止事件冒泡：e.stopPropagation()方法
- 阻止預設行為：e.prevenDefault()方法
- return false 在jQuery中可以阻止事件冒泡和預設事件：jQuery不支援事件捕獲
$('a').click(function (ev) {
//方法一：同時阻止預設事件和冒泡事件
ev.preventDefault(); // 阻止預設事件
ev.stopPropagation(); // 再阻止冒泡事件
alert('不再跳轉頁面');
// 方法二：
return false; // 這個可以阻止a標籤的預設事件和冒泡事件
})
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>事件冒泡</title>
<style>
#d1{
background-color: red;
height: 100px;
}
#d2{
background-color: green;
height: 100px;
width: 100px;
}
</style>
</head>
<body>
<div id="d1" class="" >
<div id="d2" class=""></div>
</div>
<script src="jquery-3.1.1.js"></script>
<script>
$('#d1').click(function(){
alert('父級標籤');
});
$('#d2').click(function(e){
alert('子級標籤');
//解決事件冒泡，這樣點選子標籤時，父標籤的的alert不會彈出，阻止事件冒泡
//return false;
//e.stopPropagation();
})
</script>
</body>
三、事件繫結和移除
1、當前dom新增事件的兩種方法
// 方式一：給當前dom元素新增click事件
$('#box').click(fn);
// 方式二：給當前的dom元素繫結事件 bind()
// 語法：jquery物件.bind('事件型別',fn)
$('#box').bind('click mouseenter', function () {
alert('事件被綁定了')
})
2、詳細事件和函式繫結到元素——bind()繫結方法
語法：$(select).bind(event, data,function)
引數：第一個引數是事件型別，常用click,blur,hover等；多個事件型別可以通過將每個空格分隔開來一次繫結。
可以通過傳遞事件型別/處理程式對的物件來同時繫結多個事件處理程式
第二個引數是可選引數，作為envet.data屬性值傳遞給事件物件的額外資料物件
第三個引數是用來繫結的處理函式
function add() {
console.log('click');
}
function add2() {
console.log('mouse-over')
}
// 給jquery物件新增不同的事件
$('#box').bind({
'click': add,
'mouseenter':add2
})
3、移出事件——unbind()
語法：unbind(type,fn)
第一個引數：事件型別。如果不寫引數，移除所有的事件：
// 如果沒有引數表示移除所有事件
$('#box').unbind();
第二個引數：將要移除的函式
$( "#foo").unbind( "click" ，function(){})
4、事件委託
事件委託是通過事件冒泡的原理，利用父標籤去捕獲子標籤的事件，將未來新增進來的某些子標籤自動綁上事件。將字標籤的事件統一給委託父標籤。
事件委託（代理）使用情景：
（1）為DOM中的很多元素繫結相同事件：事件註冊在祖先級元素上，代理其子級元素。可以減少事件註冊數量，節約記憶體開銷，提高效能。
（2）為DOM中尚不存在的元素繫結事件：對js動態新增的子元素可自動繫結事件。
事件代理作用：
（1）效能比較好；（2）針對新建立的元素，直接可以擁有事件。
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>事件委託</title>
</head>
<body>
<div id='d1'>
<button class='b1'>按鈕</button>
</div>
<script src="jquery-3.1.1.js"></script>
<script>
//這裡新增的按鈕不會有繫結事件
// $('.b1').on('click' ,function(){
// alert('轉圈圈');
// var btn = document.createElement('button');
// $(btn).text('按鈕');
// $(btn).addClass('b1');
// console.log(btn);
// //新增到div標籤裡面
// $('#d1').append(btn);
// })
//將button點選事件委託給父輩<div id="d1">的標籤，按鈕有繫結事件
$('#d1').on('click', '.b1' ,function(){
alert('轉圈圈');
var btn = document.createElement('button');
$(btn).text('按鈕');
$(btn).addClass('b1');
console.log(btn);
//新增到div標籤裡面
$('#d1').append(btn);
})
</script>
</body>
四、頁面載入
等待整個頁面中的內容載入完成，觸發window.onload對應的函式裡面的內容
window.onload缺點：有覆蓋現象，會被後面的window.onload給重新複製
採用引入js的方式引入事件，會等待頁面載入完成再觸發，在頁面中寫，只會等待標籤載入完成就觸發對應事件，不會等待圖片和視訊載入完成
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>
五、表單事件
1、change()：表單元素髮生改變時觸發事件
//change()事件————表單元素髮生改變時觸發事件
//此事件僅限於input元素、textarea框、select元素。
//對於選擇框，複選框和單選按鈕，當用戶使用滑鼠進行選擇時，會立即觸發事件。
$('select').change(function(){
console.log($('select option:selected').text());
$('.show').text($('select option:selected').text());
})
2、select()：文字元素髮生改變時觸發事件
// select()事件————文字元素髮生改變時觸發事件
// 僅限於用在input type=text 或 textarea 表單元素
$('#other').select(function () {
console.log($(this).val());
})
3、submit()：表單元素髮生改變時觸發事件
// form表單和服務端有很大的掛鉤：form表單有預設的submit行為，當對input type=submit按鈕點選的時候會觸發form的預設action行為，
// 此時可以呼叫 jquery的submit方法通過e.preventDefault()來阻止預設事件，這樣我們就能動態的跟服務端來發送資料了
$('form').submit(function (ev) {
// alert(1111); // 觸發submit事件彈出1111，再觸發form表單的預設行為跳轉到路飛官網
// 阻止預設事件
ev.preventDefault();
alert(1111); // 只會觸發submit事件彈出1111
})