jQuery之事件
阿新 • • 發佈：2020-07-13
事件處理
事件繫結：
- 兩種方式
eventName(function(){})：繫結對應事件名的監聽，例如：$('#div').click(function(){})。
on(eventName, funcion(){})：通用的繫結事件監聽，例如：$('#div').on('click', function(){})。
- 優缺點
eventName：編碼方便，但只能加一個監聽，且有的事件監聽不支援。
on：編碼不方便，可以新增多個監聽，且更通用。
- 常用
click/mouseenter/mouseleave/mouseover/mouseout/focus/blur
事件解綁：
off(eventName)：解綁事件監聽。
事件座標：
event.clientX，event.clientY：相對於視口的左上角。
event.pageX，event.pageY：相對於頁面的左上角。
event.offsetX，event.offsetY：相對於事件元素左上角。
圖示：
示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>事件繫結與解綁</title> <style type="text/css"> * { margin: 0px; } .out { position: absolute; width: 200px; height: 200px; top: 20px; left: 10px; background: blue; } .inner { position: absolute; width: 100px; height: 100px; top: 50px; background: red; } .divBtn { position: absolute; top: 250px; } </style> </head> <body style="height: 2000px;"> <div class="out"> 外部DIV <div class="inner">內部div</div> </div> <div class='divBtn'> <button id="btn1">取消繫結所有事件</button> <button id="btn2">取消繫結mouseover事件</button> <button id="btn3">測試事件座標</button> <a href="http://www.baidu.com" id="test4">百度一下</a> </div> <script type="text/javascript" src="../js/jquery.min.js"></script> <script type="text/javascript"> /* * 需求： * 1.給.out繫結點選監聽(用兩種方法繫結) * 2.給.inner繫結滑鼠移入和移出的事件監聽(用3種方法繫結) * 3.點選btn1解除.inner上的所有事件監聽 * 4.點選btn2解除.inner上的mouseover事件 * 5.點選btn3得到事件座標 * 6.點選.inner區域，外部點選監聽不響應 * 7.點選連結，如果當前時間是偶數不跳轉 */ $(function (){ //1.給.out繫結點選監聽(用兩種方法繫結) $('.out').click(function () { console.log('out click1'); }); $('.out').on('click', function () { console.log('out clicked2'); }); //2.給.inner繫結滑鼠移入和移出的事件監聽(用3種方法繫結) $('.inner') .mouseenter(function () { console.log('進入...') }) .mouseleave(function () { console.log('離開...') }); $('.inner') .on('mouseenter', function () { console.log('進入...') }) .on('mouseleave', function () { console.log('離開...') }); $('.inner').hover(function () { console.log('進入...') }, function () { console.log('離開...') }); //3.點選btn1解除.inner上的所有事件監聽 $('#btn1').click(function () { $('.inner').off() }); //4.點選btn2解除.inner上的mouseover事件 $('#btn2').click(function () { $('.inner').off('mouseover') }); //5.點選btn3得到事件座標 $('#btn3').click(function (event) { console.log(event.offsetX, event.offsetY) console.log(event.clientX, event.clientY) console.log(event.pageX, event.pageY) }); //6.點選.inner區域，外部點選監聽不響應 $('.inner').click(function (event) { console.log('click inner') //停止事件冒泡 event.stopPropagation() }); //7.點選連結，如果當前時間是偶數不跳轉 $('#test4').click(function () { var time = Date.now(event) alert(time) if(time%2===0) { //阻止事件預設行為 event.preventDefault() } }); }); </script> </body> </html>
事件切換
區別mouseover與mouseenter？
mouseover：在移入子元素時也會觸發，對應mouseout。
mouseenter：只在移入當前元素時才觸發，對應mouseleave。
hover()：同時繫結滑鼠移入和移出監聽，使用的就是mouseenter()和mouseleave()。
示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>事件切換</title> <style type="text/css"> * { margin: 0px; } .div1 { position: absolute; width: 200px; height: 200px; top: 50px; left: 10px; background: olive; } .div2 { position: absolute; width: 100px; height: 100px; top: 50px; background: red; } .div3 { position: absolute; width: 200px; height: 200px; top: 50px; left: 230px; background: olive; } .div4 { position: absolute; width: 100px; height: 100px; top: 50px; background: yellow; } .divText{ position: absolute; top: 330px; left: 10px; } </style> </head> <body> <div class="divText"> 區分滑鼠的事件 </div> <div class="div1"> div1..... <div class="div2">div2....</div> </div> <div class="div3"> div3..... <div class="div4">div4....</div> </div> <script type="text/javascript" src="../js/jquery.min.js"></script> <script type="text/javascript"> $('.div1').mouseover(function () { console.log('移入div1或其子元素') }).mouseout(function () { console.log('移出div1或其子元素') }); $('.div3').mouseenter(function () { console.log('移入div3元素') }).mouseleave(function () { console.log('移出div3元素') }); $('.div3').hover(function () { console.log('移入div33元素') this.style.background = 'red' }, function () { console.log('移出div33元素') this.style.background = 'blue' }); </script> </body> </html>
事件委派(委託)
說明：
將多個子元素(li)的事件監聽委託給父輩元素(ul)處理。
事件監聽繫結在父元素上，當操作任何一個子元素(li)時，事件會冒泡到父輩元素(ul)。
父輩元素不會直接處理事件，而是根據event.target得到發生事件的子元素(li)，通過這個子元素呼叫事件回撥函式。
事件委託的雙方：
委託方：業主（li）
被委託方：中介（ul）
好處：
新增新的子元素，自動有事件響應處理。
減少事件監聽的數量：n==>1。
事件委託API：
$(parentSelector).delegate(childrenSelector, eventName, callback)：設定事件委託。
$(parentSelector).undelegate(eventName)：移除事件委託。
示例一：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>事件委託</title> </head> <body> <ul> <li>11111</li> <li>1111111</li> <li>111111111</li> <li>11111111111</li> </ul> <li>22222</li> <br> <button id="btn">新增新的li</button> <br> <script type="text/javascript" src="../js/jquery.min.js"></script> <script type="text/javascript"> /* * 需求： * 1.點選 li 背景就會變為紅色 * 2.點選 btn1 就新增一個 li */ $(function (){ //1.點選li背景就會變為紅色 $('ul>li').click(function () { this.style.background = 'red' }); //2.點選btn1就新增一個li $('#btn').click(function () { $('ul').append('<li>xxxxxxxxxxxx</li>') }) }); </script> </body> </html>
示例二：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>事件委託</title> </head> <body> <ul> <li>1111</li> <li>2222</li> <li>3333</li> <li>4444</li> </ul> <li>22222</li> <br> <button id="btn1">新增新的li</button> <button id="btn2">刪除ul上的事件委託的監聽器</button> <script type="text/javascript" src="../js/jquery.min.js"></script> <script type="text/javascript"> $(function (){ //事件委託 $('ul').delegate('li', 'click', function () { this.style.background = 'red' }); $('#btn1').click(function () { $('ul').append('<li>xxxxxxxxx</li>') }); $('#btn2').click(function () { //移除事件委託 $('ul').undelegate() }); }); </script> </body> </html>
事件相關
event.stopPropagation()：停止事件冒泡。
event.preventDefault()：阻止事件預設行為。