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个概念》。。。
扫一扫
1535
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
