12.30

                     冒泡和捕获

/* 点击子元素 把父元素的事件也调用了 事件冒泡 / let div1 = document.querySelector('.div1') let div2 = document.querySelector('.div2') div1.onclick = function(){ alert(1) } div2.onclick = function(e){ / 兼容写法 让谷歌和ie都支持 */ let eObj = e || event; // eObj.stopPropagation() eObj.cancelBubble = true;

        /* event是一个js的关键字 这个关键字变量保存了事件源对象的属性*/
        // console.log(event);
        // event.stopPropagation()
        // event.cancelBubble = true;

        /* 事件源对象 */
        // console.log(e);
        /* 阻止事件冒泡的方法 */
        // e.stopPropagation();
        /* 取消冒泡属性 */
        // e.cancelBubble = true;
        alert(2)
    }
    /* false表示冒泡（从里到外触发事件） */
    /* true表示捕获 （从外到里触发事件） */
    // div1.addEventListener('click',function (){
    //     alert(1)
    // },true)
    // div2.addEventListener('click',function (){
    //     alert(2)
    // },true)
    
    
                      表单事件
                       /* 写一个表单 有密码框 */
    /* 输入框 获得焦点的时候 框内的文字颜色变红 */
    /* 输入框 失去焦点的时候 框内的文字颜色变黑 */
    /* 选择框 选择 男女 默认男 */
    /* 修改的时候触发 alert出你选的性别 */
    /* 提交 alert 我提交了 reset alert 我重置了 */

    let user = document.getElementById('user');
    let car = document.getElementById('car');
    let resetId = document.getElementById('resetId');
    let formId = document.getElementById('formId');
    let submitId = document.getElementById('submitId');

    let nan = document.getElementById('nan');
    let nv = document.getElementById('nv');
    function radioFn (val){
        alert(val)
    }



    /* onsubmit 表单提交事件不支持input标签，支持form标签*/
    formId.onsubmit = function (){
        alert('我提交了')
    }

    /* onreset 表单重置事件不支持input标签，支持form标签*/
    // resetId.onreset = function (){
    //     console.log('重置')
    // }
    /* onreset 使用这个事件 除了默认的可以清除表单外
    还可以做一些 清除表单之后的事情 ，比如把输入的背景色改回来  */
    // formId.onreset = function (){
    //     console.log('重置')
    //     user.style.background = ''
    // }





    /* onchange	 用户改变域的内容 */
    function changeFn (){
        alert(car.value)
        // alert(car.childNodes[1].innerHTML)
        /* value值是后台所需要的值 如果想传给后台 请把value属性上 写上你需要传的值 */
    }






    /* onfocus 获取焦点 */
    user.onfocus = function (){
        // user.style.background = 'yellow'
        user.style.color = 'red'
    }
    /* onblur 元素失去焦点 */
    function blurFn(){
        // user.style.background = 'red'
        user.style.color = ''
    } /* 写一个表单 有密码框 */
    /* 输入框 获得焦点的时候 框内的文字颜色变红 */
    /* 输入框 失去焦点的时候 框内的文字颜色变黑 */
    /* 选择框 选择 男女 默认男 */
    /* 修改的时候触发 alert出你选的性别 */
    /* 提交 alert 我提交了 reset alert 我重置了 */

    let user = document.getElementById('user');
    let car = document.getElementById('car');
    let resetId = document.getElementById('resetId');
    let formId = document.getElementById('formId');
    let submitId = document.getElementById('submitId');

    let nan = document.getElementById('nan');
    let nv = document.getElementById('nv');
    function radioFn (val){
        alert(val)
    }



    /* onsubmit 表单提交事件不支持input标签，支持form标签*/
    formId.onsubmit = function (){
        alert('我提交了')
    }

    /* onreset 表单重置事件不支持input标签，支持form标签*/
    // resetId.onreset = function (){
    //     console.log('重置')
    // }
    /* onreset 使用这个事件 除了默认的可以清除表单外
    还可以做一些 清除表单之后的事情 ，比如把输入的背景色改回来  */
    // formId.onreset = function (){
    //     console.log('重置')
    //     user.style.background = ''
    // }





    /* onchange	 用户改变域的内容 */
    function changeFn (){
        alert(car.value)
        // alert(car.childNodes[1].innerHTML)
        /* value值是后台所需要的值 如果想传给后台 请把value属性上 写上你需要传的值 */
    }






    /* onfocus 获取焦点 */
    user.onfocus = function (){
        // user.style.background = 'yellow'
        user.style.color = 'red'
    }
    /* onblur 元素失去焦点 */
    function blurFn(){
        // user.style.background = 'red'
        user.style.color = ''
    }