Javascript事件

事件：可以被Javascript侦测到的行为，例如

onClick——单击事件
onMouseOver——鼠标经过事件
onMouseOut——鼠标移出事件
onChange——文本内容改变事件
onSelect——文本框选中事件
onFocus——光标聚集事件
onBlur——移开光标事件
onLoad——网页加载事件
onUnload——关闭网页事件

当然，这里的事件并不全面，只是说一些比较常用的

事件流

事件流
描述的是在页面中接受事件的顺序
事件冒泡
由最具体的元素先接受事件，然后逐级向上传播至最不具体的元素的节点（文档）[button -> div ->文档]
事件捕获
最不具体的节点先接收事件，而最具体的节点应该是最后接收事件[文档 -> div ->button]

事件处理

HTML事件处理
直接添加到HTML结构中
代码示例：
<button onclick="demo1()">HTML事件处理</button> <script> function demo1() { alert("HTML事件处理"); } </script>
点击后，执行方法弹出：

缺点：当代码有一处需要修改时，牵连到的部分都需要被修改。

DOM0级事件处理

把一个函数赋值给一个事件处理程序属性

代码示例：

<button id="dom0Btn">DOM0级事件</button>
<script>
    var dom0Btn = document.getElementById("dom0Btn");
    dom0Btn.onclick = function(){ alert("DOM0级事件处理1") };
</script>

此时点击后，将弹出：

优点：当代码有一处需要修改时，不需所有牵连到的部分都要修改。

【问题】如果有多个事件的话，会产生问题。

代码示例：

<button id="dom0Btn">DOM0级事件</button>
<script>
    var dom0Btn = document.getElementById("dom0Btn");
    dom0Btn.onclick = function(){ alert("DOM0级事件处理1") };//被下面的一条代码给覆盖掉了
    dom0Btn.onclick = function(){ alert("DOM0级事件处理2") };
</script>

此时点击后，将弹出：之前的事件就会被最后一个事件覆盖掉。

缺点：如果有多个事件，那么将会执行最后一个事件，之前的事件都被覆盖掉。

DOM2级事件处理

addEventListener（“事件名”，“事件处理函数”，“布尔值”）：添加事件
true：捕获
false：冒泡
removeEventListener() ：移除事件

代码示例：

<button id="dom2Btn">DOM2级事件</button>
<script>
    var dom2Btn = document.getElementById("dom2Btn");
    dom2Btn.addEventListener("click",demo2);
    dom2Btn.addEventListener("click",demo3);
    dom2Btn.addEventListener("click",demo4);
    function demo2() { alert("DOM2级事件处理1");}
    function demo3() { alert("DOM2级事件处理2");}
    function demo4() { alert("DOM2级事件处理3");}
    dom2Btn.removeEventListener("click",demo3);
</script>

此时点击后，弹出：点击【确定】后再弹出因为方法demo3()在第10行被移除了。所以只显示两个事件。它不会用新的事件覆盖之前的事件。

IE事件处理: attachEvent()
detachEvent()
以上的两种方法用法同addEventListener和removeEventListener。主要针对IE8及以下的浏览器。; 为了针对不同的浏览器，事件添加都成功，可以有如下代码。

代码示例：

<button id="eveBtn">事件处理</button>
<script>
    var eveBtn = document.getElementById("eveBtn");
    if(eveBtn.attachEvent){
        eveBtn.attachEvent("onclick",demo5);
    }else if(eveBtn.addEventListener){
        eveBtn.addEventListener("click",demo5);
    }else{
        eveBtn.onclick = demo5();
    }
    function demo5(){
        alert("事件处理")
    }
</script>

　　　　　　　　同一个事件处理，三种不同的方式，主要看能执行哪个。

事件对象

事件对象
在触发DOM事件的时候都会产生一个对象，并且事件对象会存在很多属性和方法供我们使用

事件对象event

type：获取事件类型（例如：click，mouseover）

代码示例：

<button id="typeBtn">获取事件类型</button>
<script>
    var typeBtn = document.getElementById("typeBtn");
    typeBtn.addEventListener("mouseover",showType);
    function showType(event) {
        alert(event.type);
    }
</script>

target：获取事件目标（就是当前事件作用于谁）

代码示例：

<div>
    <button id="targetBtn">获取事件目标</button>
    <script>
        var targetBtn = document.getElementById("targetBtn");
        targetBtn.addEventListener("click",showtarget);
        function showtarget(event) {
            alert(event.target);
        }
    </script>
</div>

此时点击后，弹出点击【确定】后，再弹出这是一个事件冒泡。

stopPropagation()：阻止事件冒泡
面对获取事件目标代码，再增加代码
```
function showtarget(event) {
    alert(event.target);
    event.stopPropagation();
}
```
此时再点击后，就只弹出。在button调用的函数中增加event.stopPropagation()方法，就可以阻止事件冒泡。
preventDefault():阻止事件默认行为
定义代码<a>href="www.baidu.com">baidu.com</a>，其中的链接就是a标签的默认行为，当点击 baike则会跳转到百度百科。增加preventDefault()后，则不会跳转。
代码示例：
```
<a id="aId" href="https://baike.baidu.com/">baike</a>
<script>
    document.getElementById("aId").addEventListener("click",showA);
    function showA(event){
        event.preventDefault();
    }
</script>
```

posted @ 2017-07-30 15:27 Nnn_Lillian 阅读(173) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

Nnn_Lillian

Javascript事件

事件：可以被Javascript侦测到的行为，例如

事件流

事件处理

事件对象

公告