js 大厦之JavaScript事件

来源：互联网发布：淘宝盗图申诉包过编辑：程序博客网时间：2024/04/19 23:20

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个概念

阅读全文

0 0