1、js事件简介

事件(Event) 是 JavaScript 应用跳动的心脏 ，进行交互，使网页动起来。也是把所有东西粘在一起的胶水。当我们与浏览器中 Web 页面进行某些类型的交互时，事件就发生了。事件可能是用户在某些内容上的点击、鼠标经过某个特定元素或按下键盘上的某些按键。事件还可能是 Web 浏览器中发生的事情，比如说某个 Web 页面加载完成，或者是用户滚动窗口或改变窗口大小。
通过使用 JavaScript ，你可以监听特定事件的发生，并规定让某些事件发生以对这些事件做出响应

2、主要作用

1）、验证用户输入窗体的数据
2）、增加页面的动感效果

3、事件名称与事件处理程序(事件侦听器)

事件源: 谁触发的事件
事件名: 触发了什么事件
事件监听: 谁管这个事情，谁监视？
事件处理:发生了怎么办？

事件源 事件名 监听 处理
车 闯红灯 摄像头、交警 扣分罚款
按钮 点击 窗口 执行函数

如我们用户在页面中进行的点击这个动作，鼠标移动的动作，网页页面加载完成的动作等，都可以称之为事件名称，即：click、 mousemove、 load

<body onload="loadWindow();"></body>
<script>
function loadWindow() {
alert("加载窗体");
}
</script>

4、处理事件的方式

1）、行内事件（耦合度高）

<span id="main" onclick="test();">点我</span>
<script type="text/javascript">
// 此处 click，点击，是一种事件的名称，onclick 就叫做事件处理程序。
//下面这段代码，我们通过处理程序(onclick)为 main 这个元素预定了点击(click)，
//这样在点击(click)发生的时候，执行函数中的代码(弹出一个对话框)。
function test() {
alert('别点我。。。 ');
}
</script>

2）、DOM 0级事件（解耦）

<span id="main" onclick="test();">点我</span>
<script>
//dom 事件级处理
var obj = document.getElementById("main");
obj.onclick = function() {
alert('点击了此处哦！');
}
obj.onclick = function() {
alert('点击了此处哦 2！');
}
</script>

3）、DOM2级事件（可为同一个元素绑定多个同类型事件）

<span id="main" onclick="test();">点我</span>
//dom02 事件级处理：绑定 3 个事件
<script>
var obj = document.getElementById("main");
obj.addEventListener("click", test, false);
 
function test() {
alert(this.innerHTML);
}
obj.addEventListener("click", function() {
alert("第二个事件");
}, false);
</script>

以上是我们对js中事件的处理方式，下节我们将结合具体的事件演示效果。
更多有关Javascript大厦的技术文章请查看：JavaScript工作体系中不可或缺的函数、JS之location详解、JavaScript大厦之JS运算符、JavaScript工作原理：内存管理 + 如何处理4个常见的内存泄露、JavaScript 和 Web 开发都应该知道的10个概念、等等

