javaScript 事件小结

     事件是用户在访问页面时执行的操作。当浏览器探测到一个事件时，比如鼠标单击或按键，它可以触发与这个事件相关联的JavaScript对象，这些对象称为事件处理程序（event handler）。事件处理程序名称全是小写的，以下是一些常用事件的小结：

   窗体事件

     onload 事件 ：当页面完成加载时触发

     一般用法 

     window.οnlοad=functionName;  

     在触发一个事件时可以这么做，但是促发多个事件时不能这样写。以下是很多人都会犯的错误：

     window.οnlοad=function1;

     window.οnlοad=function2;

     window.οnlοad=function3;

     这样写代码是不对的，第二次设置会覆盖第一次的，这时只有function3会被执行。如果要连续执行两次以上的函数，应该这样写：

     window.οnlοad=function (){

       firstfunction();

       secondFunction();

    }

     不过，另一种加载的方式将更好，无论你在页面加载时要执行多少个函数。外国的一个人写的，确实好用。

function addLoadEvent(func) {
    var oldonload = window.onload;
    if (typeof oldonload == 'function' ) {
        window.onload = function () {
            if (oldonload) {
                oldonload();
            }
            newFunction();
        }
    }
    else {
        window.onload = newFunction;
    }
}

<!-- /* Font Definitions */ @font-face {font-family:宋体; panose-1:2 1 6 0 3 1 1 1 1 1; mso-font-alt:SimSun; mso-font-charset:134; mso-generic-font-family:auto; mso-font-pitch:variable; mso-font-signature:3 135135232 16 0 262145 0;} @font-face {font-family:"/@宋体"; panose-1:2 1 6 0 3 1 1 1 1 1; mso-font-charset:134; mso-generic-font-family:auto; mso-font-pitch:variable; mso-font-signature:3 135135232 16 0 262145 0;} /* Style Definitions */ p.MsoNormal, li.MsoNormal, div.MsoNormal {mso-style-parent:""; margin:0cm; margin-bottom:.0001pt; text-align:justify; text-justify:inter-ideograph; mso-pagination:none; font-size:10.5pt; mso-bidi-font-size:12.0pt; font-family:"Times New Roman"; mso-fareast-font-family:宋体; mso-font-kerning:1.0pt;} /* Page Definitions */ @page {mso-page-border-surround-header:no; mso-page-border-surround-footer:no;} @page Section1 {size:612.0pt 792.0pt; margin:72.0pt 90.0pt 72.0pt 90.0pt; mso-header-margin:36.0pt; mso-footer-margin:36.0pt; mso-paper-source:0;} div.Section1 {page:Section1;} /* List Definitions */ @list l0 {mso-list-id:1435323242; mso-list-type:hybrid; mso-list-template-ids:-2097910046 890155828 67698713 67698715 67698703 67698713 67698715 67698703 67698713 67698715;} @list l0:level1 {mso-level-tab-stop:18.0pt; mso-level-number-position:left; margin-left:18.0pt; text-indent:-18.0pt; font-family:宋体; mso-fareast-font-family:"Times New Roman"; mso-ansi-font-weight:bold;} ol {margin-bottom:0cm;} ul {margin-bottom:0cm;} -->

1.    var oldonload = window.onload;  声明一个新变量 oldonload 。如果已经设置了 window. Onload ，就将它的值存储在这里。如果没有设置，这一行也没有什么坏处。

2.    if (typeof oldonload == 'function' ) 检查 oldonload 的变量类型。如果已经设置了 window.onload, 那么它应该是一个函数调用（否则，就是空的）。

3.      window.onload = function () {
            if (oldonload) {
                oldonload();
            }
            newFunction();
        }
    这些代码重新设置 window.onload 的值来完成两种操作：它之前所做的操作以及参数中传递的新函数， window.onload 事件处理程序设置为一个匿名函数。如果函数有值，就执行 window.onload 原本应该完成的操作。但是在函数完成之前，还要执行 newFunction();

4. window.onload = newFunction; 如果 oldonload 不是函数，也就是说它是未定义的。所以，就执行新函数。

 

 

