深入浅出Ajax（四）

function initPage()

{

btn.onmouseover = buttonOver;

btn.onmouseover = buttonOut;

}

如上，浏览器只会运行指定的最后一个事件处理程序。因为事件处理程序只是属性，一个属性只能有一个值。

用addEventListener()指定多个事件处理程序。

btn.addEventListener(“mouseover”, buttonOver,false);

btn.addEventListener(“mouseover”, buttonOver1,false);

注意：事件属性名与addEventListener（）的事件名不一样，如果事件属性名为onclick或onmouseover,对addEventListener（）而言则是click和mouseover。

不过addEventListener()对IE浏览器不起作用，IE用了一个完全不同的事件模型，attachEvent()。

btn.addEventListener(“onmouseover”, buttonOvere);//这一次事件名前要保留on.

btn.addEventListener(“onmouseover”, buttonOver1);//只有2个参数。

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <script type="text/javascript">
        window.onload = initPage;

        function initPage()
        {
            var inputs = document.getElementsByTagName("input");
            for (var i = 0; i < inputs.length; i++)
            {
                var tt = inputs[i];
                //  tt.addEventListener("blur", showValue, false);
                // tt.addEventListener("change", change, false);
                addEventHandler(tt, "blur", showValue);
                addEventHandler(tt, "change", change);
            }
        }

        function change()
        {
            alert("changed!");
        }

        function showValue()
        {
            switch (this.title)//this指的是调用当前函数的对象，本处即失去焦点的文本框。
            {
                case "name":
                    alert(this.value);
                    break;
                default:
                    alert("pwd");
            }
        }

        // 增加一个工具函数，用于IE或其他浏览器时，多事件程序判断。
        //对象，事件名，处理函数
        function addEventHandler(obj, eventName, handler)
        {
            if (document.attachEvent)
            {
                obj.attachEvent("on" + eventName, handler);
            }
            else if (document.addEventListener)
            {
                obj.addEventHandler(eventName, handler, false);
            }
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div id="txt">
            <input type="text" id="username" title="name" />
            <input type="text" id="password" title="pwd" />
        </div>
    </form>
</body>
</html>

深入浅出Ajax（四）

相关推荐