JavaScript事宜探秘

2019年8月30日 134次阅读 来源: dunizb

一、事宜流

事宜流形貌的是从页面中吸收事宜的递次。
IE的事宜流是事宜冒泡流，而Netscape的事宜流是事宜捕捉流

1、事宜冒泡

事宜冒泡，即事宜最最先由最详细的元素(文档中嵌套条理最深的谁人节点)吸收，然后逐级向上转播至最不详细的节点(文档)。
以下图所示，假如你点击了按钮，那末也以为你点击了表面的div，最终会一向通报到document上，从小到大的流传，就比方水里鱼的冒泡，从小泡泡大道泡泡的历程。

《JavaScript事宜探秘》

2、事宜捕捉

事宜捕捉跟事宜冒泡恰好相反。它的头脑是不太详细的节点应当更早吸收到事宜，而最详细的节点末了吸收到事宜。
《JavaScript事宜探秘》

3、事宜的三个阶段

事宜的三个阶段分别是：捕捉阶段、目的阶段、冒泡阶段
《JavaScript事宜探秘》

二、事宜处置惩罚顺序

1、HTML事宜处置惩罚顺序

所谓的HTML事宜是指把JS直接写在HTML元素中，比方下面的代码：
[顺序1]

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事宜流</title>
</head>
<body>
    <div id="box">
        <input type="button" value="按钮1" id="btn1" onclick="alert('hello')">
    </div>
</body>
</html>

或许
[顺序2]

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事宜流</title>
</head>
<body>
    <div id="box">
        <input type="button" value="按钮1" id="btn1" onclick="showMsg()">
    </div>
    <script type="text/javascript">
    function showMsg(){
        alert("hello");
    }
    </script>
</body>
</html>

那末HTML事宜处置惩罚顺序有一种很明显的瑕玷：HTML与JS代码严密的耦合在一起，这不是这一种好的顺序设计。

2、DOM0级事宜处置惩罚顺序

DOM0级别事宜处置惩罚顺序是一种比较传统的，是指把一个行数赋值给一个事宜处置惩罚顺序的属性，也是用的比较多的体式格局。
他的长处是：简朴，而且具有夸浏览器的上风。
[顺序3]

<input type="button" value="按钮2" id="btn2">
var btn2 = document.getElementById("btn2");
btn2.onclick = function(){
     alert("这是经由过程DOM0级增加的事宜！");
}

假如要须要这个事宜，能够如许写：
[顺序4]

btn2.onclick = null;

以上就是DOM0级事宜处置惩罚要领。

3、DOM2级事宜处置惩罚顺序

DOM2级事宜定义了两个要领：用于处置惩罚指定和删除事宜处置惩罚顺序的操纵：addEventListener()和removeEventListener()。它们都吸收三个参数：要处置惩罚的事宜名、作为事宜处置惩罚顺序的函数和一个布尔值。
他的有点与DOM0级一样，还能够增加多个事宜处置惩罚顺序。
[顺序5]

<div id="box">
    <input type="button" value="按钮1" id="btn1" onclick="showMsg()">
    <input type="button" value="按钮2" id="btn2">
    <input type="button" value="按钮3" id="btn3">
</div>
<script type="text/javascript">
function showMsg(){
    alert("hello");
}
var btn2 = document.getElementById("btn2");
var btn3 = document.getElementById("btn3");
btn2.onclick = function(){
    alert("这是经由过程DOM0级增加的事宜！");
}
btn2.onclick = null;
//DOM2级事宜
btn3.addEventListener("click",function(){
    //猎取按钮的文本
    alert(this.value);
},false);
//删除事宜
btn3.removeEventListener("click",showMsg,false);
</script>

然则，在IE8-的浏览器中没法运转，不支撑addEventListener，IE有IE独占的DOM2级事宜处置惩罚顺序。（IE11亲测能够，IE9、10没测试过）。

4、IE事宜处置惩罚顺序

在IE中也供应了相似的两个要领
attachEvent()增加事宜
detachEvent()删除事宜
这两个要领吸收雷同的两个参数：事宜处置惩罚顺序称号与事宜处置惩罚函数
[顺序6]

btn3.attachEvent("onclick",showMsg);

