javascript 事件流 捕獲與冒泡

時間  2019-12-05
標籤 javascript 事件 捕獲 冒泡 欄目 JavaScript 简体版
原文   原文鏈接

事件一般與函數配合使用，這樣就能夠經過發生的事件來驅動函數執行，事件是能夠被 JavaScript 偵測到的行爲瀏覽器

綁定事件

首先咱們要先綁定事件 綁定事件有三種函數

1）在DOM元素中直接綁定，咱們能夠在DOM元素上綁定onclick、onmouseover、onmouseout、onmousedown、onmouseup、ondblclick、onkeydown、onkeypress、onkeyup等等

只能夠執行一次 屢次使用會跟隨文檔流所覆蓋
   <div id="box1"></div>
     <script>
       var box1=document.getElementById("box1");
        box1.onclick=function(){
            alert("你瞅啥")
        }
        box1.onclick=function(){
            alert("瞅你咋地")
        }
       </script>
     只彈出一個 瞅你咋地 你瞅啥被覆蓋

2）在JavaScript代碼中綁定，在JavaScript代碼中（即 script 標籤內）綁定事件可使JavaScript代碼與HTML標籤分離，文檔結構清晰，便於管理和開發spa

<div id="box1"></div>
<script>
  var box1=document.getElementById("box1");
box1.onclick = function () {
            alert("不服就幹");
        }
        </script>

3）使用事件監聽綁定事件
綁定事件的另外一種方法是用 addEventListener() 或 attachEvent() 來綁定事件監聽函數code

<div id="box1"></div>
   <script>
  var box1=document.getElementById("box1");
  box1.addEventListener("click",function(){
            alert("再瞅個試試")
        },false)
        //默認值爲false 能夠省略不寫

        box1.addEventListener("click",function(){
            alert("試試就試試")
        }) //默認值爲false 能夠省略不寫
        </script>
        兩個均可以正常彈出 跟隨文檔流執行

事件流過程

冒泡 捕獲

DOM標準規定事件流包括三個階段：事件捕獲階段、處於目標階段和事件冒泡階段。
捕獲型事件流：事件的傳播是從最不特定的事件目標到最特定的事件目標。即從外部到內部。
冒泡型事件流：事件的傳播是從最特定的事件目標到最不特定的事件目標。即從內部到外部![圖片描述對象

咱們有如下代碼 點擊box3的時候 跟隨圖片描述 捕獲 冒泡
<body>
    <div id="box1">box1
        <div id="box2">box2
            <div id="box3">box3</div>
        </div>
    </div>
</body>
<script>
    var box1=document.getElementById("box1");
    var box2=document.getElementById("box2");
    var box3=document.getElementById("box3");
    box1.addEventListener("click", function () {
        console.log("捕獲box1")
    }, true)
    box2.addEventListener("click", function () {
        console.log("捕獲box2")
    }, true)
    box3.addEventListener("click", function () {
        console.log("捕獲box3")
    }, true)

    box1.addEventListener("click", function () {
        console.log("冒泡box1")
    }, false)
    box3.addEventListener("click", function () {
        console.log("冒泡box3")
    }, false)
    box2.addEventListener("click", function () {
        console.log("冒泡box2")
    }, false)

</script>

在處於目標階段的時候 就是在本文中點擊box3的時候 若是把冒泡寫在捕獲前面 會跟隨文檔流所執行 致使先冒泡 再捕獲 這一點必定要注意 如如下
圖片描述圖片描述
如同圖中所示 輸出時順序和你寫入時順序有關seo

事件委託

什麼是事件委託：
事件委託——給父元素綁定事件，用來監聽子元素的冒泡事件，並找到是哪一個子元素的事件
事件委託三部曲：
第一步：給父元素綁定事件
給元素ul添加綁定事件，經過addEventListener爲點擊事件click添加綁定
第二步：監聽子元素的冒泡事件
這裏默認是冒泡，點擊子元素li會向上冒泡
第三步：找到是哪一個子元素的事件
經過匿名回調函數來接收事件對象，經過alert驗證事件

<div>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
            <li>8</li>
            <li>9</li>
            <li>10</li>
        </ul>
    </div>
    <script>
        var show=document.getElementsByTagName("ul")[0];
        show.addEventListener("click",function(){
            alert("hello")
        },false)
    </script>

圖片描述 如圖所示圖片

阻止事件

  • 阻止冒泡

咱們在上文寫了冒泡事件 既然它能冒泡 若是咱們不想用這個效果了 那麼咱們有辦法阻止它嗎？答案是確定的。咱們直接看代碼，可以更加明瞭ip

<body>
    <div id="box1">
        <div id="box2"></div>
    </div>
</body>
<script>
    var box1 = document.getElementById("box1");
    var box2 = document.getElementById("box2");
    box1.addEventListener("click", function () {
        alert("我是第box1")
    })
    box2.addEventListener("click", clickStop)
    //設置函數 阻止box2冒泡事件 當點擊第二次時 阻止冒泡事件
    var num = 0;
    function clickStop() {
        if (num >= 1) {
            box2.addEventListener(clickStop)
        } else {
            alert("我是box2");
            num++;
        }
    }
</script>

第一次點擊
圖片描述圖片描述
當咱們第二次點擊的時候 只會彈出一個box1 ，阻止了box2的第二次冒泡
圖片描述開發

  • 阻止默認事件

在咱們網頁中 若是咱們點擊右鍵是否是會彈出一個框，這裏我不會截圖 就不給你們展現了，裏面會有刷新、粘貼、複製、剪切等等按鈕 這個就是瀏覽器的右鍵默認事件，咱們來嘗試下看能不能把它給阻止了。

<script>
        var box = document.getElementsByClassName("box")[0];
        window.oncontextmenu = function (event) {
            //關閉右鍵瀏覽器默認樣式
            event.preventDefault();
        }
    </script>

有興趣的話咱們還能夠把它變成本身的

<style>

{
        margin: 0;
        padding: 0;
    }
    .box {
        width: 100px;
        display: none;
        position: relative;
    }
    ul {
        list-style: none;
        border: 1px solid rgb(85, 74, 74);
    }
    ul li {
        line-height: 30px;
    }
    .box ul li:hover {
        background: rgb(224, 208, 208);
    }
</style

<div class="box">

<ul>
        <li>從新加載</li>
        <li>返回上一頁</li>
        <li>另存爲</li>
        <li>翻成中文</li>
        <li>投射頁面</li>
    </ul>
</div>
<script>
    var box = document.getElementsByClassName("box")[0];
    window.oncontextmenu = function (event) {
        //關閉右鍵瀏覽器默認樣式
        event.preventDefault();
        //設置本身的樣式
        var x = event.clientX;
        var y = event.clientY;
        box.style.left = x + "px";
        box.style.top = y + "px";
        box.style.display = "block";
    }
    window.onclick = function () {
        box.style.display = "none"
    }
</script>

在頁面中點擊右鍵就變成了下面這個效果
圖片描述

鼠標事件

DOM3級事件中定義了9個鼠標事件。
click：點擊觸發 鼠標左鍵或者回車鍵
mousedown:鼠標按鈕被按下時觸發。不能經過鍵盤觸發。
mouseup:鼠標按鈕彈起時觸發，一樣不能被鍵盤觸發
dblclick:雙擊鼠標左鍵時觸發。
mouseover:鼠標移入目標範圍中。鼠標移到其後代元素上時會觸發。
mouseout:鼠標移出目標元素上方。
mouseenter:鼠標移入元素範圍內觸發，該事件不冒泡，即鼠標移到其後代元素上時不會觸發。
mouseleave:鼠標移出元素範圍時觸發，該事件不冒泡，即鼠標移到其後代元素時不會觸發。
mousemove:鼠標在元素內部移到時不斷觸發。

下面給你們列舉幾個

<div id="box"></div>
    <script>
    var box=document.getElementById("box");
    //鼠標點擊事件
    box.onclick=function(){
        alert("hello")
    }
    </script>

mouseup:鼠標按鈕彈起時觸發，一樣不能被鍵盤觸發

<style>
    #box{
        width: 200px;
        height: 200px;
        background: gray;
        margin: 100px auto;
    }
    </style>