js 大厦之JavaScript事件的更多相关文章

  1. [JS学习笔记]Javascript事件阶段：捕获、目标、冒泡

    当你在浏览器上点击一个按钮时,点击的事件不仅仅发生在按钮上,同时点击的还有这个按钮的容器元素,甚至也点击了整个页面. 事件流 事件流描述了从页面接收事件的顺序,但在浏览器发展到第四代时,浏览器开发团队 ...

  2. javascript 事件委托,jq,js模拟事件

    <!DOCTYPE> <html> <head> <title></title> <script src="Scripts/ ...

  3. JS基础知识：Javascript事件触发列表

    Javascript是一种由Netscape的LiveScript发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言. JavaScript使我们有能 ...

  4. js实例分析JavaScript中的事件委托和事件绑定

    我们在学习JavaScript中,难免都会去网上查一些资料.也许偶尔就会遇到“事件委托”(也有的称我“事件代理”,这里不评论谁是谁非.以下全部称为“事件委托”),尤其是在查JavaScript的事件处 ...

  5. javascript不依赖JS加载顺序事件对象实现

    背景: 在现在WEB开发中,稍复杂一点的页面,都会涉及到多个模块,尤其是类似seajs.LABjs.requireJS等模块工具出来后,前端开发者分模块开发已经慢慢变成一种习惯了,但是多个模块间的常常 ...

  6. JS JavaScript事件循环机制

    区分进程和线程 进程是cpu资源分配的最小单位(系统会给它分配内存) 不同的进程之间是可以同学的,如管道.FIFO(命名管道).消息队列 一个进程里有单个或多个线程 浏览器是多进程的,因为系统给它的进 ...

  7. JavaScript事件代理和委托（Delegation）

    JavaScript事件代理 首先介绍一下JavaScript的事件代理.事件代理在JS世界中一个非常有用也很有趣的功能.当我们需要对很多元素添加事件的时候,可以通过将事件添加到它们的父节点而将事件委 ...

  8. 【移动端兼容问题研究】javascript事件机制详解（涉及移动兼容）

    前言 这篇博客有点长,如果你是高手请您读一读,能对其中的一些误点提出来,以免我误人子弟,并且帮助我提高 如果你是javascript菜鸟,建议您好好读一读,真的理解下来会有不一样的收获 在下才疏学浅, ...

  9. Node.js 教程 05 - EventEmitter(事件监听/发射器 )

    目录: 前言 Node.js事件驱动介绍 Node.js事件 注册并发射自定义Node.js事件 EventEmitter介绍 EventEmitter常用的API error事件 继承EventEm ...

随机推荐

  1. SSM框架中各层的含义和联系

    一.pojo层 也有人称其为model.domain.bean等,pojo层是对应的数据库表的实体类. 二.1.持久层:Dao层(Mapper) Dao(Data access object)层,称为 ...

  2. Contours 等高线图

    1.画等高线 数据集即三维点 (x,y) 和对应的高度值,共有256个点.高度值使用一个 height function f(x,y) 生成. x, y 分别是在区间 [-3,3] 中均匀分布的256 ...

  3. docker创建镜像及push镜像出错问题

    docker build  出错 Got permission denied while trying to connect to the Docker daemon socket at unix:/ ...

  4. 数据库子查询和join的比较

    子查询进行SELECT语句嵌套查询,可以一次完成很多逻辑上需要多个步骤才能完成的SQL操作.子查询虽然很灵活,但是执行效率并不高. select goods_id,goods_name from go ...

  5. mysql 数据库的备份和还原

    1. 逻辑备份 (和存储引擎无关) mysqldump -uroot -p schoolDB TSubject > /mysqlbackup/schoolDB.TSubject.sql  (备份 ...

  6. GUI学习之二——PyQt控件初识

    一.控件概念 控件是一个程序界面上的各个独立的元素, 它具备用户点击.接收用户输入.展示不同内容.存放其他控件等功能. 二.控件分类 常用的控件按功能可以分为以下几种类 按钮 QPushButton— ...

  7. python 子进程 subpocess 的使用方法简单介绍

    python的子进程嘛,就是利用python打开一个子进程(当然像是一句废话),但是可能和我们理解的不太一样. 一:如何理解? 我们可能的理解:多开一个进程运行某个python函数(如果只想实现这个功 ...

  8. 解决win系统无法安装.NET Framework 4.0 4.6 原因是HRESULT0xc8000222

    1.开始----- 运行------- cmd ----- 键入net stop WuAuServ回车(停止windows update服务) 2.开始----- 运行----键入%windir%回车 ...

  9. memcache集群

    实现memcache集群   一:memcache本身没有redis锁具备的数据持久化功能,比如RDB和AOF都没有,但是可以通过做集群的方式,让各memcache的数据进行同步,实现数据的一致性,即 ...

  10. Eclipse配置注释模板详细介绍

    <引言> Eclipse 中提供了一个非常人性化的功能,可以自动生成注释为我们程序员做项目时提供便利,并且注释内容还具有定制化 可以根据自己的喜好配置不同的样式. <正文> 首 ...