事件

FlingPig
187 阅读2分钟

1.事件是什么？

事件就是可以被JS监测到的行为

2.主要事件

onclick         鼠标单击使事件     onselecet       文本框内容改变事件
onfocus         光标聚集           onblur          光标离开
onload          网页导入           onunload        关闭网页
onmouseover     鼠标经过事件       onchange        文本内容改变事件
onmouseout      鼠标移开事件

3.事件冒泡

什么是事件冒泡

当HTML层的元素叠加且每个元素有一个事件，即在水平视角垂直往下看时，多个事件叠加，当在这个水平区域内触发，即可连续触发此区域内多个事件，此叫做事件流，可通俗简练官方的说：面接受事件的顺序IE标准下叫做事件冒泡

IE提出的事件流叫做事件冒泡，即事件开始时由最具体的元素接收，然后逐级向上传播到较为不具体的节点，看一下以下示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body onclick="bodyClick()">

    <div onclick="divClick()">
        <button onclick="btn()">
            <p onclick="p()">点击冒泡</p>
        </button>
    </div>
    <script>
       
       function p(){
          console.log('p标签被点击')
       }
        function btn(){
            console.log("button被点击")
        }
         function divClick(event){
             console.log('div被点击');
         }
        function bodyClick(){
            console.log('body被点击')
        }

    </script>

</body>
</html>

当点击p元素时，依次触发顺序为：p>button>div>body; 正如上面我们所说的，它会从一个最具体的的元素接收，然后逐级向上传播， p=>button=>div=>body事件冒泡可以形象地比喻为把一颗石头投入水中，泡泡会一直从水底冒出水面。

4.事件捕获

网景公司提出的事件流叫事件捕获流。

      事件捕获流的思想是不太具体的DOM节点应该更早接收到事件，而最具体的节点应该最后接收到事件，针对上面同样的例子，点击按钮，那么此时click事件会按照这样传播：（下面我们就借用addEventListener的第三个参数来模拟事件捕获流）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div>
    <button>
        <p>点击捕获</p>
    </button>
</div>
<script>
    var oP=document.querySelector('p');
    var oB=document.querySelector('button');
    var oD=document.querySelector('div');
    var oBody=document.querySelector('body');

    oP.addEventListener('click',function(){
        console.log('p标签被点击')
    },true);

    oB.addEventListener('click',function(){
        console.log("button被点击")
    },true);

    oD.addEventListener('click',  function(){
        console.log('div被点击')
    },true);

    oBody.addEventListener('click',function(){
        console.log('body被点击')
    },true);

</script>



</body>
</html>

即打印结果为：body>div>button>p 即与冒泡相反

avatar
文章
阅读
粉丝