js 大厦之JavaScript事件
来源:互联网 发布:淘宝盗图申诉包过 编辑:程序博客网 时间:2024/06/10 18:03
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
- js 大厦之JavaScript事件
- JavaScript大厦之地基:js数据类型
- JavaScript大厦之JS运算符
- JS大厦之地基:JS变量
- js 摩天大厦
- [js点滴]JavaScript之鼠标事件04
- [js点滴]JavaScript之键盘事件05
- [js点滴]JavaScript之触摸事件07
- [js点滴]JavaScript之文档事件08
- 大厦
- 【javascript】js事件委托
- [js]javascript事件处理
- JavaScript入门之二:Js基本事件,表单控制
- [js点滴]JavaScript之拖拽事件06
- [js点滴]JavaScript之设备事件详解01
- JavaScript事件之鼠标事件
- JS事件之绑定事件
- JS事件之事件委托
- leetcode weekly contest 61 ( 740. Delete and Earn )
- 有关 Azure IaaS VM 磁盘以及托管和非托管高级磁盘的常见问题解答
- Servlet如何处理多个请求访问?
- 最好学习网址Java、php、redis.......
- cocos2dx打包APK爬坑
- js 大厦之JavaScript事件
- 创新工场汪华:OMO时代,谁是下一个领跑者?
- 一文读懂AlphaGo背后的强化学习
- 人工智能到底威胁人类还是造福人类?
- windows系统安装Kafka客户端KafkaOffsetMonitor
- Java学习第二天
- MySQL--数据库操作
- .IllegalStateException: Can not perform this action after onSaveInstanceState
- 验证满二叉树-LintCode