使用Chrome的td標記中的Html表單元素的Onchange事件

Question

如何使用Chrome在表單元素（td）中調用表單標記中的onchange事件？ 以下代碼適用於除chrome以外的所有瀏覽器。令人驚訝的是它與Opera 15一起使用（應該使用與最新谷歌瀏覽器相同的引擎（webkit/blink））。

<table><tr> 
    <td onchange="bla()"> 
     <select> 
      <option value="n">foo</option> 
      <option value="n">foo</option> 
      <option value="n">foo</option> 
      <option value="n">foo</option> 
      <option value="n">foo</option> 
     </select> 
    </td> 

    <td onchange="bla()"> 
     <input type="text" /> 
    </td> 

    <td> 
    </td> 
</tr></table> 



<script> 
function bla() { 
    alert('something changed...'); 
} 
</script> 

我知道這是可能的事件綁定到選擇標籤，但我的網絡應用程序將無法正常工作那麼好

Answer 1

原因爲什麼的onchange不會因爲它的工作應該是因爲它不是變化的單元格，它是裏面的表單元素。當然，如果您點擊表格內容，表格也會被點擊。這是有道理的：你不能打開門房子沒有打開前門第一。
但是，您可以進入房間，剪下頭髮（在自己身上發起變化事件），而不必更改發生此事件的房間。在這方面，有意義的是，改變事件不會觸發父單元格。

事件確實遍歷DOM，雖然，這確實通過表格單元格，這樣你就可以把它撿起來有，但不是HTML屬性。 （順便說一句：儘量少用那些）。

嘗試將偵聽器綁定到JS中的整個表。這樣的話，只有1監聽器所有事件（這就是所謂的事件委託）的工作原理：

//assume tbl has id foobar: 
document.getElementById('foobar').addEventListener('change',function(e) 
{ 
    e = e || window.event; 
    var target = e.target || e.srcElement; 
    var name = target.id || target.getAttribute('name'); 
    alert('the ' + name + ' element changed!'); 
},false); 

Here's a slightly more complex version of event delegation，這也與在IE8中選擇元素，改變事件涉及。 （更改事件不會在舊IE中冒泡）。

的幾個環節：

• 一如往常：MDN
• 上How delegation works的文章，以及如何方便它確實是
• 和良好的醇」怪異模式：a comprehensive overview on event order/event models