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

最新推荐文章于 2022-08-12 22:15:40 发布

sunshingheavy

最新推荐文章于 2022-08-12 22:15:40 发布

阅读量694

点赞数

文章标签： javascript mozilla function dhmtl object ie

本文链接：https://blog.csdn.net/sunshingheavy/article/details/5277180

版权

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方法呢?