js基礎（事件）
阿新 • • 發佈：2018-05-13
tlist 瀏覽器兼容 設置 elements tar window對象 ble CI CA
window.onload = function(){ /* * 當鼠標在areaDiv中移動時，在showMsg中來顯示鼠標的坐標 */ //獲取兩個div var areaDiv = document.getElementById("areaDiv"); var showMsg = document.getElementById("showMsg"); /* * onmousemove * - 該事件將會在鼠標在元素中移動時被觸發 * * 事件對象 * - 當事件的響應函數被觸發時，瀏覽器每次都會將一個事件對象作為實參傳遞進響應函數, * 在事件對象中封裝了當前事件相關的一切信息，比如：鼠標的坐標 鍵盤哪個按鍵被按下 鼠標滾輪滾動的方向。。。*/ areaDiv.onmousemove = function(event){ /* * 在IE8中，響應函數被處罰時，瀏覽器不會傳遞事件對象， * 在IE8及以下的瀏覽器中，是將事件對象作為window對象的屬性保存的 */ /*if(!event){ event = window.event; }*/ //解決事件對象的兼容性問題event = event || window.event; /* * clientX可以獲取鼠標指針的水平坐標 * cilentY可以獲取鼠標指針的垂直坐標 */ var x = event.clientX; var y = event.clientY; //alert("x = "+x + " , y = "+y);//在showMsg中顯示鼠標的坐標 showMsg.innerHTML = "x = "+x + " , y = "+y; }; };
<style type="text/css"> #box1{ width: 100px; height: 100px; background-color: red; /* * 開啟box1的絕對定位 */ position: absolute; } </style> <script type="text/javascript"> window.onload = function(){ /* * 使div可以跟隨鼠標移動 */ //獲取box1 var box1 = document.getElementById("box1"); //綁定鼠標移動事件 document.onmousemove = function(event){ //解決兼容問題 event = event || window.event; //獲取滾動條滾動的距離 /* * chrome認為瀏覽器的滾動條是body的，可以通過body.scrollTop來獲取 * 火狐等瀏覽器認為瀏覽器的滾動條是html的， */ var st = document.body.scrollTop || document.documentElement.scrollTop; var sl = document.body.scrollLeft || document.documentElement.scrollLeft; //var st = document.documentElement.scrollTop; //獲取到鼠標的坐標 /* * clientX和clientY * 用於獲取鼠標在當前的可見窗口的坐標 * div的偏移量，是相對於整個頁面的 * * pageX和pageY可以獲取鼠標相對於當前頁面的坐標 * 但是這個兩個屬性在IE8中不支持，所以如果需要兼容IE8，則不要使用 */ var left = event.clientX; var top = event.clientY; //設置div的偏移量 box1.style.left = left + sl + "px"; box1.style.top = top + st + "px"; }; }; </script> </head> <body style="height: 1000px;width: 2000px;"> <div id="box1"></div> </body>
window.onload = function(){ /* * 事件的冒泡（Bubble） * - 所謂的冒泡指的就是事件的向上傳導，當後代元素上的事件被觸發時，其祖先元素的相同事件也會被觸發 * - 在開發中大部分情況冒泡都是有用的,如果不希望發生事件冒泡可以通過事件對象來取消冒泡 * */ //為s1綁定一個單擊響應函數 var s1 = document.getElementById("s1"); s1.onclick = function(event){ event = event || window.event; alert("我是span的單擊響應函數"); //取消冒泡 //可以將事件對象的cancelBubble設置為true，即可取消冒泡 event.cancelBubble = true; }; //為box1綁定一個單擊響應函數 var box1 = document.getElementById("box1"); box1.onclick = function(event){ event = event || window.event; alert("我是div的單擊響應函數"); event.cancelBubble = true; }; //為body綁定一個單擊響應函數 document.body.onclick = function(){ alert("我是body的單擊響應函數"); }; }; <body> <div id="box1"> 我是box1 <span id="s1">我是span</span> </div> </body>
事件的委派：
window.onload = function(){ var u1 = document.getElementById("u1"); //點擊按鈕以後添加超鏈接 var btn01 = document.getElementById("btn01"); btn01.onclick = function(){ //創建一個li var li = document.createElement("li"); li.innerHTML = "<a href=‘javascript:;‘ class=‘link‘>新建的超鏈接</a>"; //將li添加到ul中 u1.appendChild(li); }; /* * 為每一個超鏈接都綁定一個單擊響應函數 * 這裏我們為每一個超鏈接都綁定了一個單擊響應函數，這種操作比較麻煩， * 而且這些操作只能為已有的超鏈接設置事件，而新添加的超鏈接必須重新綁定 */ //獲取所有的a var allA = document.getElementsByTagName("a"); //遍歷 /*for(var i=0 ; i<allA.length ; i++){ allA[i].onclick = function(){ alert("我是a的單擊響應函數！！！"); }; }*/ /* * 我們希望，只綁定一次事件，即可應用到多個的元素上，即使元素是後添加的 * 我們可以嘗試將其綁定給元素的共同的祖先元素 * * 事件的委派 * - 指將事件統一綁定給元素的共同的祖先元素，這樣當後代元素上的事件觸發時，會一直冒泡到祖先元素 * 從而通過祖先元素的響應函數來處理事件。 * - 事件委派是利用了冒泡，通過委派可以減少事件綁定的次數，提高程序的性能 */ //為ul綁定一個單擊響應函數 u1.onclick = function(event){ event = event || window.event; /* * target * - event中的target表示的觸發事件的對象 */ //alert(event.target); //如果觸發事件的對象是我們期望的元素，則執行否則不執行 if(event.target.className == "link"){ alert("我是ul的單擊響應函數"); } }; }; </script> <body> <button id="btn01">添加超鏈接</button> <ul id="u1" style="background-color: #bfa;"> <li> <p>我是p元素</p> </li> <li><a href="javascript:;" class="link">超鏈接一</a></li> <li><a href="javascript:;" class="link">超鏈接二</a></li> <li><a href="javascript:;" class="link">超鏈接三</a></li> </ul> </body>
事件的綁定：
/* * 使用 對象.事件 = 函數 的形式綁定響應函數， * 它只能同時為一個元素的一個事件綁定一個響應函數， * 不能綁定多個，如果綁定了多個，則後邊會覆蓋掉前邊的 */ /* * addEventListener() * - 通過這個方法也可以為元素綁定響應函數 * - 參數： * 1.事件的字符串，不要on * 2.回調函數，當事件觸發時該函數會被調用 * 3.是否在捕獲階段觸發事件，需要一個布爾值，一般都傳false * * 使用addEventListener()可以同時為一個元素的相同事件同時綁定多個響應函數， * 這樣當事件被觸發時，響應函數將會按照函數的綁定順序執行 * * 這個方法不支持IE8及以下的瀏覽器 */ btn01.addEventListener("click",function(){ alert(1); },false); btn01.addEventListener("click",function(){ alert(2); },false); /* * attachEvent() * - 在IE8中可以使用attachEvent()來綁定事件 * - 參數： * 1.事件的字符串，要on * 2.回調函數 * * - 這個方法也可以同時為一個事件綁定多個處理函數， * 不同的是它是後綁定先執行，執行順序和addEventListener()相反 */ btn01.attachEvent("onclick",function(){ alert(1); }); btn01.attachEvent("onclick",function(){ alert(2); }); //定義一個函數，用來為指定元素綁定響應函數 /* * addEventListener()中的this，是綁定事件的對象 * attachEvent()中的this，是window * 需要統一兩個方法this */ /* * 參數： * obj 要綁定事件的對象 * eventStr 事件的字符串(不要on) * callback 回調函數 */ function bind(obj , eventStr , callback){ if(obj.addEventListener){ //大部分瀏覽器兼容的方式 obj.addEventListener(eventStr , callback , false); }else{ /* * this是誰由調用方式決定 * callback.call(obj) */ //IE8及以下 obj.attachEvent("on"+eventStr , function(){ //在匿名函數中調用回調函數 callback.call(obj); }); } } bind(btn01 , "click" , function(){ alert(this); });
事件的傳播：
/* * 事件的傳播 * - 關於事件的傳播網景公司和微軟公司有不同的理解 * - 微軟公司認為事件應該是由內向外傳播，也就是當事件觸發時，應該先觸發當前元素上的事件， * 然後再向當前元素的祖先元素上傳播，也就說事件應該在冒泡階段執行。 * - 網景公司認為事件應該是由外向內傳播的，也就是當前事件觸發時，應該先觸發當前元素的最外層的祖先元素的事件， * 然後在向內傳播給後代元素 * - W3C綜合了兩個公司的方案，將事件傳播分成了三個階段 * 1.捕獲階段 * - 在捕獲階段時從最外層的祖先元素，向目標元素進行事件的捕獲，但是默認此時不會觸發事件 * 2.目標階段 * - 事件捕獲到目標元素，捕獲結束開始在目標元素上觸發事件 * 3.冒泡階段 * - 事件從目標元素向他的祖先元素傳遞，依次觸發祖先元素上的事件 * * - 如果希望在捕獲階段就觸發事件，可以將addEventListener()的第三個參數設置為true * 一般情況下我們不會希望在捕獲階段觸發事件，所以這個參數一般都是false * * - IE8及以下的瀏覽器中沒有捕獲階段 */
js基礎（事件）