JS基礎入門篇(二十一)—事件流

1.事件綁定

方式一:用on綁定事件html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
    #box{
        width:100px;
        height:100px;
        background-color:red;
    }
</style>
</head>
<body>
<div id="box"></div>
<script>
    var box = document.getElementById("box");
    box.onclick = function(){
        alert(1);
        alert(2);
    };
</script>
</body>
</html>

方式二:用addEventListener進行事件偵聽,也能起到綁定事件的做用。瀏覽器

addEventListener函數

第一個參數:事件名
        (click、mouseover...)
        注意:事件名不加on
    第二個參數:綁定的函數
        (有名函數、匿名函數)
    第三個參數:
        是否捕獲
        默認值:false
        
能夠爲一個元素的同一個事件名 綁定上多個處理函數

點擊查看效果以及代碼,codepen中也有console能夠查看spa

如下是完整代碼code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #box{
            width: 100px;
            height: 100px;
            background: red;
        }
    </style>
</head>
<body>
    <div id="box"></div>
    <script>
        var div=document.getElementById("box");
        div.onclick=function () {
            alert(1);
            alert(2);
            console.log("3");
        };
        //傳入匿名函數
        div.addEventListener("click",function () {
            console.log("click-4");
        });
        //傳入匿名函數
        div.addEventListener("click",function () {
            console.log("click-5");
        });
        //傳入匿名函數
        div.addEventListener("mouseover",function () {
            console.log("mouseover-1");
        });

        function fn() {
            console.log("click-6");
        }
        //傳入的是有名函數
        div.addEventListener("click",fn);

    </script>
</body>
</html>

2.事件解綁

事件解綁:htm

(1)經過用on綁定的事件,只須要爲事件 從新賦值 便可。
 (2)經過addEventListener綁定的事件,須要用removeEventListener();來解綁。
        第一個參數:事件名
        第二個參數:解綁的函數名(若是是匿名函數,沒法解綁。通常使用有名函數傳參。)
        第三個參數:是否捕獲,默認值false。

點擊查看事件解綁效果!!! blog

如下是部分核心代碼:seo

<body>
    <div id="box"></div>
    <script>
        var box=document.getElementById("box");
        function  fn() {
            console.log("addEventListener-1");
        }
        //用on進行事件綁定
        box.onclick=function () {
            console.log("addEventListener-1");
        };
        //針對on的綁定而解綁,將不會打印出1。由於已經解綁了
        box.onclick=null;
        //用addEventListener,傳入的是有名函數 綁定。
        box.addEventListener("click",fn);
        //針對addEventListener,而且使用的是有名函數 的綁定而解綁
        box.removeEventListener("click",fn);
        //用addEventListener,傳入的是匿名函數 綁定。
        box.addEventListener("click",function () {
            console.log("addEventListener-2");
        });
        //針對addEventListener,而且使用的匿名函數 的綁定而解綁,解綁無效。
        //依舊打印addEventListener-2
        box.removeEventListener("click",function () {
            console.log("addEventListener-2");
        });
    </script>
</body>

3.事件流

事件流的三個階段:事件

(1)捕獲階段
            從 最外層元素 開始 向目標 進行查找的階段, 
                而且 同時執行 該階段中 全部 被查找的元素 的 捕獲階段綁定的事件
    (2)處於目標階段
            觸發 目標元素的 對應事件
    (3)冒泡階段
            從 目標元素 開始 逐漸往 外層 查找,
                而且 同時執行 該階段中 全部 被查找的元素 的 冒泡階段綁定的事件。

戳連接,點擊div查看效果!!! 圖片

如下是所有代碼:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #red{
            height: 400px;
            padding: 100px;
            background:red;
        }
        #blue{
            height: 200px;
            padding: 100px;
            background:blue;
        }
        #yellow{
            height: 100px;
            padding: 50px;
            background:yellow;
        }
    </style>
