js点击事件

触发事件

.onclick 相当于给对象添加了一个属性
属性值 是一个函数 一点击就会触发
.onmouseover 鼠标移到某元素之上
.onmouseout 鼠标从某元素移开
.onmousedown 鼠标按钮被按下
.onmouseup鼠标按钮抬起的时候触发
let div = document.querySelector('div');
div.onclick = function (){
    alert('你好')
   } 

function getScroll(){
//获取滚动条距离顶部的高度
  console.log( document.documentElement.scrollTop );
  }
  
  document.onscroll=function(){
  //滚动条 滚动事件
   console.log( document.documentElement.scrollTop );
  }

属性

offsetParent 自己相对于谁（父元素）偏移
offsetParent 如果子元素的父元素是已经定位（relative,absolute,fixed）的元素,
那么他的offsetParent就是已经定位的父元素
如果不是已经定位的元素，那么他的offsetParent就是body

<div class="div1"><div/>
let divDom = document.querySelector('div')
console.log( window.getComputedStyle(divDom,null).width )
console.log( divDom.offsetWidth );
console.log(divDom.offsetLeft);
在正常文档流下 offsetLeft（13） = body的margin-left（8） + divDom的margin-left（5）
脱离文档流的情况下 offsetLeft（25） = divDom的left（20） + divDom的margin-left（5）
在正常文档流下 offsetTop（8） = body的margin-top（8）
脱离文档流的情况下 offsetTop（15） = divDom的top（10） + divDom的margin-left（5）

添加变量

<div>我是div1</div>
let div = document.querySelector('div')
div.className = 'bg c'
div.onclick = function(){
    //代码
 }

setAttribute()方法

• 增加一个指定名称和治的新属性，或者把一个现有属性设定为指定的值 element[Node].setAttribute(name,value)

1. name：要设置的属性名
2. value:要设置的属性值

• 注意：把指定的属性设置为指定的值。如果不存在具有指定名称的属性，该方法将创建一个新属性，

<div>123</div>
<script>                                         
let div = document.getElementsByTagName('div')[0]; 
div.setAttribute('onclick','fn()')                
               function fn(){                                   
               console.log(1)                                 
               }                                                  
</script>