美文网首页
js事件捕获

js事件捕获

作者: Dxes | 来源:发表于2019-12-10 20:41 被阅读0次
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <div id="div1" style="background-color: red; width: 400px; height: 400px; margin: auto;">
            <div id="div2" style="background-color: green; width: 250px; height: 250px; margin: auto;">
                <div id="div3" style="background-color: yellow; width: 100px; height: 100px; margin: auto;">    
                </div>
            </div>
        </div>
        
        <script type="text/javascript">
            //事件传递: 发生在子标签上的事件会传递给父标签。 
            //事件传递问题:如果父子标签都对同一个事件进行绑定,那么子标签触发事件的时候父标签也会做出反应
            //解决事件传递问题: 捕获事件
    
            document.getElementById('div1').onclick = function(){
                alert('红色div被点击')
            }
            
            document.getElementById('div2').onclick = function(evt){
                alert('绿色div被点击')
                
                evt.stopPropagation()
            }
            
            document.getElementById('div3').onclick = function(evt){
                alert('黄色div被点击')
                
                //鼠标事件对象属性:
                //clientX和clientY  -  点击点到浏览器左边和顶部的距离
                //offsetX和offsetY  -  点击点到标签左边和顶部的距离
                console.log(evt)
                console.log(evt.offsetX, evt.offsetY)
                
                //捕获事件(阻止事件传递到父标签)
                evt.stopPropagation()
                
                
            }
        </script>
        
        <input type="" name="input1" id="input1" value="" />
        <script type="text/javascript">
            document.getElementById('input1').onkeydown = function(evt){
                
                //键盘事件对象属性: key  - 键值
                console.log(evt)
                console.log(evt.key)
//              console.log(arguments)
            }
        </script>
        
        
        
        
        
        
    </body>
</html>

相关文章

  • vue 阻止事件冒泡,捕获方法

    要想了解 VUE 阻止事件冒泡和捕获方法,首先要了解一下 JS 事件和 JS 阻止事件冒泡,捕获方法 1. js ...

  • 事件基础(2)

    js事件的三个阶段:捕获,目标,冒泡 IE:IE事件流是事件冒泡流 Netscape事件流是事件捕获流 IE事件...

  • JS事件相关基础

    js事件: 键盘事件: JS中的事件冒泡和事件捕获: 1、事件冒泡。如下代码: 点击button事件,连同父元素绑...

  • js捕获事件

    0级事件处理 用的最多的就是onload了 结束function 终止事件 提醒一下function name()...

  • js事件捕获

  • JS事件冒泡和事件捕获

    css部分 JS部分 默认 false , false 是冒泡, true 是事件捕获 事件捕获 假设在box3...

  • js 阻止冒泡 阻止默认事件

    js冒泡和捕获是事件的两种行为,使用event.stopPropagation()起到阻止捕获和冒泡阶段中当前事件...

  • 默认事件

    js冒泡和捕获是事件的两种行为,使用event.stopPropagation()起到阻止捕获和冒泡阶段中当前事件...

  • 图解事件委托

    事件捕获和事件冒泡 说到事件委托我们就不得不提JS中事件的整个历程中的两个机制:事件捕获和事件冒泡。 然而要说这事...

  • Javascript 事件代理、冒泡和捕获

    2019开工荒了两天,赶紧开始! 为什么写事件代理、冒泡、捕获,首先冒泡和捕获是js事件的核心基础,事件代理原理来...

网友评论

      本文标题:js事件捕获

      本文链接:https://www.haomeiwen.com/subject/tkqngctx.html