javascript 事件處理 IE和標準dom 的差別
一個事件其實在頁面上 有多個元素相應事件處理,點選頁面上的一個button,會發生什麼?其實 是相當於先後點選了按鈕,它的容器,及這個頁面.也就是說沒一個元素都按照特定的順序響應那個事件.事件的發生順序在IE和mozilla在事件支援上的主要差別.
事件流 冒泡技術.冒泡型事件的基本思想,事件按照從特定的事件目標開始到最不確定的事件目標.例如:
<html>
<head>
test
<head>
<bodyonclick="handle()">
<div onclick="handle1()">click</div>
</body>
</html>
IE5.5順序是div --body--document.
在IE6中div-body--html--document.
mozilla的順序是div--body--html--html--document--window.
還有另外一種技術:捕獲型事件,它的執行順序正好和冒泡技術相反,從document開始到div結束.
DOM事件流
同時支援2種事件,但是捕獲型事件先發生.2種事件流會觸及DOM中的所有物件,從document開始,也在document結束.DOM事件流最獨特的性質是,文字節點也會觸發事件(在IE不會),所以如果點選click, dom事件是這樣的:
首先window--document--body--div--click.
然後click--div--body--document--window.
所以一個事件處理函式在DOM瀏覽器中會執行2次.
給事件指定處理函式 的做法比較簡單
var obj = document.getElementById("id");
obj.onclick=function(){}
或者直接在html標籤里加onclick="function-name"
這兩種方式是在目前所有流行的瀏覽器種都可以使用.但是如何為每個事件分配多個處理函式呢?
IE的做法:
在IE 中,每個元素和window物件都有2個方法:attachEvent()和detachEvent();attachEvent用來給一個事件附加事件處理函式. 而detachEvent用來將事件處理函式分離.每個方法都有2個引數:要分配的事件處理函式的名字(例如:onclick)和一個函式引用.
例如:
var fnClick=function(){alert("ss")}
var fnClick1=function(){alert("sss")}
var obj=document.getElementById("id")obj.attachEvent("onclick",fnClick);
obj.attachEvent("onclick",fnClick1);
obj.detachEvent("onclick",fnClick);
事件的執行順序是按照新增的順序執行的.
DOM方法
dom中對應的方法是addEventListener()和removeEventListener ,這兩個方法有3個引數,事件名稱,要分配的函式和處理函式是用於冒泡階段還是捕獲階段.如果事件處理函式是用在捕獲階段,第三個引數為true,冒泡階段為false.用法和IE中的用法一樣,不再多說了,就舉一個例子吧:
var fnClick=function(){alert("ss")}
var fnClick1=function(){alert("sss")}
var obj=document.getElementById("id")obj.addEventListener("click",fnClick,false);
obj.addEventListener("click",fnClick1,false);
obj.removeEventListener("click",fnClick,false);
注意這裡的是事件名稱"click",不是要分配的事件處理函式的名字"onclick",自己體會一下吧.
如何獲取事件物件:
獲取事件資訊是很重要的事情,事件物件只在事件發生時被建立,而且只有在事件處理函式中可以訪問,當所有的事件處理函式結束後,事件物件被銷燬.
IE和DOM在獲取事件物件上也是有差別的.
IE中,事件物件時window的一個屬性event,也就是說必須在事件處理函式中這樣訪問:
obj.onclick=function(){obj 1= window.event;}
儘管它是window的屬性,event物件也是隻能在事件發生時訪問.DOM的準則說明,event物件必須座位唯一的引數傳遞給事件處理函式,所以在DOM瀏覽器中訪問物件有兩種方法:
1.obj.onclick=function(){obj1=arguments[0]}
2.obj.onclick=function(envent){}
相關推薦
javascript 事件處理 IE和標準dom 的差別
一個事件其實在頁面上 有多個元素相應事件處理,點選頁面上的一個button,會發生什麼?其實 是相當於先後點選了按鈕,它的容器,及這個頁面.也就是說沒一個元素都按照特定的順序響應那個事件.事件的發生順序在IE和mozilla在事件支援上的主要差別. 事件流 冒泡技術.冒
javascript事件處理程序
跨瀏覽器 包括 document 事件 else if asc 事件處理程序 瀏覽器 操作 javascript 事件處理程序 1、普通事件處理程序 <input type="button" value="click me" onclick="sh
javascript事件委托和jQuery事件綁定on、off 和one
作用 clas title 現實 調用 指定 更強 die() 停止 一. 事件委托什麽是事件委托？用現實中的理解就是：有100 個學生同時在某天中午收到快遞，但這100 個學生不可能同時站在學校門口等，那麽都會委托門衛去收取，然後再逐個交給學生。而在jQuery 中，我們
JavaScript 事件對內存和性能的影響
img child use val 是否 otc als 字符串轉換 oot 程序代碼： <%-- Created by IntelliJ IDEA. User: 喬克叔叔 Date: 2017/12/26 Time: 16:45
javascript事件觸發器fireEvent和dispatchEvent
轉載自：https://www.cnblogs.com/tiger95/p/6962059.html javascript事件觸發器fireEvent和dispatchEvent 事件觸發器就是用來觸發某個元素下的某個事件，IE下fireEvent方法，高階瀏覽器（chro
javascript事件處理
event無處不在，用一段簡單的程式碼來演示click事件。 <section> <button id="button">點選切換背景。</button> </section> <script>
JavaScript事件處理程式
前言 事件就是使用者或瀏覽器自身執行的某種動作。諸如 click、load 和 mouseover，都是事件的名字。而響應某個事件的函式就叫做事件處理程式（或事件偵聽器）。 事件處理程式的名字以 on 開頭，因此 click 事件的事件處理程式就是 onclic
javascript事件詳解和事件冒泡, 捕獲介紹, 事件委託經典例子
事件 如何繫結事件 ele.onxxx = function(event) { } 相容性好, 但是一個元素的同一個事件上只能繫結一個處理程式 基本等同於寫在HTML行間 obj.addEv
javascript事件處理的三種方式
問題描述：如何實現如下功能 單擊輸入框時，提示資訊消失，輸入框背景變黃色，但在瀏覽器其他地方後輸入框顯示提示訊息 <body> <input type="text" i
onchange事件在IE和FF下的表現及解決方案
在最近做的一個專案中，有這麼一個功能點：頁面上有一個checkbox，當用戶選擇或者取消選擇該checkbox時會向後臺發一個jsonp請求。當時的實現是為這個checkbox新增一個onchange事件，但結果卻出人意料，為此，我深入的研究了一下，發現了onchange事
JavaScript事件的分類和介紹
1、關於事件 在我們使用JavaScript編寫指令碼語言時,會發現我們會常常用到各種事件,如簡單的單擊事件onclick (通過滑鼠點選觸發事件), onkeydown(鍵盤事件 按下鍵盤上任意健值觸發)等等, 通過對這些事件的設定,javascr
js 處理 ie和firefox window.frames 相容問題
在做專案的時候網頁裡巢狀iframe時想對iframe物件進行操作時ie和firefox是不同的。 例如： <iframe id="xx1" scrolling="auto" frameborder="0" width="100%" height="100%" sr
Javascript事件處理程式碼的三種寫法
1.作為HTML屬性值的事件處理程式 HTML程式碼<input name="btn" type="button" id="btn" value="按鈕" onclick="alert('mzwu.com');" /> 2.作為JavaScript屬性的事件
JavaScript 事件對記憶體和效能的影響
分析： 事件處理程式本質上是一種函式，是一種物件，存放在記憶體中，設定大量的事件處理程式會使記憶體中的物件變多，Web 程式的效能會變得越來越差，使用者體驗很不好。 為了更好地利用好事件處理程式，便出現了事件委託，用來提升效能。 事件委
javascript學習筆記（五）：異常捕獲和事件處理
log 類型 按鈕 輸入 button lan yellow logs 代碼 異常捕獲 Try{ 發生異常的代碼塊 }catch(err){ 異常信息處理 } 1 <!DOCTYPE html> 2 <html> 3 <head
IE和DOM事件流、普通事件和綁定事件的區別
strong clas doc cap () 添加多個 nbsp class 器） IE和DOM事件流的區別 IE采用冒泡型事件 Netscape（網絡信息瀏覽器）使用捕獲型事件 DOM使用先捕獲後冒泡型事件 示例： <body> <div
JavaScript添加IE事件處理程序
als 不能 type light div 匿名函數 綁定 use gpo IE和其他主流的瀏覽器之間有很多的不兼容，有一些其他瀏覽器支持的方法在IE中並不能完美的支持，首先哪些支持呢？ 1、直接在HTML代碼的元素屬性的位置為事件綁定處理程序； 2、使
JavaScript和HTML事件處理程式屬性中的this的含義
HTML裡事件處理程式屬性中的this: HTML文件裡事件處理程式屬性中的this表示觸發此事件的元素。例如： <iframe id="iframe" src="{{url}}" width="{{iframewidth}}" height="{{iframehe
跨IE和Chrome瀏覽器事件處理的解決辦法
一、事件流 事件流描述的是從頁面中接受事件的順序。 IE的事件流是事件冒泡流，而Netscape的事件流是事件捕獲流 1、事件冒泡 事件冒泡，即事件最開始由最具體的元素(文件中巢狀層次最深的那個節點)
W3C的標準DOM事件模型和IEDOM事件模型的區別
在瀏覽器解析事件的時候，有兩種觸發方式，一種叫做Bubbling(冒泡)，另外一種叫做Capturing(捕獲)。由上圖可以看出來，冒泡的方式效果就是當一個DOM元素的某事件例如click事件被fire時，依次它的父元素的click事件也被fire(觸發)，一直