<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>18_事件綁定與解綁</title> </head> <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> <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> <!-- 1. 事件綁定(2種)： * eventName(function(){}) 綁定對應事件名的監聽, 例如：$('#div').click(function(){}); * on(eventName, funcion(){}) 通用的綁定事件監聽, 例如：$('#div').on('click', function(){}) * 優缺點: eventName: 編碼方便, 但只能加一個監聽, 且有的事件監聽不支持 on: 編碼不方便, 可以添加多個監聽, 且更通用 2. 事件解綁： * off(eventName) 3. 事件的坐標 * event.clientX, event.clientY 相對於視口的左上角 * event.pageX, event.pageY 相對於頁面的左上角 * event.offsetX, event.offsetY 相對於事件元素左上角 4. 事件相關處理 * 停止事件冒泡 : event.stopPropagation() * 阻止事件默認行為 : event.preventDefault() --> <script src="js/jquery-1.10.1.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> /* 需求： 1. 給.out綁定點擊監聽(用兩種方法綁定) 2. 給.inner綁定鼠標移入和移出的事件監聽(用3種方法綁定) 3. 點擊btn1解除.inner上的所有事件監聽 4. 點擊btn2解除.inner上的mouseover事件 5. 點擊btn3得到事件坐標 6. 點擊.inner區域, 外部點擊監聽不響應 7. 點擊鏈接, 如果當前時間是偶數不跳轉 */
//1. 給.out綁定點擊監聽(用兩種方法綁定) /*$('.out').click(function () { console.log('click out') })*/ $('.out').on('click', function () { console.log('on click out') }) //2. 給.inner綁定鼠標移入和移出的事件監聽(用3種方法綁定) /* $('.inner') .mouseenter(function () { // 進入 console.log('進入') }) .mouseleave(function () { // 離開 console.log('離開') }) */ /* $('.inner') .on('mouseenter', function () { console.log('進入2') }) .on('mouseleave', function () { console.log('離開2') }) */ $('.inner').hover(function () { console.log('進入3') }, function () { console.log('離開3') }) //3. 點擊btn1解除.inner上的所有事件監聽 $('#btn1').click(function () { $('.inner').off() }) //4. 點擊btn2解除.inner上的mouseenter事件 $('#btn2').click(function () { $('.inner').off('mouseenter') }) //5. 點擊btn3得到事件坐標 $('#btn3').click(function (event) { // 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 (event) { if(Date.now()%2===0) { event.preventDefault() } }) </script> </body> </html>
區別mouseover與mouseenter
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>19_事件切換</title> </head> <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> <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> <!--
區別mouseover與mouseenter? * mouseover: 在移入子元素時也會觸發, 對應mouseout * mouseenter: 只在移入當前元素時才觸發, 對應mouseleave hover()使用的就是mouseenter()和mouseleave()
區別on('eventName', fun)與eventName(fun) * on('eventName', fun): 通用, 但編碼麻煩 * eventName(fun): 編碼簡單, 但有的事件沒有對應的方法 --> <script src="js/jquery-1.10.1.js" type="text/javascript"></script> <script type="text/javascript"> $('.div1') .mouseover(function () { console.log('mouseover 進入') }) .mouseout(function () { console.log('mouseout 離開') }) $('.div3') .mouseenter(function () { console.log('mouseenter 進入') }) .mouseleave(function () { console.log('mouseleave 離開') }) </script> </body> </html>
事件委托
<!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title>20_事件委托2</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> <!-- 1. 事件委托(委派/代理): * 將多個子元素(li)的事件監聽委托給父輩元素(ul)處理 * 監聽回調是加在了父輩元素上 * 當操作任何一個子元素(li)時, 事件會冒泡到父輩元素(ul) * 父輩元素不會直接處理事件, 而是根據event.target得到發生事件的子元素(li), 通過這個子元素調用事件回調函數 2. 事件委托的2方: * 委托方: 業主 li * 被委托方: 中介 ul 3. 使用事件委托的好處 * 添加新的子元素, 自動有事件響應處理 * 減少事件監聽的數量: n==>1 4. jQuery的事件委托API * 設置事件委托: $(parentSelector).delegate(childrenSelector, eventName, callback) * 移除事件委托: $(parentSelector).undelegate(eventName) --> <script src="js/jquery-1.10.1.js"></script> <script> // 設置事件委托 $('ul').delegate('li', 'click', function () { // console.log(this) this.style.background = 'red' }) $('#btn1').click(function () { $('ul').append('<li>新增的li....</li>') }) $('#btn2').click(function () { // 移除事件委托 $('ul').undelegate('click') }) </script> </body> </html>