js過度事件

① js觸發onchange事件的方法說明

js中onchange事件是在客戶端改變輸入控制項的值，比如一個textbox，會出發的一個事件。但是如果回在js代碼中改變答一個textbox的value，而不是通過鍵盤輸入改變一個textbox值的話，是不會出發onchange事件的。
那麼，如何在js代碼模式通過代碼觸發textbox控制項的onchange事件呢，經過查閱資料，發現js提供了一個方法，可以觸發控制項的應該是所有事件。object.fireEvent()方法，使用方法如
object.fireEvent('onchange')，即可觸發控制項的onchange事件。
同理，js中使用fireEvent方法還可以觸發其他的空間事件。
•補充一下，上述的fireEvent方法，在firefox瀏覽器並不支持，那麼，如果想在ie和ff都可以運行的話，可是嘗試下面的代碼。
復制代碼
代碼如下:
if
(obj.fireEvent)
{
obj.fireEvent('onchange');
}
else
{
obj.onchange();
}
也就是判斷一下fireEvent事件是否可用，不可用則直接使用onchange()方法。

② js事件問題

試試這樣寫：

將變數名status改成condition。因為在瀏覽器中，有一個全局變數window.status=""用來代表你想要在狀態欄顯示的文字，而這個全局變數的類型是字元串，因此你聲明的status，其實是一個字元串格式的，並不是Boolean。所以盡量不要使用status作為變數名。

如果有用的話請採納一下，感謝

③ 前端面試題，js事件機制是什麼

事件代理，用到了在 JavaSciprt 事件中的兩個特性：事件冒泡 和 目標元素。使用事件代理，我們可以把事件處理器添加到一個元素上，等待一個事件從它的子級元素里冒泡上來，並且可以得知這個事件是從哪個元素開始的。

改進後的 js 代碼如下

④ 匯總js事件相關及事件處理模型

js事件是為了實現用戶交互，比如當用戶滑鼠點擊或者鍵盤輸入時，瀏覽器會監聽截獲並且通知js做出反饋執行相應的函數，實現交互。
js的事件類型有很多，我們先來大概總結一下常用的JS事件

click點擊事件、mousedown滑鼠按下事件、mousemove滑鼠移動事件、mouseup滑鼠抬起事件
contextmenu右鍵出菜單事件、mouseenter/mouseover滑鼠進入事件、mouserleave/mouseout滑鼠離開事件

可通過事件對象的button屬性來區分是左鍵\滾輪\右鍵，分別對應值 0 / 1 / 2
DOM3規定：click事件只能監聽左鍵；只能通過mousedown和mouseup來判斷滑鼠鍵

keydown某鍵被按下時、keyup被松開時、keypress按下並且松開時

觸發順序：先 keydown，然後keypress，最後keyup

keydown和keypress的區別：

input：文本變化時觸發
change：聚焦或失去焦點時判斷狀態是否改變，發生改變是觸發change事件
focus：聚焦時觸發
blur：失去焦點時觸發

利用focus和blur可模擬placeholder

scroll：滾動條滾動時
load：頁面載入完觸發
abort：圖像的載入失敗
dblclick：雙擊事件
error：當載入圖像和文檔時發生錯誤
resize：窗口或者框架被重新調整大小
select：文本被選中時
reset：點擊重置按鈕時
submit：點擊提交按鈕時

接著看如何給DOM元素綁定事件處理函數

兼容性很好
但是根據js的特點，這種賦值的方式肯定會被後面的值覆蓋。因此這種方式綁定事件處理函數規則是：同一個元素同一個事件只能綁定一個處理函數。等同於第一種寫在行間。

IE8及以下不兼容
通過addEventListener綁定的方式，同個元素的同一個事件可以綁定多個處理函數，不會被覆蓋。

attachEvent跟addEventListener 基本一致，也是同一個元素的同一個事件可以綁定多個處理函數，不會被覆蓋。不同的是attachEvent可以綁定的函數是可以重復的，即即使綁定同一個函數都不會不覆蓋。

