How does Asp.net Ajax event handle works together with DOM event

StackOverflow https://stackoverflow.com/questions/20371852

题

All, I just want to know how does Asp.net Ajax event handle works together with DOM event. Say you have the code like below.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebAppAjax.Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <div>
        <input id="state" type="text" value=""  />
        <input id="Departments" type="text" runat="server" />
    </div>
    </form>
</body>
</html>
<script type="text/javascript">
    <!--
    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');
    }
    //-->
</script>


protected override void OnInit(EventArgs e)
{
    Departments.Attributes.Add("onblur", "department_jsblur();");
    base.OnInit(e);
}

the event handler $addHandler(departments, "blur", departments_onblur); doesn't overwrite the event handler Departments.Attributes.Add("onblur", "department_jsblur();");. They both works. Could anyone please help to explain how Asp.net Ajax make it ? thanks.

有帮助吗？

解决方案

Basically when you use the native javascript 'element.addEventListener(...)' method, it doesn't overwrite the older event handler, but simply adds another one. This is also the method that $addHandler(...) uses internally. Check out the explanation for the W3C event registration model given here.

With this basic information, we can look at the code that you have mentioned: 

Departments.Attributes.Add("onblur", "department_jsblur();");

is server side code that is used to create the html. It uses the traditional way of adding event handler resulting in HTML like <textbox onblur='department_jsblur();' />

The $addHandler(departments, "blur", departments_onblur); is the javascript that is executed once the html has been rendered in the browser window and the traditional event handler has been attached. It uses the element.addEventListener('eventType', callbackMethod) API provided by the language to add additional handlers.

Internally, the multiple handlers assigned to an element are stored in an array, and when the event is raised, all the handlers are executed one after the other.

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top