欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

DOM基礎(chǔ)教程之事件對象

 更新時間：2015年01月20日 15:19:40   投稿：hebedich  
這篇文章主要介紹了DOM基礎(chǔ)教程之事件對象的相關(guān)資料,需要的朋友可以參考下

瀏覽器中的事件都是以對象的形式存在的，同樣ie瀏覽器與標準dom瀏覽器之間存在獲取事件對象上也存在差別。在ie瀏覽器中事件對象是windows對象的一個屬性event，訪問通常采用如下方法。

復制代碼 代碼如下:

oP.onclick = function(){
var oEvent = window.event;
}

盡管它是window對象屬性，但event對象還是只能在事件發(fā)生時被訪問，所有的事件處理函數(shù)執(zhí)行完之后，該對象就消失了。

而標準的dom規(guī)定event對象必須作為唯一的參數(shù)傳給事件處理函數(shù)。一次在類似火狐瀏覽器中訪問事件對象通常作為參數(shù)，代碼如下：

復制代碼 代碼如下:

oP.onclick = function(oEvent){
}

因此，為了兼容兩種瀏覽器，通常采用下面的方法

復制代碼 代碼如下:

oP.onclick = function(oEvent){
if(window.event)oEvent = window.event;
}

瀏覽器在獲取了事件的對象后就可以通過它的一系列屬性和方法處理各種事件了，例如鼠標事件，鍵盤事件和瀏覽器事件。等

以下羅列了常用的屬性和方法：

從以上可以看出，兩類瀏覽器還是有一些相似之處，例如type屬性便是各種瀏覽器所兼容的，它表示獲取事件的類型，返回類似“click”，“mousemove”之類的值。

這對于同一個函數(shù)處理多個種類事件十分有用。

如下：同一個函數(shù) 處理多種事件。

復制代碼 代碼如下:

<script language="javascript">
            function handle(oEvent) {
                var disp = document.getElementById("display");
                if (window.event) oEvent = window.event; //處理兼容性，獲得對象
                if (oEvent.type == "click")
                    disp.innerHTML += "你點擊了我！";
                else if (oEvent.type == "mouseover")
                    disp.innerHTML += "你移動到我的上面";
            }
            window.onload = function() {
                var oP = document.getElementById("box");
                oP.onclick = handle;
                oP.onmouseover = handle;
            }
        </script>
        <div>
            <div id="box" style="width:100px;height:100px;background:#ddd;"></div>
            <p id="display">Click Me</p>
        </div>

以上代碼給id="box"的div添加了兩個事件響應函數(shù)，而這兩個事件卻是同一個函數(shù)

在這函數(shù)中首先考慮兼容獲得事件對象，然后利用type屬性盤對事件的名稱。

在檢測shift、alt、ctrl這三個按鍵時，兩類瀏覽器使用的方法也完全一樣，都具有 shiftKey，altKey，ctrlKey這三個屬性，

代碼如下：

復制代碼 代碼如下:

var bShift = oEvent.shiftKey;
var bAlt = oEvent.altKey;
var bCtrl = oEvent.ctrlKey;

另外，在獲取鼠標指針上，兩類瀏覽器使用的方法都一樣，都具有clientX、clientY和screenX、screenY。

其中，clientX和clientY表示鼠標在客戶端區(qū)域的位置，不包括瀏覽器的狀態(tài)欄，菜單欄等。

代碼如下：

復制代碼 代碼如下:

var iClientX = oEvent.clientX;
var iClientY = oEvent.clientY;

而screenX和sreenY則指的是鼠標在整個計算機屏幕的位置，代碼是

復制代碼 代碼如下:

var iScreenX = oEvent.screenX;
var iScreenY =  oEvent.screenY;

很多時候，開發(fā)者想知道事件是由那個對象觸發(fā)的，即事件的目標（target）。

假設(shè)<p>元素分配onclick事件處理函數(shù)，觸發(fā)click事件時<p>就會被認為是目標。

在IE瀏覽器中，目標包含在event對象的srcElement屬性中，代碼如下

復制代碼 代碼如下:
var oTarget = oEvent.srcElement;

而在標準的DOM瀏覽器中，目標則包含在target屬性中，代碼如下

復制代碼 代碼如下:
var oTarget = oEvent.Target;

獲取事件的目標

復制代碼 代碼如下:

<script language="javascript">
            function handle(oEvent) {
                var disp = document.getElementById("display");
                if (window.event) oEvent = window.event; //處理兼容性，獲得對象
                var oTarget;
                if (oEvent.srcElement) //處理兼容性，獲得事件
                    oTarget = oEvent.srcElement;
                else
                    oTarget = oEvent.target;
                disp.innerHTML += "元素名稱：" + oTarget.tagName +"<br>" +  "元素內(nèi)容：" + oTarget.textContent + "<br>"
                +  "之前緊隨的節(jié)點：" + oTarget.textContent + "<br>"
                ;
            }
            window.onload = function() {
                var oP = document.getElementById("box");
                oP.onclick = handle;
            }
        </script>
        <div>
            <div id="box" style="width:100px;height:100px;background:#ddd;">
                box內(nèi)容
            </div>
            <p id="display"></p>
        </div>
（補充）Element 對象的屬性 http://www.w3school.com.cn/xmldom/dom_element.asp
 （補充）Element 對象的方法 http://www.w3school.com.cn/xmldom/dom_element.asp

由于事件的目標在兩類瀏覽器上不同，因此代碼必須保證兼容性，通常的做法就是直接將對象作為if語句的條件，代碼如下

復制代碼 代碼如下:

    if (oEvent.srcElement)
                    oTarget = oEvent.srcElement;
                else
                    oTarget = oEvent.target;

這種方法在其它屬性中也是常用的。

相關(guān)文章

最新評論