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. Android Studio 的 build 过程

    如图, 编译器将源代码(包括 Application Module 及其所依赖的所有 Library 源代码)转换成 DEX(Dalvik Executable)文件(其中包括运行在 Android ...

  2. 【CSS】面试知识整理

    手写clearfix .clearfix:after { content: ''; display: table; clear: both; } .clearfix { *zoom:; } flex布 ...

  3. Zookeeper配置文件

    zookeeper的默认配置文件为zookeeper/conf/zoo_sample.cfg,需要将其修改为zoo.cfg.其中各配置项的含义,解释如下: 1.tickTime:Client-Serv ...

  4. 如何监听Element组件<el-input>标签的回车事件

    一.现象 表单提交时需要处理输入框的回车事件,一般的原生input标签可以用@keyup.enter="onSubmit"(tips:onSubmit为定义的方法) 二.解决 1. ...

  5. robotframework 连接mysql数据库

    1.安装databaselibrary.pymysql 通过cmd命令执行:pip install robotframework-databaselibrary 通过cmd命令执行:pip insta ...

  6. 网址导航18C

    [名站] 百度 网易 腾讯 新华 中新 凤凰 [新闻] 联合早报  南方周末  澎湃新闻 [系统] 宋永志 蒲公英 技术员 装机网 系统之家 [软件] 星愿浏览器 微PE [分享] zd423 殁飘遥 ...

  7. css firefox火狐浏览器下的兼容性问题

    1.DOCTYPE 影响 CSS 处理 2.FF: div 设置 margin-left, margin-right 为 auto 时已经居中, IE 不行 3.FF: body 设置 text-al ...

  8. Win10下 usart驱动PL2303无法安装的问题

    随着系统的 普及,很多小伙伴也放弃了原有的win7系统,加入了win10的行列.但是相对win7的稳定来说,win10还存在很多的不足 . 新买了一个usart的模块,但是在自家的电脑上使用的时候 一 ...

  9. 【转】async & await 的前世今生（Updated）

    async 和 await 出现在C# 5.0之后,给并行编程带来了不少的方便,特别是当在MVC中的Action也变成async之后,有点开始什么都是async的味道了.但是这也给我们编程埋下了一些隐 ...

  10. PLSQL账号密码

    Product Code:4t46t6vydkvsxekkvf3fjnpzy5wbuhphqzserial Number:601769 password:xs374ca