JAVASCRIPT DOM事件

js事件原理

•在某个业务场景下的动作触发运行的逻辑流程

•事件源：触发当前动作的源头组件（元素），可以是当前页面的任意元素（document、div、input等）

js事件绑定方式

•方式一：标签内部通过事件赋值方式绑定

•方式二：js中通过标签对象动态给事件对象赋值方法（重要的）

•方式三：js中在scipt标签中动态绑定（谷歌不兼容，不常用）

•<script for=“id名” event=“事件名”>过程</script>

页面加载关闭事件：

•onload：页面加载事件，页面加载完后再执行

•onunload：当页面关闭、刷新、转向之后执行（火狐、谷歌不支持）

•onbeforeunload：在关闭、刷新、转向页面之前调用（火狐不支持）

鼠标事件

•onclick(单机)、ondblclick（双击）

•onmouseenter（鼠标进入）、onmouseleave（鼠标退出）：不涉及子元素操作

•onmouseover（鼠标进入）、onmouseout（鼠标退出）：涉及到子元素操作

•onmousedown、onmouseup、onmousemove（鼠标移动）

•oncontextmenu（右击菜单事件）

键盘事件

•onkeypress：按下键触发，不能识别功能键和方向键

•onkeydown：按下所有键都能触发

•onkeyup：释放任何按键触发

相关组件事件

•onfocus（获取焦点）、onblur（失去焦点）

•onchange（内容改变事件）：当时焦点，并内容改变的时候，执行

•onsubmit（表单提交事件）

event

•事件对象，由当前事件触发后，window对象自动产生的

•这个对象包含了当前事件的大部分信息数据

获取事件对象兼容问题

•非参数传递方式：window.event  兼容IE低高版本、谷歌

•参数传递方式：function(event){}  兼容IE9以上、谷歌、火狐

•兼容写法：function(event){var e =event||window.event}

事件相关对象属性

•srcElement：事件源元素

•几个坐标属性：

•clientX、clientY：相对于浏览器边界鼠标xy偏移量

•screenX、screenY：相对于屏幕鼠标xy偏移量

•pageX、pageY：相对于当前页面鼠标xy偏移量（设计滚动页面）

•offsetX、offsetY：相对于当前事件容器组件内部的xy偏移量（不包括border，包括padding）