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

随机推荐

HTTP的DELETE方法Body传递参数问题解决
理论上,Delete method是通过url传递参数的,如果使用body传递参数呢? 前提: 使用HttpClient发送http请求问题: httpDelete对象木有setEntity方法解 ...
fcc初级算法方法总结
var arr = str.split("分隔符"): var newArr = arr.reverse(); var str = arr.join("连接符" ...
iOS圆角view的Swift实现（利用Core Graphics绘制）
iOS圆角view的Swift实现(利用Core Graphics绘制) 因为app的列表用用到了圆形图片的头像,所以去探究并思考了一下这个问题.首先这个问题有两个方向的解决方案: 把图片弄成圆形的. ...
P2661 信息传递 DFS
题目链接:洛谷 P2661 信息传递一个人要想知道自己的生日,就意味着信息的传递是成环的,因为每轮信息只能传递一个人,传递的轮数就等于环的大小环的大小就等于环中的两个点到第三个点的距离之和加一,我 ...
Cloudera Manager 安装 CDH5
文档说明本文是针对Linux CentOS6服务器与CDH5.15的安装手册. 关于CDH和ClouderaManager CDH(Cloudera's Distribution, includin ...
Allowed memory size of 134217728 bytes exhausted (tried to allocate 2 bytes)
出现 Allowed memory size of 134217728 bytes exhausted (tried to allocate 2 bytes)时在php.ini文件中配置 memor ...
JZOJ 5914. 盟主的忧虑
Description 江湖由 N 个门派(2≤N≤100,000,编号从 1 到 N)组成,这些门派之间有 N-1 条小道将他们连接起来,每条道路都以“尺”为单位去计量,武林盟主发现任何两个 ...
Python系列6之面向对象
目录生成器和迭代器字符串格式化内置函数vars 反射面向对象编程一. 生成器和迭代器 1. 生成器生成器具有一种生成的能力,它仅仅代表着一种生成的能力,当我们需要使用的时候,才会通过迭代 ...
C# 打开帮助文档，打开电脑中其他应用或者文件
打开帮助文档 System.Diagnostics.Process.Start(Directory.GetCurrentDirectory() + "\\" + "hel ...
linux c scanf()小解
今天学习了新的内容,关于c语言的scanf()函数. scanf()函数,读取指定格式的值赋值给相应变量.空格(‘ ‘),回车('\n'),TAB是分隔符,轻易不会被读取.还有,该函数的返回值是正确读 ...

实用JS系列——事件类型