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

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

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

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

復(fù)制代碼 代碼如下:

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

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

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

復(fù)制代碼 代碼如下:

oP.onclick = function(oEvent){
}

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

復(fù)制代碼 代碼如下:

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

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

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

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

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

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

復(fù)制代碼 代碼如下:

<script language="javascript">
            function handle(oEvent) {
                var disp = document.getElementById("display");
                if (window.event) oEvent = window.event; //處理兼容性，獲得對(duì)象
                if (oEvent.type == "click")
                    disp.innerHTML += "你點(diǎn)擊了我！";
                else if (oEvent.type == "mouseover")
                    disp.innerHTML += "你移動(dòng)到我的上面";
            }
            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添加了兩個(gè)事件響應(yīng)函數(shù)，而這兩個(gè)事件卻是同一個(gè)函數(shù)

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

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

代碼如下：

復(fù)制代碼 代碼如下:

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

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

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

代碼如下：

復(fù)制代碼 代碼如下:

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

而screenX和sreenY則指的是鼠標(biāo)在整個(gè)計(jì)算機(jī)屏幕的位置，代碼是

復(fù)制代碼 代碼如下:

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

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

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

在IE瀏覽器中，目標(biāo)包含在event對(duì)象的srcElement屬性中，代碼如下

復(fù)制代碼 代碼如下:
var oTarget = oEvent.srcElement;

而在標(biāo)準(zhǔn)的DOM瀏覽器中，目標(biāo)則包含在target屬性中，代碼如下

復(fù)制代碼 代碼如下:
var oTarget = oEvent.Target;

獲取事件的目標(biāo)

復(fù)制代碼 代碼如下:

<script language="javascript">
            function handle(oEvent) {
                var disp = document.getElementById("display");
                if (window.event) oEvent = window.event; //處理兼容性，獲得對(duì)象
                var oTarget;
                if (oEvent.srcElement) //處理兼容性，獲得事件
                    oTarget = oEvent.srcElement;
                else
                    oTarget = oEvent.target;
                disp.innerHTML += "元素名稱：" + oTarget.tagName +"<br>" +  "元素內(nèi)容：" + oTarget.textContent + "<br>"
                +  "之前緊隨的節(jié)點(diǎn)：" + 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>
（補(bǔ)充）Element 對(duì)象的屬性 http://www.w3school.com.cn/xmldom/dom_element.asp
 （補(bǔ)充）Element 對(duì)象的方法 http://www.w3school.com.cn/xmldom/dom_element.asp

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

復(fù)制代碼 代碼如下:

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

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

相關(guān)文章

最新評(píng)論