这这里又要给事宜加上“on”，这与DOM2级事宜处置惩罚顺序主意。那末这就夸浏览器了。
那末怎样处理跨浏览器的题目？答案是，才能推断，即你支撑attachEvent()的才能就给你这个，你有别的才能你就你其他的才能。

5、跨浏览器的事宜处置惩罚顺序

我们封装到一个对象
[顺序7]

var eventUtil = {
    //增加句柄
    addHandle:function(element,type,handle){
        if (element.addEventListener) {
            element.addEventListener(type,handle,false);
        }else if(element.attachEvent){
            element.attachEvent("on"+type,handle);
        }else{
            element["on"+type] = handle;
        };
    },
    //删除句柄
    removeHandle:function(element,type,handle){
        if (element.removeEventListener) {
            element.removeEventListener(type,handle,false);
        }else if(element.dettachEvent){
            element.dettachEvent("on"+type,handle);
        }else{
            element["on"+type] = null;
        };
    }
}
//挪用
eventUtil.addHandle(btn3,"click",showMsg);

如许一来，IE和Chrome都能很好的支撑了。

三、事宜对象

事宜对象event
《JavaScript事宜探秘》

1、DOM中的事宜对象

(1)、type:猎取事宜范例
[顺序8]

function showMsg(event){
    alert(event.type);    //click
}

(2)、target：事宜目的
[顺序9]

function showMsg(event){
    alert(event.target.nodeName);    //input
}

(3)、stopPropagation() 阻挠事宜冒泡
我们已知道了事宜冒泡的观点，那末，当我点击按钮的时刻我就是点击按钮，不让它再冒泡到div上了，那末我们能够在顺序中加上
event.stopPropagation() 即可阻挠事宜的冒泡。
(4)、preventDefault() 阻挠事宜的默许行动
事宜的默许行动，比方,跳转，他的默许行动就是跳转到某个链接，那末如今我们想要点击它不让它跳转，去实行我们给他的事宜行动。那末能够如许写：
event.preventDefault()

2、IE中的事宜对象

(1)、type:猎取事宜范例
(2)、srcElement：事宜目的
(3)、cancelBubble=true阻挠事宜冒泡
(4)、returnValue=false阻挠事宜的默许行动
[顺序10]

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事宜</title>
    <script src="js/event.js"></script>
</head>
<body>
    <a href="index.html" id="go">跳转</a>
    <script type="text/javascript">
    var go = document.getElementById("go");
    go.onclick = function(event){
        if(event && event.preventDefault){
            event.preventDefault();
        }else{
            window.event.returnValue = false;
        }
        alert("我阻挠了你");
    }
    </script>
</body>
</html>

3、夸浏览器的事宜对象

虽然 DOM 和 IE 中的 event 对象差别，但基于它们之间的相似性照旧能够拿出跨浏览器的计划来。IE 中 event 对象的悉数信息和要领 DOM 对象中都有，只不过完成体式格局不一样。不过，这类对应关联让完成两种事宜模子之间的映照异常轻易。能够对前面引见的 EventUtil 对象加以加强，增加以下要领以求同存异。

getEvent: function(event){
    return event ? event : window.event;
},
getTarget: function(event){
    return event.target || event.srcElement;
},
preventDefault: function(event){
   if (event.preventDefault){
       event.preventDefault();
   } else {
       event.returnValue = false;
   }
},
stopPropagation: function(event){
    if (event.stopPropagation){
        event.stopPropagation();
    } else {
        event.cancelBubble = true;
    }
}

第一个是 getEvent()，它返回对 event对象的援用，在兼容 DOM 的浏览器中， event 变量只是简朴地传入和返回。而在 IE 中， event 参数是未定义的（undefined），因而就会返回 window.event。

第二个要领是 getTarget()，它返回事宜的目的。在这个要领内部，会检测 event 对象的 target属性，假如存在则返回该属性的值；不然，返回 srcElement 属性的值。

第三个要领是 preventDefault()，用于作废事宜的默许行动。在传入 event 对象后，这个要领会搜检是不是存在preventDefault()要领，假如存在则挪用该要领。假如 preventDefault()要领不存在，则将 returnValue 设置为 false。

第四个要领是 stopPropagation()，其完成体式格局相似。起首尝试运用 DOM 要领阻挠事宜流，不然就运用 cancelBubble 属性。

    原文作者：dunizb
    原文地址: https://segmentfault.com/a/1190000004560734
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