实用JS系列——事件类型

页面导航:首页 > 网络编程 > JavaScript > 实用JS系列——事件类型

实用JS系列——事件类型

来源: 作者: 时间:2016-02-03 09:20 【

事件就是用户对窗口上各种组件的操作。JS中的事件中的事件即由访问Web页面的用户引起的一系列的操作。一般用于浏览器和用户操作进行交互,例如:用户的单击事件等。类型分为:

事件就是用户对窗口上各种组件的操作。JS中的事件中的事件即由访问Web页面的用户引起的一系列的操作。一般用于和用户操作进行交互,例如:用户的单击事件等。


类型分为:

内联模型、脚本模型和DOM2模型。

1、内联模型

先看两个内联模型的例子:

//示例1
    
或者利用函数



    
    <script type="text/javascript" >
        function test() {
            alert("Hello World!");
        }
    </script>


    //示例2
    


它是最传统的处理事件方法。

特点:

从上面两个例子中可以看到,虽然对于初学者来说,这种写法会很好理解功能实现,但html和Script没有做到很好的分离。

2、脚本模型

脚本模型可以在js中处理事件,来解决内联模型带来的问题。

//获取对象
 var Obj = document.getElementById('testButton');
//单击事件
            Obj.onclick = function () {
                alert('Hello World!');
            }

getElementById 根据ID获取对象,类似的还有getElementByTagName、getElementsByClassName等。用法类似,但要注意的是,id是唯一的,但class并不是唯一的。


3、DOM事件

W3C 规范 在DOM 级别 1中并没有定义任何的事件,DOM 级别 2中已经提供了提供了一种更详细的更细致的方式以控制 Web 页面中的事件,最后,完整的事件是在2004年 DOM 级别 3的规定中才最终定案。

在DOM事件中,我们可以为元素添加事件监听(addEventListener),当我们不再使用它时,可以将其移除(removeEventListener)。

1)addEventListener

格式为:

element.addEventListener(, , );
参数一 :event-name 事件名称或类型

参数二:callback 回调函数,会在事件触发的时候被调用。

参数三:use-capture 是否在捕获阶段被触发。

代码示例:

 var Obj = document.getElementById('testButton');
            Obj.addEventListener("click", function () {
                alert("Hello World! Dom2");
            }, false);

2)removeEventListener

格式为:

element.removeEventListener(, , );

参数与addEventListener相同,用法也十分类似。

小结:

有人说,事件是应用跳动的心脏 。事件通常与函数配合使用,当事件发生时函数才会执行。当我们与浏览器中 Web 页面进行某些类型的交互时,事件就发生了。但在使用事件的时候,也要合理选择,这样才能在效率和结构上获得双赢。

Tags:

文章评论

最 近 更 新
热 点 排 行
Js与CSS工具
代码转换工具

<