1.offset系列
- offsetWidth 占位宽 元素的宽度(包括border 和padding)
- offsetHeight 占位高 元素的高度(包括border 和padding)
- clientWidth 可视宽度 (不包括border)
- clientHeight 可视高度
- offsetLeft : 获取距离具有定位的父级元素的left值。没有具有定位的父级就按照浏览器窗口为基准
- offsetTop : 获取距离具有定位的父级元素的top值
2.什么是事件&事件对象的获取
- 什么是事件:onclick onmouseover onmouseout onresize onscroll onload(事件类型)
oDiv.onXxx = function(){}
- 事件的组成:
- 事件源: 触发的元素(点击的元素)
- 事件类型 触发事件的类型(click mouseover)
- 事件处理函数 触发完毕后要执行的代码
var oDiv = document.querySelector('div');
oDiv.onmouseover = function () {
this.style.backgroundColor = 'yellow'
}
- 事件源:oDiv
- 事件类型:mouseover
- 事件处理函数:function(){ } 注意:事件处理函数中有一个this,他代表事件源
- 移入oDiv上面会发生什么事情
3.event对象获取坐标的方法
- 事件对象
- 事件对象的概念:事件触发时,记录了一系列与该事件相关的信息
- 事件对象的获取:非常简单 ,就在事件处理函数的形参位置的第一个参数位置,写e(是事件对象),是浏览器传递过来
- 相关信息:鼠标点击的坐标位置(clientX,clientY) 事件的类型(type) 事件源(target)
获取坐标
- 相对于元素本身 offsetX和offsetY
- 相对于相对浏览器窗口 clientX和clientY
- 相对页面 pageX和pageY
- clientX和pageX的关系和区别:
- 如果没有滚动条,clientX=pageX
- 如果出现水平滚动条:pageX>clientX (页面自己设置的太宽了)
4.常见的鼠标事件类型
- click(单击事件)
- dbclick(双击事件)
- oncontextmenu(右击事件)
- onmouseover(鼠标移入)
- onmouseout(鼠标移出)
- onmouseenter(鼠标移入)
- onmouseleave(鼠标移出)
- onmousedown(鼠标按下)
- onmousemove(鼠标移动)
- 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; //保证我们兼容不同的浏览器
}
如何实现组合键盘
- altKey:按住其他键的同时按住alt 按住了alt键,会返回true
- ctrlKey:按住其他键的同时按住ctrl
- shiftKey:按住其他键的同时按住shift
// 按住了回车和alt
if (key==13&&ev.shiftKey) {
var oLi = document.createElement('li');
oLi.innerHTML = '我是新增的'
oUl.appendChild(oLi)
}
6.常见的表单对象
- onfocus: 光标获得焦点
oIpt.onfocus = function(){
this.style.backgroundColor = 'green'
this.style.color = '#fff'
oSpan.innerHTML = '已经获得焦点,请输入....'
oSpan.style.color= 'red'
}
- onblur 失去焦点
oIpt.onblur = function(){
this.style.backgroundColor = ''
this.style.color = '#000'
oSpan.innerHTML = '输入完成,内容无误...'
oSpan.style.color= 'green'
}
- oninput 输入一次触发一次
oIpt.oninput = function(){
console.log(1);
}
- onchange 内容发生改变时触发 不会立即触发,而是等到失去焦点时,检测内容相比原始值变化了触发
oIpt.onchange = function(){
console.log(1);
}
7.事件绑定的方式
给元素绑定事件的方式:(type:click)
- DOM0级事件绑定方式 元素.on+type = function(){}
- 缺点:不能给同一个元素的同一个事件进行多次绑定
- 优点:兼容好
- 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;
}
}