2020-12-04 JavaScript基础：事件基础

事件

窗口事件

window

​ onload 当页面加载完成（页面结构、图片、css文件） 触发

​ onscroll 当滚动条 滚动时 触发

​ onerror 当出现错误（img、input、 script、style、资源加载失败）时触发

​ onresize 当浏览器窗口改变大小时触发

键盘事件

​ onkeydown 当键盘被按下 （不区分大小写。所有功能键都可以）

​ onkeypress 当键盘被按下并松开 (区分大小写。部分功能键 )

​ onkeyup 当键盘 松开 （不区分大小写。所有功能键都可以）

​ 按键码： event.keyCode

​ 回车 13

鼠标事件

​ onclick 单击

​ ondblclick 双击

​ onmousedown 按下鼠标

​ onmouseup 松开鼠标

​ onmouseenter 鼠标进入目标元素

​ onmouseover 鼠标进入目标元素

​ onmouseleave 鼠标离开目标元素

​ onmouseout 鼠标离开目标元素

​ onmousemove 鼠标在目标元素上移动

​ onwheel 鼠标滑轮

​ 禁用鼠标右键菜单

document.oncontextmenu=function (){

	return false;

}

​ 阻止选中文字图片

document.onselectstart=function (){

	return false;

}

https://www.cnblogs.com/web100/p/js-enable-copy.html

表单事件

onfocus 获得焦点

onblur 失去焦点

onchange 内容改变–按下回车/失去焦点

oninput 内容改变–每次

onselect 选中内容

onsubmit 按下 submit按钮

onreset 按下 reset 按钮

事件对象

事件对象概念

​ 触发dom 事件时 会生成 event 对象。包含着 事件相关的所有信息（触发事件的元素、鼠标位置、事件类型）

11.3.2 获取事件对象

​ var event=event || window.event;

11.3.3 事件对象常用相关属性

​ event.target 触发事件的元素

​ event.type 触发事件的 事件类型（click、mousedown）

​ clientX 触发事件时 距离可视区域 x轴坐标

​ clientY 触发事件时 距离可视区域 Y轴坐标

​ offsetX 触发元素 的x 坐标

​ offsetY 触发元素 的Y坐标

​ pageX 距离页面左侧 （包含滚动条距离）

​ pageY 距离页面顶部 （包含滚动条距离）

​

事件对象的兼容性写法

​ var event=event || window.event;

阻止默认事件

默认事件的类型，举例

​ 表单 submit 按钮

w3c 阻止默认事件的方法

​ event.preventDefault();

ie低版本阻止默认事件的方法

​ event.returnValue = false;

事件处理程序

html标签绑定事件

通过on+事件名的方式绑定事件

addEventListener removeEventListener

target.addEventListener("click", func,true捕获/false冒泡);

attachEvent detachEvent ie6-ie8

target.attachEvent("onclick", func);

事件流与事件冒泡和捕获

事件流

ie 冒泡

网景 捕获

dom 捕获—>目标–冒泡

三个阶段： 捕获阶段、目标阶段、冒泡阶段

事件冒泡

点击子

​ 子 —>父 （从下到上）

事件捕获

点击子

​ 父–>子 （从上到下）

阻止冒泡

event.stopPropagation

event.cancelBubble = true

事件委派

事件委派概念以及原理

​ 子元素要发生的事件 委派给 父元素。。。原理：利用事件冒泡

通过事件委派给li添加背景颜色

鼠标滚轮事件

非火狐: mousewheel

火狐:DOMMouseScroll

案例:使用滚轮改变图片的大小

DOM 级别

dom 0 级 事件

​ 鼠标+ 键盘

​ 标签上 加 οnclick=""

​ 节点对象.οnclick=""

dom 2 级事件

​ addEventListener() removeEventListener()

dom 3 级事件

​ 表单事件

.