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 只有在keydownkeyup 事件发生时才与标准的DOMkeyCode 相同,在keypress 事件中等同于charCode, 因此常采用如下方法:

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

之所以通常不采用keyCode 是因为它表示键盘按键,而不是输出字符,因此输出“a ”和“A ”时,keyCode 值是相等的,charCode 则以字符为区分。另外在keypress 事件中,标准DomkeyCode 值始终为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 >

 

 

 

 

 

 

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Daniel的技术博客

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值