2021-06-22 day11

1.offset系列

1. offsetWidth 占位宽 元素的宽度（包括border 和padding）
2. offsetHeight 占位高 元素的高度（包括border 和padding）
3. clientWidth 可视宽度 （不包括border）
4. clientHeight 可视高度
5. offsetLeft : 获取距离具有定位的父级元素的left值。没有具有定位的父级就按照浏览器窗口为基准
6. offsetTop : 获取距离具有定位的父级元素的top值

2.什么是事件&事件对象的获取

• 什么是事件：onclick onmouseover onmouseout onresize onscroll onload（事件类型）

oDiv.onXxx = function(){}

• 事件的组成：

1. 事件源: 触发的元素（点击的元素）
2. 事件类型 触发事件的类型（click mouseover）
3. 事件处理函数 触发完毕后要执行的代码

	var oDiv = document.querySelector('div');
	oDiv.onmouseover = function () {
       	this.style.backgroundColor = 'yellow'
  }

1. 事件源：oDiv
2. 事件类型：mouseover
3. 事件处理函数:function(){ } 注意：事件处理函数中有一个this，他代表事件源
4. 移入oDiv上面会发生什么事情

3.event对象获取坐标的方法

• 事件对象

1. 事件对象的概念：事件触发时，记录了一系列与该事件相关的信息
2. 事件对象的获取：非常简单 ，就在事件处理函数的形参位置的第一个参数位置，写e（是事件对象），是浏览器传递过来
3. 相关信息：鼠标点击的坐标位置（clientX，clientY） 事件的类型（type） 事件源（target）

---

获取坐标

1. 相对于元素本身 offsetX和offsetY
2. 相对于相对浏览器窗口 clientX和clientY
3. 相对页面 pageX和pageY
4. clientX和pageX的关系和区别：
5. 如果没有滚动条，clientX=pageX
6. 如果出现水平滚动条：pageX>clientX (页面自己设置的太宽了)

4.常见的鼠标事件类型

1. click(单击事件)
2. dbclick(双击事件)
3. oncontextmenu(右击事件)
4. onmouseover(鼠标移入)
5. onmouseout(鼠标移出)
6. onmouseenter(鼠标移入)
7. onmouseleave(鼠标移出)
8. onmousedown(鼠标按下)
9. onmousemove(鼠标移动)
10. onmouseup(鼠标抬起)

5.常见的键盘事件

键盘事件：onkeydown（鼠标按下） ， onkeypress（鼠标按下并抬起）， onkeyup（鼠标抬起）

<ul>
    <li>第1个li</li>
</ul>
	var oIpt = document.querySelector('#oipt');
    var oUl = document.querySelector('ul')
    oIpt.onkeyup = function(e){
      // window.event:IE低版本支持的写法
      var ev = e || window.event;//保证我们兼容不同的浏览器
      // 兼容firfox低版本的浏览器e.which
      var key = ev.keyCode || ev.which; //保证我们兼容不同的浏览器
    }

如何实现组合键盘

1. altKey：按住其他键的同时按住alt 按住了alt键，会返回true
2. ctrlKey：按住其他键的同时按住ctrl
3. shiftKey：按住其他键的同时按住shift

	// 按住了回车和alt
	if (key==13&&ev.shiftKey) {
	    var oLi = document.createElement('li');
	    oLi.innerHTML = '我是新增的'
	    oUl.appendChild(oLi)
	}

6.常见的表单对象

1. onfocus： 光标获得焦点

		oIpt.onfocus = function(){
			this.style.backgroundColor = 'green'
			this.style.color = '#fff'
			oSpan.innerHTML = '已经获得焦点，请输入....'
			oSpan.style.color= 'red'
		}

2. onblur 失去焦点

	oIpt.onblur = function(){
	   this.style.backgroundColor = ''
	   this.style.color = '#000'
	   oSpan.innerHTML = '输入完成，内容无误...'
	   oSpan.style.color= 'green'
	}

3. oninput 输入一次触发一次

		oIpt.oninput = function(){
           console.log(1);
        }

4. onchange 内容发生改变时触发 不会立即触发，而是等到失去焦点时，检测内容相比原始值变化了触发

	oIpt.onchange = function(){
        console.log(1);
     }

7.事件绑定的方式

给元素绑定事件的方式：（type：click）

1. DOM0级事件绑定方式 元素.on+type = function(){}

• 缺点：不能给同一个元素的同一个事件进行多次绑定
• 优点：兼容好

2. DOM2级事件绑定方式 事件监听法 元素.addEventListener(type,fn,false); false代表冒泡。true捕获。第三个参数可以省去 （type前面没有on）

• 优点：可以给同一个元素的同一个事件进行多次绑定
• 缺点：兼容性不好，不支持IE低版本浏览器
• IE低版本处理方式： 元素.attachEvent(on+type,fn)

全选与取消全选

	var oCheck_all=document.querySelector("#check_all");
    var oCheck=document.getElementsByName("check");
    // 1. 点击全选按钮。下面所有的元素被选中
    oCheck_all.onclick=function(){
        for(var i=0;i<oCheck.length;i++){
        // 将全选的状态赋值给每一个input框状态
            oCheck[i].checked=this.checked;
        }
    }
        // 2. 点击下面所有的元素，上面自动全选
        for(var i=0;i<oCheck.length;i++){
            oCheck[i].onclick=function(){
                // 假设所有的input都被选中
                var flag=true;
                for(var j=0;j<oCheck.length;j++){
                    if(oCheck[j].checked==false){
                        flag=false;
                        break;
                    }
                }
                // 如果都是true。就让上面的input选中
                   oCheck_all.checked=flag;
        }
        }