js選中事件,js下拉框選中事件

本文目錄一覽：

• 1、匯總js事件相關及事件處理模型
• 2、js動態生成的checkbox取值和選中事件
• 3、js，監聽窗口被選中事件
• 4、如何用js實現將當前點擊的單選按鈕變為選中狀態？
• 5、js 怎麼實現select選中觸發事件？

匯總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動態生成的checkbox取值和選中事件

script type=”text/javascript”

window.onload = function() {

// 創建 input 元素

var checkbox = document.createElement(“input”);

checkbox.type = “checkbox”;

checkbox.value = “123”;

// 頁面添加 checkbox

document.body.appendChild(checkbox);

// 點擊

checkbox.onclick = function() {

if(this.checked) {

alert(“選中”);

}

else {

alert(“未選中”);

}

alert(“value: ” + this.value);

}

};

/script

js，監聽窗口被選中事件

可以給窗口增加獲得焦點事件就好啦。

window.onfocus=function(){// your code here)}

如何用js實現將當前點擊的單選按鈕變為選中狀態？

代碼如下：

function doGender(gender) {

if (gender == “男”) {

gel(“radionan”).checked = true;

} else {

gel(“radionv”).checked = true;

}

}

擴展資料

JS基礎代碼：

//定義數組

var pageIds = new Array();

pageIds.push(‘A’);

數組長度

pageIds.length;

//shift：刪除原數組第一項，並返回刪除元素的值；如果數組為空則返回undefined

var a = [1,2,3,4,5];

var b = a.shift(); //a：[2,3,4,5] b：1

//unshift：將參數添加到原數組開頭，並返回數組的長度

var a = [1,2,3,4,5];

var b = a.unshift(-2,-1); //a：[-2,-1,1,2,3,4,5] b：7

//註：在IE6.0下測試返回值總為undefined，FF2.0下測試返回值為7，所以這個方法的返回值不可靠，需要用返回值時可用splice代替本方法來使用。

js 怎麼實現select選中觸發事件？

方法：

可以使用jQuery的trigger() 方法來響應事件。

定義和用法：

trigger() 方法觸發被選元素的指定事件類型。

語法：

$(selector).trigger(event,[param1,param2,…])

參數描述：

event    必需。規定指定元素要觸發的事件。可以使自定義事件（使用 bind() 函數來附加），或者任何標準事件。   

[param1,param2,…]    可選。傳遞到事件處理程序的額外參數。額外的參數對自定義事件特別有用。

實例：

觸發 select元素的change事件：

$(“button”).click(function(){

$(“select”).trigger(“change”);

});