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. django xadmin查找当前用户所在组

    self.request.user:获取当前登录用户用户名 qs = Group.objects.get(user=self.request.user)获取当前登录用户所在组qs.name 获取当前登 ...

  2. Failed to create agent because it is not close enough to the NavMesh

    主要原因是:两个相同对象navmesh点太近造成. 解决方案:通过NavMesh.SamplePosition 获得可以行走点 ;i<;i++) { , mRadius); , 3.14f); ...

  3. JavaScript获取扫码枪相关资料

    https://blog.csdn.net/jiongxian1/article/details/78906124 https://blog.csdn.net/jifengdalu/article/d ...

  4. boost多线程入门介绍

    :first-child { margin-top: 0px; } .markdown-preview:not([data-use-github-style]) h1, .markdown-previ ...

  5. 201621123002《java程序设计》第十二周学习总结

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多流与文件相关内容. 2. 面向系统综合设计-图书馆管理系统或购物车 使用流与文件改造你的图书馆管理系统或购物车. 2.1 简述如何 ...

  6. python爬虫-上期所持仓排名数据爬取

    摘要:笔记记录爬取上期所持仓数据的过程,本次爬取使用的工具是python,使用的IDE是pycharm 一.查看网页属性,分析数据结构 在浏览器中打开上期所网页,按F12或者选择表格文字-右键-审查元 ...

  7. Js 常用调试的方法

    A  使用alert() 和document.write() 方法监视变量值 如果要中断代码的运行,监视变量的值,则使用alert() 方法: 如果需要查看的值很多,则使用document.write ...

  8. Qt自定义滚动条（不使用样式表）

    前面使用Qt 样式表实现滚动条,在实际工作中,发现存在一些瑕疵,例如如果在主窗口中绘制背景,则有可能给滚动条染色,还有如果想实现特殊的效果,则必须使用自定义风格,即从QStyle的子类派生出新的类型. ...

  9. Netty使用(一)

    什么是Netty Netty由JBOSS提供的基于Java NIO的开源框架,Netty提供异步非阻塞.事件驱动.高性能.高可靠.高可定制性的网络应用程序和工具, 可用于开发服务端和客户端. 配置服务 ...

  10. 【Python】 Python3 环境搭建

    Python是一种计算机程序设计语言.是一种面向对象的动态类型语言,最初被设计用于编写自动化脚本(shell),随着版本的不断更新和语言新功能的添加,越来越多被用于独立的.大型项目的开发. Windo ...