JS事件
Posted xiaoming9
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JS事件相关的知识，希望对你有一定的参考价值。
javascript
事件（event）
事件是JavaScript跳动的心脏，进行交互，使网页动起来。当我们与浏览器 中 Web 页面进行某些类型的交互时，事件就发生了。事件可能是用户在某些内容上的点击、 鼠标经过某个特定元素或按下键盘上的某些按键。事件还可能是 Web 浏览器中发生的事情， 比如说某个 Web 页面加载完成，或者是用户滚动窗口或改变窗口大小。
作用
- 使网页增加动态变化，更好看
- 增加用户的体验
- 验证用户输入的数据
事件中的几个名词：事件源：谁触发的事件。 事件名：触发了什么事件 。 事件监听：谁监管这个事件，谁监视。 时间处理：发生了怎么办。
事件类型，常用事件:
- onload：当页面或图像加载完后立即触发
- onblur：元素失去焦点
- onfocus：元素获得焦点
- onclick：鼠标点击某个对象
- onchange：用户改变域的内容
- onmouseover：鼠标移动到某个元素上
- onmouseout：鼠标从某个元素上离开
- onkeyup：某个键盘的键被松开
- onkeydown：某个键盘的键被按下
事件流
事件流分为两种，一种是事件冒泡，另外一种是事件捕获。两者有着明显的的区别
事件冒泡
事件冒泡是由具体的产生事件的元素由里往外的传递事件，
如果点击了页面中的<div>元素，那么这个 click 事件会按照如下顺序传播：
1、<div> 2、<body> 3、<html> 4、document
事件捕获
事件捕获自外往内的传递事件，由最外层的先获得事件，一层层外内传递，直到传到精确的元素。
DOM2级事件流
规定了事件流分为三个阶段：1）事件捕获阶段 为截获事件提供了条件，也就是截获事件
2） 处于目标时间阶段 然后实际的目标获得事件
3）事件冒泡阶段 获得事件并对事件做出响应
DOM0级事件处理
<body>
<button id="id1"> 按钮 </button>
//可以直接在元素中添加事件
<button id="id2" onclick="test()">按钮</button>
<button id="id3" onclick="alert(‘你好‘);" > 按钮 </button>
</body>
<script>
//通过id得到元素button的对象，通过往button对象中添加属性值的形式完成事件的添加
var a =document.getElementById("id1")
a.onclick=function(){
alert(‘你好‘)
}
function test(){
alert("你好")
}
</script>
//如果想要删除这个alert的事件操作，可以直接 a.onclick=null 进行初始化。
DOM2级事件处理
<body>
<button id="id1">按钮</button>
//可以直接在属性中添加事件
</body>
<script>
var a= documentGetElementById("id1")
a.addEventListener(‘click‘,function(){
alert("你好")
},false)
//也可以在外面自定义一个方法，用方法名称来完成事件的加入
function test(){
alert("你好")
}
a.addEventListener(‘click‘,test,false)
</script>
以上是关于JS事件的主要内容，如果未能解决你的问题，请参考以下文章
js 温故而知新 webkitTransitionEnd 监听Transition动画结束事件
谷歌浏览器调试jsp 引入代码片段，如何调试代码片段中的js
Android 事件分发事件分发源码分析 ( Activity 中各层级的事件传递 | Activity -＞ PhoneWindow -＞ DecorView -＞ ViewGroup )(代码片段