WEB前端 -- 下拉框的觸發事件分析（onchange、onfocus、onclick）

阿新 • • 發佈：2019-01-14

select的onChange事件問題解決（onchange、onfocus、onclick、onmousedown）

一、onChange事件只有在值改變時才可觸發，所以必須在每一次選擇時（尤其第一次）保證選擇的值是改變的！

所以

<select name="inv_payee" id="ECS_INVPAYEE" onchange="show_payee();" style="border:1pxsolid #ccc;">
       <optionvalue=”個人” selected >個人</option>  //在這要選定一個預設的值“selected”
       <optionvalue=”單位”>單位</option>
</select>

這樣在選擇第二個時，值就會變即可觸發onChange;

二、我們用Select的onchange事件時,常會遇到這樣一個問題,那就是連續選相同一項時,不觸發onchange事件.select的onchange事件就是這樣子的.你得有Change(改變),才能觸發該事件….

<select name=selonchange=”bao(this.options[this.options.selectedIndex].value)”>
     <option value="">請選擇
     <option value="1">Item 1
     <option value="2">Item 2
     <option value="3">Item 3
</select>
<script>
function bao(s){
   txt.value =s;
   //選擇後,讓第一項被選中,這樣,就有Change啦.
   document.all.sel.options[0].selected=true;
}
</script>
<textareaid=txt></textarea>

三、

js中onchange事件是在客戶端改變輸入控制元件的值，比如一個textbox，會出發的一個事件。但是如果在js程式碼中改變一個textbox的value，而不是通過鍵盤輸入改變一個textbox值的話，是不會出發onchange事件的。

那麼，如何在js程式碼模式通過程式碼觸發textbox控制元件的onchange事件呢，經過查閱資料，發現js提供了一個方法，可以觸發控制元件的應該是所有事件。object.fireEvent()方法，使用方法如object.fireEvent(‘onchange’)，即可觸發控制元件的onchange事件。

同理，js中使用fireEvent方法還可以觸發其他的空間事件。

觸發onchange事件的問題，並不是值一旦更改就會觸發onchange事件。

對於onBlur和onFocus可以直接呼叫object.Blur()和object.Focus()，但javascript中沒有object.Change

事件。

1.ie 處理1

document.getElementByIdx_x(‘hid_provider_id’).attachEvent(“onpropertychange”,function(){alert(‘gggg’);});

2.object.fireEvent()可以觸發事件，如觸發onchange事件則是object.fireEvent(‘onchange’)，以此類推。

例：

<SELECT   id=select1     onchange="alert(this.value)">
   <OPTION   value="0">0</OPTION>
   <OPTION   value="1">1</OPTION>
   <OPTION   value="2">2</OPTION>
</SELECT>
<INPUT   type="text"   id="text1"   name="text1">
<INPUT   type="button"   value="Button"   onclick="select1.selectedIndex=text1.value">

手動改變select的值，會觸發onchange

指令碼改變selectedIndex,不會觸發onchange

解決辦法

if   (select1.fireEvent)
select1.fireEvent(“onchange”)
else
select1.onchange()

或

<INPUT   type="button"  value="Button"  onclick="select1.selectedIndex=text1.value;select1.fireEvent(‘onchange’)">

程式,裡因為程式裡有多個action裡並每個action有多個submit按鈕事件，為了區別程式碼，同時頁面隱藏

按鈕

<select name="select" onchange="document.getElementByIdx_x('seaoldsubmit').click();">
  <option value="0">查詢條件</option>
  ……
</select>
<input type="submit" name="seaoldsubmit" value="確定" style="display:none">
if(submitcheck('seaoldsubmit'))

四、最近專案中遇到一個問題，要用js去觸發onchange事件。

上網找了一些資料，IE上有onpropertychang事件，可以用js去觸發這個事件，但是Firefox不支援這個事件，

然後在firefox中去繫結一個input事件。但是這是無效的啊，仍然不會去觸發onchange事件。

最後只能用未解決方案了！

用js修改值的時候，在js執行修改完之後去執行onchange事件，不過這樣即使這個值不改變的話也會呼叫這個方法。

function handle()
{
  document.getElementByIdx_x('msg').innerHTML='輸入的文字長度為：'+document.getElementByIdx_x('txt').value.length;
}
//firefox下檢測狀態改變只能用oninput,且需要用addEventListener來註冊事件。
if(/msie/i.test(navigator.userAgent))    //ie瀏覽器
{
 document.getElementByIdx_x('txt').onpropertychange=handle
}
else
{//非ie瀏覽器，比如Firefox
  document.getElementByIdx_x('txt').addEventListener("input",handle,false);
}
</script>
</head>
<body id="mybody">
<div id="msg"></div>
<input id="txt"value="" />

以上為測試程式碼。

五、onfocus實現了任意點選，在資料庫了也只查詢一次

六、onmousedown單擊一次就查詢一次，所以每選擇一次就查詢一次，增加了資料庫的負擔。每次選擇至少要查詢兩次（一次是在資料庫載入資料，一次是選擇選項時又觸發一次）

WEB前端 -- 下拉框的觸發事件分析（onchange、onfocus、onclick）

WEB前端 -- 下拉框的觸發事件分析（onchange、onfocus、onclick）

單選按鈕觸發事件、下拉列表觸發事件

記一次後端開發者，如何完成前端下拉框三級聯動功能？

下拉框click事件與搜尋框blur事件的愛恨糾葛

移動web前端下拉重新整理效果

JS jQuery滾動條下拉到底觸發事件

模擬select下拉框之多選（數據源采用模擬Ajax數據--原創）

關於三種帶搜尋下拉框的對比說明（searchableSelect、TinySelect、combobox)

實現antd下拉框動態新增內容（與資料庫互動）

Ajax 獲取下拉框分頁資料（滑鼠滾動分頁）

js實現下拉框聯動選中日期（select 日期聯動更改）

json 後臺傳list物件到前臺js獲取便利顯示到下拉框，避免亂碼（ssm）

通過ajax返回的json資料，給下拉框預設選中顯示（給下拉框賦的選中值）

IONIC 頁面下拉載入新的資料（ion-infinite-scroll的使用）

Web前端：如何實現選擇select下拉框選中跳轉其他頁面

easyui 綁定下拉框，下拉框選擇改變事件的觸發方法

中文輸入法觸發input事件 js繫結事件:addEventListener和on的區別 select下拉框用empty()方法清空option

web前端：CSS3製作炫酷的下拉框

下拉框選中一個選項後觸發事件

備忘錄----------下拉框選擇觸發事件

WEB前端 -- 下拉框的觸發事件分析（onchange、onfocus、onclick）

相關推薦