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. 设计模式之jdk动态代理模式、责任链模式-java实现

    设计模式之JDK动态代理模式.责任链模式 需求场景 当我们的代码中的类随着业务量的增大而不断增大仿佛没有尽头时,我们可以考虑使用动态代理设计模式,代理类的代码量被固定下来,不会随着业务量的增大而增大. ...

  2. Layer 创建 和 lamdba function 创建 和 API GateWay 配置 和 添加依赖

    进入控制台 选择 Lamdba 服务 进入控制面板, 单击右边: 创建函数 然后进入此图界面 添加lamdba 函数 名称 选择运行环境:python 选择角色 选择现有角色, 角色创建 可以参考 无 ...

  3. nginx新增tcp模板

    最近在装nginx时,发现新增了tcp模板,装了一遍,现记录下来过程. 1.下载nginx源码包,并解压 2.下载tcp模板压缩包https://github.com/yaoweibin/nginx_ ...

  4. 6. Redis复制

    6. Redis复制6.1 配置6.1.1 建立复制6.1.2 断开复制6.1.3 安全性6.1.4 只读6.1.5 传输延迟6.2 拓扑6.3 原理6.3.1 复制过程6.3.2 数据同步6.3.3 ...

  5. 4.Redis客户端

    4.Redis客户端4.1 客户端通信协议4.2 Java客户端Jedis4.2.1 获取Jedis4.2.2 Jedis的基本使用方法4.2.3 Jedis连接池的使用方法4.2.4 Redis中P ...

  6. 天兔（Lepus）数据库监控系统安装笔记

    天兔(Lepus)数据库监控系统安装笔记 一.部署:本次操作系统:centos6.9 IP:192.168.153.145Lepus_v3.8_beta MySQL-python-1.2.5xampp ...

  7. mysql 字段指定值靠前排序方法，多字段排序排序方法

    背景:SEO下选择某查询条件 查询展示信息为装修设计师以及设计师作品.设计师原型设计为:选择某风格 例如:简约,则列表出现拥有简约风格的设计师信息以及该设计师类型为简约的作品(3条靠前记录) 浏览原型 ...

  8. java34

    局部内部类:定义在方法中的类 -1局部类中可引用局部变量(定义在方法中的变量),但是局部变量必须已经初始化, 因为局部变量前默认带着final. 2.局部内部类的东西只能在定义的方法中使用(在方法中创 ...

  9. C# byte[]数组和string的互相转化 (四种方法)

    C# byte[]数组和string的互相转化 (四种方法) 第一种 [csharp] view plain copy string str = System.Text.Encoding.UTF8.G ...

  10. 关于python-flask框架中的几个文件的理解

    项目名.py— config.py—配置文件.一般数据库配置还有DEBUG的配置之类的卸载这个py文件中 models.py—模型文件.一般在这里面存储建立数据库的类. exts.py—过渡文件.因为 ...