Onclick on a Div

Question

Is there a event in HTML, through which, I can execute a function wherever there is any change/click in any element/member of a <div>? For example in the code below, I want to execute a function or some lines of code whenever there is any change within any elements of the div "customer". Will a normal onclick work? Any ideas?

<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

Listen for the change event. In the latest browsers, it bubbles up to the 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/

If you need to support IE 8 and below, you can set listeners on all the fields yourself or see Does the onchange event propagate?

One of the answers there 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.
});