JavaScript中的5种事件使用方式解说

简介:

 为组件提供事件处理入口,可以极大的提高组件的封闭性,同时又能让组件很好的和外界通信。并且这也是我们已经习惯使用的一种开发模式,.NET、DHTML等都提供了一套完整的事件处理模型。下面是关于使用DHTML中事件的一个总结。

    DHTML提供了3种事件的使用方式,它们分别是:

    1、Inline HTML: <ELEMENT onXXX='handler'></ELEMENT>
    这是最简单最常用的事件绑定方式,不过这里onXXX的值为handler是不太确切的说法。其实这个handler的位置可以放置任何合法的JavaScript语句,因为IE在生成DHMTL树时会为当前Element构建一个'匿名'成员方法,onXXX指向这个方法的handler。比如我们写下,<element id='elmt' onXXX='var abc =0; for ( var i=0 ; i < 100 ; i++ ) abc+=i;'></element>,实际上在DHMTL树种存在如下代码结构:

function anonymous()
{
    var abc =0;  for (  var i=0 ; i < 100 ; i++ ) abc+=i;
}

    此时anonymous方法中的this就是elmt对象。

    2、Event property: object.onXXX = handler
    这个使用方法是把函数名(handler)赋予element预定义的事件属性上(onXXX)。这里需要注意两个问题:
    一是,我们在使用object.onXXX = handler是需要保证object已经在页面中生成。比如我们为document.body赋予事件处理函数,我们必须保证document.body已经存在,就是说我们不能在<body>之前在的全局语句中使用document.body;
    二是,handler必须是函数名,和使用方法1中的handler可以是任何JavaScript语句不同!我们最容易出错的使用是,当我们习惯了在inline html中使用<element id='elmt' onXXX = 'return false'></element>后,如果这样使用elmt.onXXX='return false;'。那么就歇菜了,不会有任何执行效果,当然IE也不报错。正确的使用是:

elmt.onXXX =  function() {  return  false; }


    3、Named Script: <SCRIPT FOR = object EVENT = onclick>
    IE独家支持,没有怎么使用过,不觉得有什么特别的地方哈。如果您知道它的妙处愿闻其详

    DOM提供了两种事件处理使用,它们分别是:

    1、attachEvent method:
    使用方法:bSuccess = object.attachEvent(sEvent, fpNotify)。解释就抄msdn了
    Parameters

       sEvent Required. String that specifies any of the standard DHTML Events .
       fpNotify Required. Pointer that specifies the function to call when sEvent fires.
    Return Value
         Boolean. Returns one of the following possible values:
       true The function was bound successfully to the event.
       false The function was not bound to the event.
    DOM提供的这个事件附加方式实际上是一个集合操作,我们可以多次的向同一个事件签名上attach多个事件处理函数,比如:

 window.attachEvent('onload', handler1);
 window.attachEvent('onload', handler2);
 window.attachEvent('onload', handler3);
 window.attachEvent('onload', handlerN);

    将会执行这个N个handler,但是 不保证执行顺序。这里有个例外,attachEvent在document.body上attach事件'onload'没有效果,但是attch window对象的'onload'是正确的。根据页面初始化顺序来看,及document.body.attachEvent('onload', handler)返回true来看,这因该是IE的一个bug。

    注意DHTML的Event Property方式和DOM的attachEvent方式的区别:

    Event Property方式,当触发事件时,事件处理函数是一个 无参数函数,我们只能通过event这个window的属性来读取和事件相关的信息。attachEvent方式,当事件处理函数被触发时,该函数的第一个参数arguments[0],默认是该窗口上的event。什么意思呢?不明白参看 这里

    2、fireEvent method

    请参看:在什么时候才会用到fireEvent方法呢?


本文转自博客园鸟食轩的博客,原文链接:http://www.cnblogs.com/birdshome/,如需转载请自行联系原博主。

目录
相关文章
|
3月前
|
Web App开发 JavaScript 前端开发
javascript onkeydown事件
javascript onkeydown事件
|
5月前
|
JavaScript 前端开发
js事件队列
js事件队列
148 55
|
3月前
|
JavaScript
js两种移除事件的方法
js两种移除事件的方法
49 3
|
4月前
|
JavaScript 前端开发
JavaScript 事件
JavaScript 事件
43 2
|
5月前
|
JavaScript 前端开发
JavaScript 事件的绑定
JavaScript 事件的绑定
53 0
|
2月前
|
缓存 JavaScript 前端开发
JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用
本文深入讲解了 JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用。
63 5
|
3月前
|
存储 JavaScript 前端开发
js事件队列
【10月更文挑战第15天】
67 6
|
4月前
|
JavaScript 前端开发
JavaScript HTML DOM 事件
JavaScript HTML DOM 事件
31 5
|
4月前
|
监控 JavaScript 前端开发
|
3月前
|
JavaScript API
深入解析JS中的visibilitychange事件:监听浏览器标签间切换的利器
深入解析JS中的visibilitychange事件:监听浏览器标签间切换的利器
199 0