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>