以上幾種事件綁定方式裡面的this指向有點區別：

也比較好理解，IE獨有的特殊一點指向window，其他都指向dom元素本身

封裝一個兼容性的方法，用於綁定事件：

有的時候我們希望解除事件處理函數，那怎麼辦呢？

其實解除事件處理函數也對應有辦法方法：
1. ele.onxxx = false / ' ' / null
2. ele.removeEventListener(type,fnName,false)
3. ele.attachEvent('on' + type,fnName)

值得注意的是：若干綁定的事件處理函數是匿名函數，則無法解除綁定！

不知道有沒有發現，在上面綁定事件處理函數的時候，處理函數有個參數e或者叫event，其實是一個事件對象

事件對象就是處理函數裡面的一個參數，說白了就是瀏覽器打包好的一個對象自動傳入到處理函數的第一個參數中。
為了兼容IE一般這么寫： e = e || window.event
事件對象會有個屬性target，這個target叫事件源對象，記錄可事件具體在誰身上觸發的那個源頭
同樣IE上事件源對象是e.srcElement，谷歌兩個都有
所以為了兼容IE一般獲取事件源對象是這么來寫：

當瀏覽器發展到第四代時(IE4及Netscape4)，瀏覽器開發團隊遇到了一個很有意思的問題：頁面的哪一部分會擁有某個特定的事件？想像畫在一張紙上的一組同心圓。如果把手指放在圓心上，那麼手指指向的不是一個圓，而是紙上的所有圓
兩家公司的瀏覽器開發團隊在看待瀏覽器事件方面還是一致的。如果單擊了某個按鈕，他們都認為單擊事件不僅僅發生在按鈕上，甚至也單擊了整個頁面
但有意思的是，IE和Netscape開發團隊居然提出了差不多是完全相反的事件流的概念。IE的事件流是事件冒泡流，而Netscape的事件流是事件捕獲流。事件冒泡和事件捕獲稱為兩種事件處理模型

IE的事件流叫做事件冒泡(event bubbling)， 事件冒泡是結構上（非視覺上）嵌套的函數存在事件冒泡功能，即同一事件自子元素冒泡向父元素（自底向上）
[注意]所有現代瀏覽器都支持事件冒泡
但在具體實現在還是有一些差別。IE9、Firefox、Chrome、Safari將事件一直冒泡到window對象

而事件捕獲的思想是不太具體的節點應該更早接收到事件，而最具體的節點應該最後接收到事件。事件捕獲的用意在於在事件到達預定目標之前就捕獲它
即事件捕獲是指： 結構上（非視覺上）嵌套的元素存在事件捕獲功能，即同一事件自父元素冒泡向子元素（自頂向下）
注意IE上沒有事件捕獲，Chrome和新版本的Firefox等都實現了

一個dom元素的一個事件類型綁定的一個處理函數只能存在一種事件模型，要麼事件冒泡要麼事件捕獲。正常的通過addEventListener(type,fn,false)綁定事件時，最後一個參數默認是false表示的是，事件冒泡模型。如果改成true，立即變成事件捕獲模型

如果一個dom元素的一個事件類型綁定了兩個處理函數，兩個函數的事件處理模型一個是事件冒泡一個是事件捕獲，觸發順序是先捕獲，後冒泡。

focus、blur、change、submit、reset、select等事件類型不冒泡

可以 利用事件冒泡和事件源對象可以叫事件委託給父元素

利用事件冒泡和事件源對象進行處理
優點：
性能好，不需要循環所有元素一個個綁定事件
靈活，當有其他新的子元素時，不需要重新綁定事件。

有的時候，我們不希望有冒泡功能，那我們怎麼取消事件冒泡呢？

封裝一個都好使的取消冒泡函數

有的時候我們需要阻止一些瀏覽器默認的事件
比如：表單提交、a鏈接跳轉、右鍵菜單等
有幾種方式：

