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系列——事件类型的更多相关文章

实用JS系列——BOM常用对象
背景: 最近在着手项目的时候,意识到自己JS的欠缺.虽然看了不少JavaScript的视频,但真正项目中并不是经常遇到大且难的例子.所以JavaScript的基础还需要再打扎实,也就有了这一系列博客 ...
实用JS系列——面向对象中的类和继承
背景: 在最开始学习JavaScript时,我们就知道,它是一种脚本语言,也有面向对象机制.但它的面向对象继承机制是基于原型的,即Prototype.今天,我们就来找一下JS中OO的影子. 创建类 1 ...
JS中的事件类型和事件属性的基础知识
周末无聊, 这几天又复习了下JS搞基程序设计3, 想着好记性不如浪笔头哇, 要么把这些东西写下来, 这样基础才能更加扎实么么哒, 知道的同学也可以直接过一下,当做复习, 小姨子再也不用担心我的学习啦 ...
js关于事件的一些总结（系列一）
今天小弟在这里说一下 js 关于事件的一些总结在这里直接上代码省去啰嗦的步骤以免看烦了总结的不好希望大家见谅一.事件的默认事件事件的默认事件是什么? 就是a标签有一个链接事件 inpu ...
JS事件类型--1
滚轮事件其实就是一个mousewheel事件,这个事件跟踪鼠标滚轮,类似Mac的触屏版. 一.客户区坐标位置鼠标事件都是在浏览器视口的特定位置上发生的.这个位置信息保存在事件对象的clientX和c ...
js 深入原理讲解系列-事件循环
js 深入原理讲解系列-事件循环能看懂这一题你就掌握了 js 事件循环的核心原理不要专业的术语,说人话,讲明白! Q: 输出下面 console.log 的正确的顺序? console.log(' ...
深入理解DOM事件类型系列第二篇——键盘事件
× 目录 [1]类型 [2]顺序 [3]按键信息[4]应用前面的话鼠标和键盘是电脑端主要的输入设备,上篇介绍了鼠标事件,本文将详细介绍键盘事件类型键盘事件用来描述键盘行为,主要有keydown ...
《JS高程》事件类型学习笔记
事件类型: UI事件&焦点事件: 鼠标滚轮事件: 键盘与文本事件: 复合事件&变动事件: HTML5事件: 设备事件&触摸与手势事件:
js关于事件
摘要:事件在Web前端领域有很重要的地位,很多重要的知识点都与事件有关.本文旨在对常用的事件相关知识做一个汇总和记录. 在前端中,有一个很重要的概念就是事件.我对于事件的理解就是使用者对浏览器进行的一 ...

随机推荐

Java关键字transient和volatile小结
转自:http://heaven-arch.iteye.com/blog/1160693 transient和volatile两个关键字一个用于对象序列化,一个用于线程同步,都是Java中比较高阶的话 ...
System.Threading.Tasks
前言: 我们之前介绍了两种构建多线程软件的编程技术(使用异步委托或通过System.Threading的成员).这两个可以在任何版本的.NET平台工作. 关于System.Threading 的介绍 ...
Visual Studio Code快捷键_Linux
Keyboard shortcuts for Linux Basic editing Ctrl + X Cut line(empty selection) Ctrk + C Copy line(e ...
使用命令行设置MySql编码格式
使用命令行设置MySql编码格式 1.登录mysql 2.输入 SHOW VARIABLES LIKE 'character_set_%'; 3.查看 value值是否为utf8,如果不是,则使用SE ...
OLAP和OLTP
OLTP与OLAP的介绍数据处理分为两种技术架构系统:OLTP与OLAP OLTP(联机事务处理过程) OLTP是传统的关系型数据库的主要应用,主要是基本的,日常的事务处理,例如银行的交易 ...
深度CNN
[具体参考可以看这里(https://cloud.tencent.com/developer/article/1369425)
iOS-delegate设计模式
1. 使用场合 1> A想让B帮忙做一些事情,就让B成为A的代理 2> A想通知一下B发生了某些事情,或者想传递一些数据给B,就让B成为A的代理 3> B想监听A所做的一些事情, 就 ...
C语言实例解析精粹学习笔记——28
实例28:从键盘读入实数题目要求: 编制一个从键盘读入实数的函数readreal(double *rp).函数将读入的实数字符列转换成实数后,利用指针参数rp,将实数存于指针所指向的变量*rp. 思 ...
openwrt(三) 固件的烧录
导航: 方法1: tftp: 方法2: 在线升级方法3: BIOS烧录方法1:TFTP 这应该是最万能的一种方法了.TFTP是一种依靠网口传送数据的一种通信协议,没错,只是传输数据,并不是烧录,所 ...
007---Django的视图层
视图函数一个视图函数,简称视图,是一个简单的python函数.它接收web请求并且返回web响应. 1.一张网页的HTML内容 2.一个重定向 3.一个404错误 4.一个xml文档 5.一个字符串 ...

实用JS系列——事件类型