</head>
<body>
    <div id="red">
        <div id="blue">
            <div id="yellow"></div>
        </div>
    </div>
    <script>
        var red=document.getElementById("red");
        var blue=document.getElementById("blue");
        var yellow=document.getElementById("yellow");
        //用on綁定的事件是冒泡事件
        red.onclick=function () {
            console.log("red")
        };
        blue.onclick=function () {
            console.log("blue")
        };
        yellow.onclick=function () {
            console.log("yellow")
        };
        //用addEventListener綁定的 而且第三個參數是true 是捕獲事件
        red.addEventListener("click",function () {
            console.log("add-red-true")
        },true);
        blue.addEventListener("click",function () {
            console.log("add-blue-true")
        },true);
        yellow.addEventListener("click",function () {
            console.log("add-yellow-true")
        },true);
        //用addEventListener綁定的 而且第三個參數是false 是冒泡事件
        red.addEventListener("click",function () {
            console.log("add-red-false")
        },false);
        blue.addEventListener("click",function () {
            console.log("add-blue-false")
        },false);
        yellow.addEventListener("click",function () {
            console.log("add-yellow-false")
        },false);
    </script>
</body>
</html>

以上代碼點擊黃色的結果。

圖片描述

4.阻止冒泡

經過 on 進行綁定
        經過 event.cancelBubble = true;阻止冒泡
    經過 addEventListener進行綁定
        經過 event.stopPropagation();阻止冒泡

以上兩種其中一種,方式均可以阻止不一樣綁定方式的冒泡。

如下代碼能夠粘貼運行看看效果。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #red{
            height: 200px;
            padding:100px;
            background: red;
        }
        #green{
            height: 150px;
            background: green;
        }
    </style>
</head>
<body>
    <div id="red">
        <div id="green"></div>
    </div>
    <script>
        var red=document.getElementById("red");
        var green=document.getElementById("green");
        document.onclick=function () {
            console.log("document");
        };
        red.onclick=function () {
            console.log("red");
            //event.cancelBubble=true;
        };
        green.onclick=function () {
            console.log("green");
           //event.cancelBubble=true;
        }
//-------------------------------------------------
        document.addEventListener("click",function () {
            console.log("addEventListener-document");
        });
        red.addEventListener("click",function () {
            console.log("addEventListener-red");
           //event.stopPropagation();
        });
        green.addEventListener("click",function () {
            console.log("addEventListener-green");
            event.stopPropagation();
        })
    </script>
</body>
</html>

5.瀏覽器的默認行爲

瀏覽器默認行爲

瀏覽器默認爲咱們提供的功能
    好比頁面跳轉,右鍵菜單,文字拖動,圖片拖動

阻止默認行爲

有兩種方式
        (1)return false;
        (2)event.preventDefault();
<body>
    <div id="box">你好你好啊你好
        <a id="a" href="http://www.baidu.com">百度</a>
    </div>

    <script>
        var box=document.getElementById("box");
        var a=document.getElementById("a");
        a.onclick=function () {
            //return false;//方法一
            event.preventDefault();//方法二
        }
    </script>
</body>

注意事項:

通常儘量使用event.preventDefault阻止默認樣式。由於return false;方法在jQuery中,此方法不只會阻止默認行爲,還會阻止冒泡。至關於同時調用了preventDefault和stopPropagation方法。

6.模擬上下文菜單

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
    #menu {
        width: 100px;
        background-color: cornflowerblue;
        color: #fff;
        padding: 20px;
        display: none;
        position: absolute;
        left: 0;
        top: 0;
        margin: 0;
    }
</style>
</head>
<body>
<ul id="menu">
    <li>複製</li>
    <li>粘貼</li>
    <li>剪切</li>
    <li>另存</li>
</ul>
<script>
    var menu = document.getElementById("menu");
    document.oncontextmenu = function(){
        menu.style.display = "block";
        menu.style.left = event.clientX + "px";
        menu.style.top = event.clientY + "px";
        event.preventDefault();
    }
    document.onclick = function(){
        menu.style.display = "none";
    }
</script>
</body>
</html>
相關文章
相關標籤/搜索