參考資料：
DOM事件流的三個階段
深入理解DOM事件機制系列第一篇——事件流
JS事件匯總
JS事件模型
事件1（上）
事件1（下）
DOM級別與DOM事件
DOM事件機制解惑
事件模型
JavaScript 事件委託詳解
JavaScript 事件的學與記：stopPropagation 和 stopImmediatePropagation
event.target和event.currentTarget的區別
js怎麼區分出點擊的是滑鼠左鍵還是右鍵？

⑤ js事件！！！！！！

在查詢按鈕的抄右邊再放一個span標簽襲，然後在對選擇框綁定一個點擊事件，
點擊事件里的函數實現這樣的功能，獲取所有的復選框，然後找出被選中的，獲取被選中的單號，然後拼接起來，顯示到span裡面。就是這樣。

⑥ 怎樣用js觸發css的過渡效果

用js觸發css的過渡效果可以用impress.js實現。

以下例子實現了基於CSS3變化和過度效果:

$.jmpress('template', 'arraytemplate', {
x: 100, y: 100, scale: 2,
children: [
{ x: 0, y: 150, scale: 0.2 },
{ x: 0, y: 450, scale: 0.3 }
]
});

支持現代瀏覽器Chrome，Safari和Firefox支持.

⑦ js 實現一些跨瀏覽器的事件方法詳解及實例

js實現一些跨瀏覽器的事件方法
用JavaScript實現事件的綁定，移除，以及一些常用的事件屬性的獲取，時常要考慮到在不同瀏覽器下的兼容性，下面給出了一個跨瀏覽器的事件對象：
var
EventUtil
=
{
on:
function(element,
type,
handler)
{/*
添加事件
*/
if
(element.addEventListener)
{
element.addEventListener(type,
handler,
false);
}
else
if
(element.attachEvent)
{//IE
注意：此時事件處理程序會在全局作用域中運行，因此用attachEvent綁定的事件，此時在事件處理函數里的this
等於window，使用時要注意
element.attachEvent("on"
+
type,
handler);
}
else
{
element["on"
+
type]
=
handler;
}
},
off:
function(element,
type,
handler)
{/*
移除事件
*/
if
(element.removeEventListener)
{
element.removeEventListener(type,
handler,
false);
}
else
if
(element.detachEvent)
{
element.detachEvent("on"
+
type,
handler);
}
else
{
element["on"
+
type]
=
null;
}
},
getEvent:
function(event)
{/*
返回對event對象的引用
*/
return
event
?
event
:
window.event;
},
getTarget:
function(event)
{/*
返回事件的目標
*/
return
event.target
||
event.srcElement;
},
preventDefault:
function(event)
{
/*
取消事件的默認行為
*/
if
(event.preventDefault)
{
event.preventDefault();
}
else
{
event.returnValue
=
false;
}
},
stopPropagation:
function(event)
{/*
阻止事件冒泡
*/
if
(event.stopPropagation)
{
event.stopPropagation();
}
else
{
event.cancelBubble
=
true;
}
},
/*
mouseover
和mouserout
這兩個事件都會涉及把滑鼠指針從一個元素的邊界之內移動到另一個元素的邊界之內。*/
getRelatedTarget:
function(event)
{
if
(event.relatedTarget)
{
return
event.relatedTarget;
}
else
if
(event.toElement)
{//IE8
mouserout事件
return
event.toElement;
}
else
if
(event.fromElement)
{//IE8
mouseover事件
return
event.fromElement;
}
else
{
return
null;//其他事件
}
}
};
調用如下：
EventUtil.on(document,
"click",
function(event){//為document元素綁定click事件
event
=
EventUtil.getEvent(event);//獲取event事件對象
alert("Screen
coordinates:
"
+
event.screenX
+
","
+
event.screenY);
});
文章參考自《JavaScript高級程序設計第三版》
感謝閱讀，希望能幫助到大家，謝謝大家對本站的支持！