onunload 事件： 当用户离开页面（关闭或跳转）时触发

        这个事件一般不要去用，反正我很反感。但是有一种可用情况，当你需要清除页面缓存时可以这样用：（FireFox等浏览器会把浏览过的页面保存起来）  window.οnunlοad=function (){}

        onresize 事件： 当调整网页大小时重新绘制动态内容（重新加载页面），现在用的很少。

        onmove 事件： 窗口移动时触发

        onabort 事件： 当用户取消网页上的图像加载时，会触发onabort事件。这种事件不太常用，也并非所有浏览器都支持。

        onerror 事件： 当页面发生javascript错误时触发，一般在设计Web时要设置οnerrοr=null,避免将错误信息显示给用户。

        onfocus 事件： 页面成为最前面的活动窗体时触发。可以用来控制窗体堆放。

        onblur 事件： 如果希望一个窗口总是出现在所有其他窗口前面时可以使用。代码可以这样写：

window.onblur = moveUp;
function moveUp() {
    self.focus();

}

    鼠标事件

        onmousedown事件：点击鼠标时触发

        onmouseup 事件：释放鼠标是触发

        onmousemove事件：移动鼠标时触发

        onmouseover 事件：当鼠标移进入任何注册了onmouseover事件处理程序区域时触发

        ondbclick 事件：双击任何注册了onmouseover事件处理程序区域时触发

        onclick 事件：单击

         鼠标事件实例

< html xmlns ="http://www.w3.org/1999/xhtml">

< head runat ="server">

    < title ></ title >

    < script type ="text/javascript" language ="javascript">

        function handle(oEvent) {

           var oDiv = document.getElementById("display" );

           if (window.event)

               oEvent = window.event;

           oDiv.innerHTML += oEvent.type + "<br/>" ;

       }

       window.onload = function () {

            var oImg = document.getElementsByTagName("img" )[0];

           oImg.onmousedown = handle;

           oImg.onmouseup = handle;

           oImg.onmouseover = handle;

           oImg.onmouseout = handle;

           oImg.onclick = handle;

           oImg.ondblclick = handle;

       }

    </ script >

</ head >

< body >

  < div >

    < img src ="images/2.jpg" border ="0" />

    < div id ="display"></ div >

  </ div >

</ body >

</ html >

 

    表单事件处理

        onsubmit 事件：提交表单时触发

        onreset 事件：重置

        onchange 事件：当用户修改表单字段时触发。这可以用来立即验证输入信息。

        onselect 事件：如果用户选择了一个input或textarea表单区域中的文本，就会触发。

        onclick 事件：表单中同样常用

        onblur 事件：应用于input text时，当用户在改变字段之后离开时，会触发onblur和onchange事件。

        onfocus 事件：焦点事件

    键盘事件

onkeydown 事件：按下键时触发

onkeyup ：释放键时触发

onkeypress 事件：当用户按下一个键并释放时触发。

对于键盘事件而言，最重要的并不是事件的名称，而是所按的键是什么。由于IE 浏览器没有charCode 属性，而keyCode 只有在keydown 、keyup 事件发生时才与标准的DOM 的keyCode 相同，在keypress 事件中等同于charCode, 因此常采用如下方法：

oEvent.charCode=(oEvent.type=="keypress" )?oEvent.keyCode:0;

之所以通常不采用keyCode 是因为它表示键盘按键，而不是输出字符，因此输出“a ”和“A ”时，keyCode 值是相等的，charCode 则以字符为区分。另外在keypress 事件中，标准Dom 的keyCode 值始终为0 ，如下例：

< html xmlns ="http://www.w3.org/1999/xhtml">

< head runat ="server">

    < title ></ title >

    < script type ="text/javascript" language ="javascript">

       function handle(oEvent) {

           var oDiv = document.getElementById("display" );

           if (window.event) {

               oEvent = window.event;

               oEvent.charCode=(oEvent.type=="keypress" )?oEvent.keyCode:0;

           }

           oDiv.innerHTML += oEvent.type + ":charCode:" + oEvent.charCode + " keyCode:" + oEvent.keyCode + "<br/>" ;

          

       }

       window.onload = function () {

           var oTextArea = document.getElementsByTagName("textarea" )[0];

           oTextArea.onkeypress = handle;

           oTextArea.onkeydown = handle;

       }

    </ script >

</ head >

< body >

  < div >

    < textarea rows ="4" cols ="50"></ textarea >

    < div id ="display"></ div >

  </ div >

</ body >

</ html >