事件

offsetLeft不可以设置

     aa.offsetLeft = 90;
    console.log(aa.offsetLeft);
    

没有清除内外边距的情况

在标准文档流下

      aa.offsetLeft（18）= aa.marginLeft(10) + body.marginLeft(8) 
      

清除内外边距后

     aa.offsetLeft（10）= aa.marginLeft(10)
     

清除内外边距后 外层div 设置了margin

     aa.offsetLeft（15）= aa.marginLeft(10) + div.marginLeft(5)
     

offsetLeft返回的是数字类型 number类型

脱离文档流下

 aa.offsetLeft（30） = aa.marginLeft(10) + aa的left值（20） 

console.log( aa.offsetLeft );

 

脱离文档流下 aa的left（20） = aa的left（20） 不包括 aa.marginLeft的值,在标准文档流下 aa的left的值是auto

aa.style.left 返回的是字符串 并且带有px单位

     console.log( aa.style.left );
     console.log(aa);
     console.log( window.getComputedStyle(aa,null).left );
     

aa.style.left/top是可读可写的 但是 offsetLeft只可以读取

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 = ''
    }
    

点击子元素 把父元素的事件也调用了 事件冒泡

    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)
       let btn = document.querySelector('button');
     点击一下 分别alert出 1 2 3 
     btn.onclick = function () {
         alert(1)
     }
     btn.onclick = function () {
         alert(2)
     }
     

这样设置会被覆盖 只保留最后一个

     btn.onclick = function () {
         alert(3)
     }
     

监听onclick事件 和onclick的区别 区别一 写的方法不会被覆盖 区别二 false表示冒泡（从里到外触发事件） true表示捕获 （从外到里触发事件）

     window.addEventListener('click',function(){
         alert(1)
     })
     window.addEventListener('click',function(){
         alert(2)
     })
     window.addEventListener('click',function(){
         alert(3)
     })
      let h1 = document.querySelector('h1');
     鼠标双击 
     h1.ondblclick = function(){
         alert('我双击了')
     }
     h1.addEventListener('dblclick',function(){
         alert('我双击了')
     })
     

鼠标在指定的区域内移动事件

     h1.onmousemove = function (){
         console.log('我移动了');
     }
     h1.addEventListener('mousemove',function(){
         console.log('我移动了');
     })
     

div1.onclick = function(){

\ 转义符 " 把" 当作一个字符串

        div1.innerHTML = "<h1 style=\"color:red;\">我是div</h1>"
         div1.innerHTML = "<h1 style='color:red;'>我是div</h1>"