使用事件处理程序

hoohack 发布于2019-08-21 18:47 / 1673人阅读

摘要：事件处理程序即事件直接加在结构里面的按钮该事件处理的缺点是和和的耦合性很高，一个地方发生更改时，要修改多处地方在调用函数的时候才在其后面加括号，如果要进行函数传参数，直接写函数名就行级事件处理程序较传统的方式是把一个函数赋值给一个事件的处理

1.HTML事件处理程序

即事件直接加在HTML结构里面的

该事件处理的缺点是和html和js的耦合性很高，一个地方发生更改时，要修改多处地方
在调用函数的时候才在其后面加括号（），如果要进行函数传参数，直接写函数名就行

2.DOM0级事件处理程序

较传统的方式是：把一个函数赋值给一个事件的处理程序属性

即获取对应添加事件的对象，然后添加onclick点击的属性，触发事件处理程序，如果要移除点击事件，把onclick属性赋值为null，该事件处理程序没有HTML事件处理程序的缺点

3.DOM2级事件处理程序

DOM2级事件处定义了两个方法：
用于处理指定和删除事件处理程序的操作
addEventListener()和removeEventListener().
接收三个参数：要处理的事件名，作为事件处理程序的函数和布尔值（true表示为在事件捕获时执行事件处理函数，false表示为在事件冒泡的时候执行事件处理函数）
其中addEventListener的第一个参数为触发的事件类型，不用想DOM0级事件类型加on，直接类型名就行，如“click”，“mouseover”，第二个参数为函数名字，直接写函数名，不用加（）括号，第三个参数一般选择false，即事件冒泡，这样能兼容很多浏览器；
通过addEventListener添加的事件要通过removeEventListener()才能移除，而且参数要和之前添加的一样

4.IE事件处理程序

不用加第三个参数false和true来判断事件流类型，因为IE8或者更早的浏览器只支持事件冒泡；
在传递第一个参数事件类型时要注意要加on，即“onclick”“onmouseover”，因为它和DOM事件不同；
IE事件处理程序只支持IE 浏览器和opera 浏览器

5.跨浏览器的事件处理程序

    //跨浏览器事件处理程序 
    var eventUtil={
        //添加句柄
        addHandler:function (element,type,handler){
            if(element.addEventListener){
                element.addEventListener(type,handler,false);
            }else if(element.attachEvent){
                element.attachEvent("on"+type,handler);
            }else{
                element["on"+type]=handler;
            }
        },
        // 删除句柄
        removeHandler:function (element,type,handler){
            if(element.removeEventListener){
                element.removeEventListener(type,handler,false);
            }else if(element.attachEvent){
                element.detachEvent("on"+type,handler);
            }else{
                element["on"+type]=null;
            }
        }
    }
    eventUtil.addHandler(btn,"click",showMessage);

GPU云服务器云服务器事件处理程序 js事件处理程序待处理事件多个事件处理

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/90806.html

[学习笔记] 事件（上篇）

摘要：指定事件处理程序指定事件处理程序主要有两种方式级事件处理程序级事件处理程序。添加事件处理程序注意这里是哦或移除事件处理程序使用移除事件处理程序的条件与方法相同必须提供相同的参数，从而添加的匿名函数也无法被移除。今天看书又看到事件，遂决定小总结一下~ JavaScript与HTML之间的交互是通过事件实现的。事件，就是文档或浏览器窗口中发生的一些特定的交互瞬间。可以使用监听器（事件处...

wangym 2019-08-22 10:57 评论0 收藏0
[学习笔记] 事件（上篇）

摘要：指定事件处理程序指定事件处理程序主要有两种方式级事件处理程序级事件处理程序。添加事件处理程序注意这里是哦或移除事件处理程序使用移除事件处理程序的条件与方法相同必须提供相同的参数，从而添加的匿名函数也无法被移除。今天看书又看到事件，遂决定小总结一下~ JavaScript与HTML之间的交互是通过事件实现的。事件，就是文档或浏览器窗口中发生的一些特定的交互瞬间。可以使用监听器（事件处...

RayKr 2019-08-01 14:48 评论0 收藏0
《JavaScript 闯关记》之事件

摘要：事件捕获团队提出的另一种事件流叫做事件捕获。所有节点中都包含这两个方法，并且它们都接受个参数要处理的事件名作为事件处理程序的函数和一个布尔值。最后这个布尔值参数如果是，表示在捕获阶段调用事件处理程序如果是，表示在冒泡阶段调用事件处理程序。 JavaScript 程序采用了异步事件驱动编程模型。在这种程序设计风格下，当文档、浏览器、元素或与之相关的对象发生某些有趣的事情时，Web 浏览器...

ConardLi 2019-08-22 10:44 评论0 收藏0
Event Handler 事件处理程序 1 ---《高程3》

摘要：为属性赋值匿名函数事件作用域使用级方法指定的事件处理程序被认为是元素的方法。最后这个布尔值参数如果是，表示在捕获阶段调用事件处理程序如果是，表示在冒泡阶段调用事件处理程序。事件捕获和事件冒泡 DOM2级事件规定的事件流包括三个阶段：事件捕获、处于目标阶段和事件冒泡。首先发生的是事件捕获，从外部节点到内部节点依次遍历，为截获事件提供了机会。然后是实际的目标接收到事件。最后一个阶段是冒泡...

WalkerXu 2019-08-20 11:31 评论0 收藏0
Event Handler 事件处理程序 1 ---《高程3》

摘要：为属性赋值匿名函数事件作用域使用级方法指定的事件处理程序被认为是元素的方法。最后这个布尔值参数如果是，表示在捕获阶段调用事件处理程序如果是，表示在冒泡阶段调用事件处理程序。事件捕获和事件冒泡 DOM2级事件规定的事件流包括三个阶段：事件捕获、处于目标阶段和事件冒泡。首先发生的是事件捕获，从外部节点到内部节点依次遍历，为截获事件提供了机会。然后是实际的目标接收到事件。最后一个阶段是冒泡...

wujl596 2019-08-01 15:47 评论0 收藏0