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

随机推荐

XCode快捷键使用
:first-child{margin-top:0!important}.markdown-body>:last-child{margin-bottom:0!important}.markdow ...
字符串替换For linux C
1.临时空间给了个1024,不需要可减少长度. 2.结果只用用strcpy了,没校验. bool Replace(char *str,const char *src, const char *des) ...
struts2之标签库
使用Struts2标签的准备工作: 导入Struts2标签库,该标签定义文件位于 struts2-core-2.3.16.3.jar 的 METE-INF下的struts-tag.tld文件. < ...
java基础不牢固容易踩的坑
java基础不牢固容易踩的坑经过一年java后端代码以及对jdk源码阅读之后的总结,对java中一些基础中的容易忽略的东西写下来,给偏爱技术热爱开源的Coder们分享一下,避免在写代码中误入雷区. ...
【PHP】nl2br转化输出input框的换行
在input或者textarea框中输入的换行符保存到数据库是/n,如果直接输出到前端的话是不会有换行的,所以要用到nl2br转化 nl2br($test);
vue 点击当前元素添加class 去掉兄弟的class
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...
C++基础 C++对类的管理——封装
1.封装两层含义: (1)把事物的属性和方法结合成个整体. (2)对类的属性和方法进行访问控制,对不信的进行信息屏蔽. 2.访问控制控制分为类的内部,类的外部. public 修饰的成员,可在内 ...
[Codeforces375D]Tree and Queries(莫队算法)
题意:给定一棵树,每个节点有颜色,对于每个询问(u,k)询问以u为根节点的子树下有多少种颜色出现次数>=k 因为是子树,跟dfs序有关,转化为一段区间,可以用莫队算法求解直接用一个数组统计出现 ...
python Beautiful Soup库入门
bs4库的HTML内容遍历方法基于bs4库的HTML格式输出显示:友好的显示 <tag>.prettify() 编码:bs4库将任何HTML输入都变成utf-8编码(python 3. ...
12，DBUtils - Python数据库连接池
创建数据库连接池: import time import pymysql import threading from DBUtils.PooledDB import PooledDB, SharedD ...

实用JS系列——事件类型