JavaScript表单事件,捕获冒泡

116 阅读1分钟

表单事件

 <script>
    let user=document.getElementById('user')
    /* onfocus 获取焦点*/
    user.onfocus=function(){
        user.style.background='yellow'
    }

    /* onblur 失去焦点 */
    user.onblur=function(){
        user.style.background=''
    }

    let car =document.getElementById('car')
    /* onchange 用户改变域的内容 */
    function changefn(){
        /* value值是后台所需要的值如果想传给后台请把value属性上写上你需要传的值 */
    }

    let restid =document.getElementById('restid')
    /* onreset */
    /* 表单重置事件不支持input标签,支持form标签 */
    let formid=document.getElementById('formid')
    formid.onreset=function(){
        console.log('重置');
    }

    /* onsubmit */
    /* 表单提交事件不支持input标签,支持form标签 */
</script>


捕获和冒泡

   <body>
        <div class="div1">
            <div class="div2">
            </div>
        </div>
      <script>
            /* 点击子元素,把父元素的事件也调用了 事件冒泡 */
            let div1=document.querySelector('.div1')
            let div2=document.querySelector('.div2')

            div1.onclick=function(){
                alert(1)
            }
            div2.onclick=function(e){
                /* event是一个js的关键字这个关键字变量保存了事件源对象的属性 */
                /* 阻止事件冒泡的方法 */
                /*event.stopPropagation() */
                /* 取消冒泡属性 */
                /*event.cancelBubble=true */

                /* 兼容写法,让IE和谷歌都兼容 */
                let eObj=e || event
                eObj.cancelBubble=true
                /* 事件源对象 */
                console.log(e);
                /* 阻止事件冒泡的方法 */
                /* e.stopPropagation() */
                /* 取消冒泡属性 */
                /* e.cancelBubble=true */
                alert(2)
            }

            /* false就表示冒泡(从里到外触发事件) */
            /* true就表示捕获  (从外到里触发事件) */
            /* div1.addEventListener('click',function(){
                alert(1)
            },false)
            div2.addEventListener('click',function(){
                alert(2)
            },false) */
        </script>
    </body>