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

随机推荐

【读书笔记】你不知道的JavaScript（上卷）--作用域是什么
第一章作用域 1.理解作用域几个名词的介绍引擎:从头到尾负责整个JavaScript程序的编译及执行过程编译器:负责语法分析及代码生成器等脏活累活作用域:负责收集并维护由所有声明的标识符(变 ...
vscode + leetcode +github 同步
1.用VScode打开本地leetcode文件夹 C:\Users\Administrator\.leetcode 2.上传到本地git库 3.打开github桌面,上传到远程库
Latex 使用笔记，取消目录
不使用标准模板(如ieee或者acm的模板)的前提下: \usepackage{hyperref} \hypersetup{bookmarks={false}} 或者 \usepackage[book ...
thinkphp centos7 报class POD not found
没有安装PDO yum install php70w-pdo yum install php70w-mysqlnd 两条命令搞定
thinkphp5控制器向+vue的data里传值
传一维数组传值 $array=['id'=>40,"cat_name"=>"明星产品"]; $MenuCats_info=json_encode($ ...
C语言进阶——goto 和 void 的分析08
遭人遗弃的goto: 高手潜规则:禁止使用goto 项目经验:程序质量与goto的出现次数成反比最后的判决:将goto打入冷宫程序示例1:(goto副作用分析) #include <stdi ...
centos安装xfce及输入法
一.执行CentOS7 最小安装去官网 https://www.centos.org/ 下载CentOS-7-x86_64-Minimal-1804.iso,然后使用rufus刻录U盘,安装之.安装 ...
Dropping Balls（小球下落）
紫书P148,例题6-6 Sample Input 4 2 3 4 10 1 2 2 8 128 Sample Output 12 7 512 3 255 这应该不仅仅是一棵完全二叉树,题目中说保证所 ...
mysql学习第一天select
emp.dept表 DROP TABLE IF EXISTS `dept`; CREATE TABLE `dept` ( `DEPTNO` int(2) NOT NULL, `DNAME` varch ...
初见spark-03(高级算子)
最近心情不是很好,但是需要调节自己,真的需要调节自己,还是要努力,这个世界有我喜欢的人,有我追求的人,也许真的是守的住寂寞,耐得住繁华吧. 不说别的了,今天我们来接受啊spark的高级算子的系列 1. ...

实用JS系列——事件类型