title: How does Asp.net Ajax event handle works together with DOM event
body: <p>All, I just want to know how does <code>Asp.net Ajax</code> event handle works together with <code>DOM</code> event. Say you have the code like below.</p>
  
  <pre><code>&lt;%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebAppAjax.Default" %&gt;
  
  &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head runat="server"&gt;
      &lt;title&gt;&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;form id="form1" runat="server"&gt;
      &lt;asp:ScriptManager ID="ScriptManager1" runat="server"&gt;
      &lt;/asp:ScriptManager&gt;
      &lt;div&gt;
          &lt;input id="state" type="text" value=""  /&gt;
          &lt;input id="Departments" type="text" runat="server" /&gt;
      &lt;/div&gt;
      &lt;/form&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  &lt;script type="text/javascript"&gt;
      &lt;!--
      var departments = null;
      Sys.Application.add_load(page_load);
      Sys.Application.add_unload(page_unload);
      function page_load(sender, e) {
          departments = $get("Departments");
          $addHandler(departments, "blur", departments_onblur);
      }
      function page_unload(sender, e) {
          $removeHandler(departments, "blur", departments_onblur);
      }
  
      function departments_onblur(sender, e) {
          $get("state").value = "onblur";
          if (typeof (departments.blur) != "undefined") {
              departments.blur();
          }
          else {
              alert("underfined");
          }
      }
      function department_jsblur() {
          alert('jsblur');
      }
      //--&gt;
  &lt;/script&gt;
  
  
  protected override void OnInit(EventArgs e)
  {
      Departments.Attributes.Add("onblur", "department_jsblur();");
      base.OnInit(e);
  }
  </code></pre>
  
  <p>the event handler <code>$addHandler(departments, "blur", departments_onblur);</code> doesn't overwrite the event handler <code>Departments.Attributes.Add("onblur", "department_jsblur();");</code>.
  They both works.
  Could anyone please help to explain how <code>Asp.net Ajax</code> make it ? thanks.</p>