js事件中change,js事件中監聽其他事件

本文目錄一覽：

• 1、js中的change事件不起作用
• 2、js中關於change的問題
• 3、這段JS代碼為什麼change事件中先刪除上一次事件創建的option刪不幹凈，會剩下一個城市
• 4、匯總js事件相關及事件處理模型
• 5、Change如何用原生js去觸發該事件

js中的change事件不起作用

script type=”text/javascript”

$(document).ready(function(){

$(“#option_”).nextAll().change(function(){

alert(“2”);

$(“#form”).submit();

});

});

/script

直接這樣寫就行

js中關於change的問題

2個this都表示當前這個select控件，[]裡面表示select 裡面所有選項(options)中你點擊的下拉列表裡這個選項的索引值，為一個大於等於0的整數，所以( )里的就是這一個選項的值咯，將它作為函數Usechange 的參數來執行這個函數。

這段JS代碼為什麼change事件中先刪除上一次事件創建的option刪不幹凈，會剩下一個城市

for(var z=1;zopts.length;z++){

改為

for(var z=opts.length-1;z0;z–){

即可

刪除類似這樣的列表數據時，如果從頭往後刪，那麼當刪掉一個項時，下一個項會自動頂上來成為剛刪除的那一項，當循環下次執行時，會繼續刪除下一項，那麼這個頂上來的這項就被漏掉了，這樣的話就會造成最後只有一半的項被刪除。

解決辦法就是從後面往前面刪，就能完美解決這個問題。

其實不用循環也可以實現刪除select中的所有option（保留第一項）：

opts.length=1

匯總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怎麼區分出點擊的是鼠標左鍵還是右鍵？

Change如何用原生js去觸發該事件

原生JS的onchang是在input值變化並失去焦點的時候才會觸發，參考一下：

input type=”text” id=”mytext” value=”” /

script type=”text/javascript”

   var input = document.getElementById(‘mytext’);

    if (input.addEventListener) {

        input.addEventListener(‘change’, function () {

            console.log(‘aaaaaa’);

        });

    }

    else {

        input.attachEvent(‘onchange’, function () {

            console.log(‘aaaaaa’);

        });

    }

/script