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教程