腳本中的事件的javascript觸發器函數，而不是明確的HTML

所以我做了一個註冊表單的ATM，我有它像我想它迄今爲止除了多餘的JavaScript代碼來實時檢查值（onmouseover，onmouseout， onblur等）。
少量樣品：腳本中的事件的javascript觸發器函數，而不是明確的HTML

<tr> 
    <td> 
     <label for="name" 
       onmouseover="fieldSelected('name', '', 3);" 
       onmouseout="checkValue('name', '', 3);"> 
      Enter your name: 
     </label> 
    </td> 
    <td> 
     <input type="text" 
       id="name" 
       name="name" 
       onmouseover="fieldSelected('name', '', 3);" 
       onmouseout="checkValue('name', '', 3);" 
       onblur="checkValue('name', '', 3);"> 
    </td> 
</tr>

fieldSelected使得場背景黃色如果指定元素（第一個參數）的值相匹配的第二個參數（缺省值）或大於第三參數短。
您將鼠標懸停在標籤或輸入字段上，它將bg首先更改爲黃色，然後更改爲紅色（因爲您沒有輸入任何內容）。
checkValue根據值（相同參數）將字段背景更改爲紅色或綠色。
您在輸入字段中輸入內容，切換到另一個字段並更改背景顏色。現在，您可能會注意到，現在有很多JavaScript函數調用（每個輸入/選擇字段有5個）。如果有人知道從另一個地方附加這些事件觸發器的方法（我通常不會將這個髒代碼編碼），那麼這將非常棒，而不是直接以這樣的形式，並且最好是同時對多個ID進行編碼。我在這裏有jQuery，但我真的沒有JavaScript專家。

或者也許有一個更簡單的方法來做到這一點？我希望字段背景顏色在所有這些事件上發生變化以獲得最大的交互性。當然，當所有的數據都傳到服務器端時，沒什麼大不了的，但我只是想這樣。

來源

2011-06-20 jurchiks

我強烈建議使用jQuery，在這爲您的整個頁面事件的點登記成爲：

function over(ev) { 
    var _for = $(ev.target).closest('tr').find('label').attr('for'); 
    fieldSelected(_for, '', 3) 
}; 

function out(ev) { 
    var _for = $(ev.target).closest('tr').find('label').attr('for'); 
    checkValue(_for, '', 3) 
}; 

$('table').live('hover', over, out).blur(out);

注：這是假定每個輸入元素及其相關聯的標籤是在一個錶行他們自己的。

http://jsfiddle.net/alnitak/XdzeX/

我在http://jsfiddle.net/alnitak/T6vvN/

function handler(ev) { 
    // check which field (or label) is being hovered over 
    if (ev.target.tagName === 'LABEL') { 
     var _for = $(ev.target).attr('for'); 
    } else { 
     var _for = ev.target.name; 
    } 

    // do event type checking to decide which function to call 
    if (ev.type === 'mouseout' || ev.type === 'blur') { 
     checkValue(_for, '', 3); 
    } else if (ev.type === 'mouseover') { 
     fieldSelected(_for, '', 3); 
    }   
}; 

$('label, input').live('hover blur', handler);

來源

2011-06-20 16:22:52 Alnitak

不知何故，它不工作... http://jsfiddle.net/XdzeX/6/ 真的很好的網站，雖然:) – jurchiks

它_mostly_作品（見＃7） - 你有兩個函數中錯誤的參數名稱。不過，我沒有看到任何紅色。 – Alnitak

這工作在小提琴：http：//jsfiddle.net/T6vvN/8/ 將看到真實的網站上會發生什麼。 – jurchiks

例如，可以廢除內聯：

var input_element = document.getElementById('name'); 

input_element.onmouseover = function(){ 
     fieldSelected('name', '', 3); 
}; 

input_element.onmouseout = function(){ 
     checkValue('name', '', 3); 
}; 
//etcetera

然後就可以以相同的方式

來源

2011-06-20 16:08:13 Neal

創造了一個稍長的版本，不作任何表格的佈局假設不，你不能 - 這將評估'fieldSelected（...）'立即並將（duff）結果分配給回調！ – Alnitak

@Alnitak！啊真，一秒 – Neal

@Alnitak - 我修好了 – Neal

附加事件處理程序至容器分配其它元素，並使用event對象圖輸出它來自哪個輸入。

http://developer.yahoo.com/performance/rules.html#events

來源

2011-06-20 16:10:58 Will

不幸的是，這對我來說太少了......你如何將一個事件處理程序附加到DIV，你如何知道哪個事件被觸發以及來自哪個輸入/標籤字段？ – jurchiks

[http://jsfiddle.net/Bxx6C/](http://jsfiddle.net/Bxx6C/） – Will

適用於小提琴中的單個字段，但我有：div> form> table> tr> td> table> tr > td標籤+ td輸入，並且沒有反應......如果這能夠奏效，我會愛上它。 – jurchiks

您可以使用功能「的addEventListener」將事件的形式添加到各個領域

document.getElementById('name').addEventListener('mouseover',function(){ fieldSelected('name','',3)},false);

谷歌的addEventListener瞭解更多詳情。

來源

2011-06-20 16:11:21 WordsWorth

腳本中的事件的javascript觸發器函數，而不是明確的HTML

回答

相關問題