javascript - Onclick 一个 Div

Question

HTML 中是否有一个事件，通过该事件，我可以在 <div> 的任何元素/成员中发生任何更改/单击时执行函数？例如，在下面的代码中，每当 div“customer”的任何元素发生任何变化时，我想执行一个函数或某些代码行。正常的 onclick 会起作用吗？有什么想法吗？

<div id="customer">
<h3>Customer Information</h3>
<form id="customerinfo" name="customerinfo" style="font-size:14px">
   First Name:&nbsp;<input name="first_name" size="15" type="text" value="Parul">                                                                               
   &nbsp;Last Name:&nbsp;<input name="last_name" size="15" type="text" value="Kashyap"><br>
   <br>
   EMail:&nbsp;<input name="email_address" size="25" type="email" value="Parul@Gynapsys.com"><br><br>
   Phone:&nbsp;<input maxlength="3" name="area_code" size="3" type="tel" value="650">
   &nbsp;<input maxlength="7" name="number" size="7" type="tel" value="3301096">
</form>
<br>
Select Order Type:&nbsp; 
<select id="deliverytype" onchange="deliverytype(this)">
   <option value="pickup" selected>
      Pickup
   </option>
   <option value="delivery">
      Delivery
   </option>
</select>
<br>
<p></p>
<div id="deliverydetails" style="display:none;">
   <h3>Delivery Information</h3>
   <form id="deliveryinfo" name="deliveryinfo" style="font-size:14px">
      Delivery Contact Phone:&nbsp;
      <input maxlength="3" name="darea_code" size="3" type="tel" value="650">
      &nbsp;
      <input maxlength="7" name="dnumber" size="7" type="tel" value="3301096"><br><br>
      Delivery Address:<br><br>
      Street Number:&nbsp;
      <input maxlength="5" name="street_number" size="5" type="text" value="123">
      &nbsp;Street:&nbsp;
      <input name="street" size="20" type="text" value="Speedline Street"><br><br>
      City:&nbsp;
      <select id="city" name="city" onchange="" onfocus="">
         <option selected value="San Carlos">
            San Carlos
         </option>
         <option value="Mukilteo">
            Mukilteo
         </option>
         <option value="Los Angeles">
            Los Angeles
         </option>
      </select>
      &nbsp;&nbsp;&nbsp;&nbsp;Province:&nbsp;
      <select id="province_state" name="province_state" onchange="" onfocus="">
         <option selected value="CA">
            CA
         </option>
         <option value="WA">
            WA
         </option>
         <option value="NY">
            NY
         </option>
      </select>
      &nbsp;&nbsp;&nbsp;&nbsp;Zip:&nbsp;
      <select id="postal_zip" name="postal_zip" onchange="" onfocus="">
         <option selected value="94070">
            94070
         </option>
         <option value="90208">
            90208
         </option>
         <option value="94011">
            94011
         </option>
      </select>
      <br><br>
      Delivery Inst:&nbsp;
      <input name="delivery_instructions" size="40" type="text" value="Use front door and ring the bell on right">
   </form>
</div>
<!--End of deliverydetails--><br><br>
<div>

Answer 1

听change event 。在最新的浏览器中，它会冒泡到 div。

document.getElementById('customer').addEventListener('change', function(e) {
    e = e || window.event
    alert('changed ' + e.target.id + ' to ' + e.target.value);
});

http://jsfiddle.net/mendesjuan/LaZgr/1/

如果需要支持IE 8及以下版本，可以自行在所有字段上设置监听器或者参见 Does the onchange event propagate?

答案之一 explains how to use jQuery to workaround it

// In jQuery 1.4+ the change event bubbles in all browsers, including IE.    
$('div.field_container').change(function() {
   // code here runs in all browers, including IE.
});