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

类型分为：

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

1、内联模型

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

//示例1

    <input type="button" id="button1" value="Test" onclick="alert('Hello World!')" />

或者利用函数

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title></title>

    <script type="text/javascript" >

        function test() {

            alert("Hello World!");

        }

    </script>

</head>

<body>

    //示例2

    <input type="button" value="Test1" onclick="test()" />

</body>

</html>

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

特点：

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

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>);

参数一 ：event-name 事件名称或类型

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

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

代码示例：

 var Obj = document.getElementById('testButton');

            Obj.addEventListener("click", function () {

                alert("Hello World! Dom2");

            }, false);

2）removeEventListener

格式为：

element.removeEventListener(<event-name>, <callback>, <use-capture>);

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

小结：

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

实用JS系列——事件类型的更多相关文章

  1. 实用JS系列——BOM常用对象

    背景:  最近在着手项目的时候,意识到自己JS的欠缺.虽然看了不少JavaScript的视频,但真正项目中并不是经常遇到大且难的例子.所以JavaScript的基础还需要再打扎实,也就有了这一系列博客 ...

  2. 实用JS系列——面向对象中的类和继承

    背景: 在最开始学习JavaScript时,我们就知道,它是一种脚本语言,也有面向对象机制.但它的面向对象继承机制是基于原型的,即Prototype.今天,我们就来找一下JS中OO的影子. 创建类 1 ...

  3. JS中的事件类型和事件属性的基础知识

    周末无聊, 这几天又复习了下JS搞基程序设计3, 想着好记性不如浪笔头哇, 要么把这些东西写下来, 这样基础才能更加扎实么么哒, 知道的同学也可以直接过一下,当做复习,  小姨子再也不用担心我的学习啦 ...

  4. js关于事件的一些总结（系列一）

    今天小弟在这里说一下 js 关于事件的一些总结  在这里直接上代码 省去啰嗦的步骤以免看烦了  总结的不好希望大家见谅 一.事件的默认事件 事件的默认事件是什么? 就是a标签有一个链接事件  inpu ...

  5. JS事件类型--1

    滚轮事件其实就是一个mousewheel事件,这个事件跟踪鼠标滚轮,类似Mac的触屏版. 一.客户区坐标位置 鼠标事件都是在浏览器视口的特定位置上发生的.这个位置信息保存在事件对象的clientX和c ...

  6. js 深入原理讲解系列-事件循环

    js 深入原理讲解系列-事件循环 能看懂这一题你就掌握了 js 事件循环的核心原理 不要专业的术语,说人话,讲明白! Q: 输出下面 console.log 的正确的顺序? console.log(' ...

  7. 深入理解DOM事件类型系列第二篇——键盘事件

    × 目录 [1]类型 [2]顺序 [3]按键信息[4]应用 前面的话 鼠标和键盘是电脑端主要的输入设备,上篇介绍了鼠标事件,本文将详细介绍键盘事件 类型 键盘事件用来描述键盘行为,主要有keydown ...

  8. 《JS高程》事件类型学习笔记

    事件类型: UI事件&焦点事件: 鼠标滚轮事件: 键盘与文本事件: 复合事件&变动事件: HTML5事件: 设备事件&触摸与手势事件:

  9. js关于事件

    摘要:事件在Web前端领域有很重要的地位,很多重要的知识点都与事件有关.本文旨在对常用的事件相关知识做一个汇总和记录. 在前端中,有一个很重要的概念就是事件.我对于事件的理解就是使用者对浏览器进行的一 ...

随机推荐

  1. JAVAWEB开发中过滤器的概述及使用

    1.什么是过滤器? 过滤器是向WEB应用程序的请求和响应添加功能的WEB服务组件 2.过滤器的作用 1)可以统一的集中处理请求和响应 2)可以实现对请求数据的过滤 3.过滤器的工作方式 4.使用场合 ...

  2. JSP页面字符集设置

    错误提示: HTTP Status 500 - /test1.jsp (line: 2, column: 1) Page directive must not have multiple occurr ...

  3. springboot整合mybatis笔记

    1首先创建一个springboot项目 创建项目的文件结构以及jdk的版本 选择项目所需要的依赖 之后点击finish,完成创建 2以下是文件结构 看一下啊pom.xml; <?xml vers ...

  4. 还在使用pdf、word简历？简单五步实现github托管个人逼格简历

    写在前面: 什么是git.github? git 版本控制工具 github 通过git工具做的版本控制的项目托管平台 项目开发肯定不止一个程序猿,多个程序猿针对同一个文件进行代码读写操作时,是先保存 ...

  5. 关于sql server 2008 r2 展开时报错:参数名:viewInfo ( Microsoft SqlServer Management SqlStudio Explorer )解决思路

    今天安装了sql server 2008 R2,安装成功之后我打开软件登陆都没问题,但是一展开选项就弹出错误提示框: 参数名:viewInfo 不能为空 (Microsoft SqlServer Ma ...

  6. NPOI导出Excel，添加图片和设置格式，添加条形码

    先上代码 using grproLib; using System; using System.Collections.Generic; using System.Data; using System ...

  7. 在intellij idea 里来回跳转查询方法

    在intellij idea 里来回跳转查询方法,在不知道快捷键的时候真是抓狂. 看到key map中的快捷键 后退back  ctrl +alt + ← 或者button4 click 前进forw ...

  8. Smail 中的一些点

    smali中所有操作都需要经过寄存器, 本地寄存器以v开头, 参数寄存器以p开头, 非static方法中p0是this 没有-object后缀的操作指令表示操作的对象是基本类型 invoke-dire ...

  9. Eclipse+Tomcat7.0+MySQL 连接池设置

    http://blog.sina.com.cn/s/blog_85d71fb70101ab99.html 工程名:JavaWeb 第一步:配置server.xml 在Tomcat的server.xml ...

  10. SpringMVC---applicationContext.xml配置详解

    <?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.sp ...