</head>
<body>
    <div id="box"></div>
    <script>
    var box=document.getElementById("box");
    //  鼠標擡起時觸發
    box.onmouseup=function(){
        alert("鼠標擡起")
    }
    </script>

mouseover:鼠標移入目標範圍中。鼠標移到其後代元素上時會觸發
//當鼠標進入box區域彈出顯示框

box.onmouseover=function(){
        alert("我進來了")
    }
mousemove:鼠標在元素內部移到時不斷觸發。
box.onmousemove=function(){
        console.log("自由的行走")
    }
    會不斷的被觸發，移動一次觸發一次![圖片描述][9]

鍵盤事件

  1. keydown():

    按鍵按下時，會觸發該事件；

<body>

<input type="text" id="btn">
<script>
   //onkeyup 鼠標擡起 觸發
var btn=document.getElementById("btn");
btn.onkeydown=function(){
//     console.log(222);
}
</script>
2. keyup();

    按鍵鬆開時，會觸發該事件；

<body>

<input type="text" id="btn">
<script>
   //onkeyup 鼠標擡起 觸發
var btn=document.getElementById("btn");
btn.onkeyup=function(event){
     console.log(111);
}
</script>
3. keypress();

    敲擊按鍵時觸發，和keyup()大體相同 我找了不少資料 卻仍是沒有明確的區別 但願有大佬指點下
<body>
<input type="text" id="btn">
<script>
   //onkeyup 鼠標擡起 觸發
var btn=document.getElementById("btn");
btn.onkeypress=function(event){
     console.log(111);
}
</script>

HTML事件

1.onload 文檔加載完成後執行函數

<script>
 window.onload = function (event) {
            console.log(event)
        }
   </script>

2.select 被選中的時候使用 個人理解是在input中 選中的時候

<input type="text" id="one">
    <script>
        var one = document.getElementById("one");
         one.onselect=function(){
        console.log("你瞅啥")// 在文本框中輸入文本 選中時顯示
    }
    </script>

3.onchange 當內容失去焦點的時候或者改變的時候觸發

<input type="text" id="one">
    <script>
        var one = document.getElementById("one");
         one.onchange=function(){
        console.log("hello") //當把焦點從文本框中挪移出 好比回車或者點擊空白區域
    }
    </script>
  1. focus 獲得光標的時候使用
<input type="text" id="one">
    <script>
        var one = document.getElementById("one");
          one.onfocus=function(){
        console.log("hello") //把鼠標點擊到文本框中控制檯輸出
    }
    </script>

5.resize 窗口變化時

<input type="text" id="one">
<script>
    window.onresize=function(){
     console.log("變化了") //變化窗口大小 控制檯輸出
}
</script>

以上就是我對js事件的理解，首先謝謝您的觀看，文中若是有些不周到的地方還請指點一下，碼字不易，請各位多多支持。

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程