web前端开发第二阶段——获取元素的实际大小\dom事件\浏览器事件\键盘事件

获取元素的实际大小

offsetWidth: width+pading+border 注意不包括margin;
offsetHeight: height+border+padding

clientWidth: width+pading 不包括margin+border
clientHeight: height+padding;

获取元素相对于可视区位置和自身的大小

getBoundingClientRect()
无参
返回结果为一个集合

浏览器事件

window.onresize : 当浏览器窗口发生改变时触发事件
window.onscroll :滚动条的位置发生改变，触发事件

DOM事件

回顾onclick \oninput\onmouseenter\onmouseleave

鼠标移入事件：onmouseover:从父级进入子级反过来子级进入父级，等情况都会触发事件，而onmouseenter只执行一次

鼠标移出事件：onmouseout:从父级进入子级反过来子级进入父级，等情况都会触发事件，而onmouseleave只执行一次

onclick:鼠标左键按下抬起才执行
onmousedown:鼠标左键按下执行
onmouseup:鼠标左键抬起事件
onmousemove:鼠标移动事件
ondblclick:鼠标双击事件
onmousemenu():鼠标右击事件

适用于文本框、文本域

onchange:value值发生改变并且失去光标，触发事件
onblur:失去焦点（光标）事件

获取光标 方法：focus():让输入框和文本域获取到光标，不会选中内容；select():获取光标，会选中内容

键盘事件

onkeydown:键盘按下事件（在光标获取的条件下）
onkeyup:键盘抬起事件
onkeypress:按住一直压着一直触发

console.dir():打印事件

传统事件

直接写带on的事件，特点，同一事件只能拥有一个：如果拥有多个，下面的代码会将下面的函数覆盖

事件监听（事件绑定函数）

通过一个函数的方式给元素绑定事件： 元素.addEventListener(),让相同事件不冲突不覆盖
参数一：不带on的时间名，字符串
参数二：事件触发执行的函数
参数三：是否冒泡：布尔值，默认false表示冒泡，true:表示捕获 ps:IE9及以下不支持

IE专属：元素.attachEvent():低版本，高版本无用
参数一：带on的时间名，字符串
参数二：事件触发执行的函数

事件解绑

传统事件：直接重新给事件赋值为null

事件监听：元素.removeEventListener()
参数一：事件名称（解除的事件）
参数二：解除的函数名称 专属IE的：detachEvent(）

冒泡机制

当元素触发事件时，事件先从window开始一层一层往下面找目标元素，找到目标元素后又回到window,整个过程叫做冒泡机制
分为两个阶段：
捕获阶段：当某个元素触发时，从window开始一层层往里找，一直到找到目标元素的节点
冒泡阶段：当某个元素触发时，找到目标元素后有返回window
特点：
在从window找到目标元素的过程中，如果祖先元素拥有和目标元素相同的事件，祖先元素的事件就会被触发
ps:传统事件：默认在冒泡阶段触发祖先元素（只有冒泡阶段）；可以通过事件监听改变是否冒泡

事件对象：event:设置一个形参ev或e谷歌自动传

取消冒泡机制：
ev.cancelBubble 参数：false默认不取消，true:取消

低版本IE：ev.stopPropagation()
IE不会自动传一个参数，但是window下面有一个event和上面的google自动传的ev一样

兼容 ev=ev || window.event;

取消浏览器默认：preventDefault() 用法：ev.preventDefault()

事件源：ev.target:获取触发事件的元素

事件委托：通过父级的事件给子级添加事件，通过事件源委托给子级

获取鼠标坐标：

pageX:当触发事件时，鼠标在可视区的X轴位置 pageY:当触发事件时，鼠标在可视区的Y轴位置

获取键盘的对应键值

keyCode键值
code:获取触发事件的键
例如 A——65 左上右下键分别为：37 38 39 40