标签：取值 通过 操作 focus mouse 鼠标 简单 idt ons
1、事件
（1）事件源：触发事件的源头
（2）事件类型：什么行为
（3）事件处理函数：触发行为时要做什么事，触发事件源的对应的事件类型时，直接被执行的函数
（4）事件对象：记录事件发生的所有信息
2、事件类型
（1）鼠标类
1）onclick：点击
2）ondblclick:双击
3）onmousedown：按下
4）onmouseup：抬起
5）onmouseover|onmouseenter：进入
6）onmouseout|onmouseleave：离开
7）onmousemove：移动
8）oncontextmenu：右键单击
9）onwheel：滚轮滚动
（2）键盘类
Tip：键盘事件只能加给具有焦点的元素或document
1）onkeydown：按下任意键
2）onkeyup：释放任意键
3）onkeypress：抬起并按下
（3）表单控件类
1）onblur：失去焦点
2）onfocus：获取焦点
3）oninput：输入
4）onchange：改变
5）onsubmit：提交（只能用于from标签）
6）onreset：重置（只能用于from标签）
7）onselect：选中
（4）页面类
1）onload：页面加载结束后要做什么 2）onscroll：页面发生滚动
属性：页面滚走的距离 （可读可写）
document.documentElement.scrollTop --> 垂直方向滚动的距离 document.documentElement.scrollLeft --> 水平方向滚动的距离
3）onresize：窗口或框架的大小发生改变
属性：页面内容区的尺寸（只读）
document.documentElement.clientWidth --> 页面内容区的宽度 document.docuementElement.clientHeight --> 页面内容区的高度
3、事件对象
（1）特点：
默认不显示，需要手动获取；
只有在事件中存在，在事件还没有开始前或结束后，都无事件对象；
事件对象只跟着事件走，类似于局部变量；
事件结束后事件对象会被浏览器（window）回收。
（2）事件对象的获取 （有兼容）
兼容方式：
functioin fn(eve) {
var e = eve || window.event;
}
Tip：event只存在于事件中，外部不可用，使用时window不可以省掉
（3）如何通过事件对象获取事件源
e.target
4、鼠标事件的常用属性
（1）检测按下的鼠标按键 --> button | buttons
obox.onmousedown = function(eve){g var e = eve || window.event; console.log(e.button); //左键：0 滚轮：1 右键：2 console.log(e.buttons); //左键：1 滚轮：4 右键：2 }
（2）检测鼠标相对于浏览器左上角的位置 --> clientX | clientY
obox.onmousedown = function(eve){ var e = eve || window.event; console.log(e.clientX); //水平方向的位置 console.log(e.clientY); //垂直方向的位置 }
（3）检测相对于html文档的左上角的位置 --> pageX | pagesY
obox.onmousedown = function(eve){ var e = eve || window.event; console.log(e.pageX); //水平方向的位置 console.log(e.pageY); //垂直方向的位置 }
Tip: 不支持IE8-
（4）检测相对于显示器屏幕左上角的位置 --> screenX | screenY
obox.onmousedown = function(eve){ var e = eve || window.event; console.log(e.screenX); //水平方向的位置 console.log(e.screenY); //垂直方向的位置 }
（5）检测相对于事件源左上角的位置 --> offsetX | offsetY
obox.onmousedown = function(eve){ var e = eve || window.event; console.log(e.offsetX); //水平方向的位置 console.log(e.offsetY); //垂直方向的位置 }
5、事件冒泡
当触发某个元素的某个事件时，它会先触发自己的对应事件，然后再依次向上触发所有父级中相同的事件，如果中间的某个父级没有相同的事件，会继续向上触发。
由于事件冒泡的既有好也不好，当用不到的时候就需要阻止事件冒泡。
事件冒泡的阻止（有兼容）：
function stopBubble(e) { if(e.stopPropagation) { e.stopPropagation(); //非IE }else { e.cancelBubble = true; //IE } }
6、键盘事件及其相关属性
事件源：document或其他具有焦点的属性
如何知道按下的是哪个键？ --> keyCode（事件对象的属性）
keyCode 值为十进制 也是对应的ASCII码 通过keyCode找得到对应的键盘按键
document.onkeydown = function(eve) { var e = eve || window.event; if(e.keyCode == 65) { console.log("A"); } }
keyCode存在兼容问题，兼容的解决：
var code = e.keyCode || e.which;
特殊键：
1）Ctrl键
属性：ctrlKey
取值：true | false
当按下其他键时值为false，按下Ctrl键时取值为true
2）shift键
属性：shiftKey
取值同上。
3）alt键：
属性：altKey
取值同上。
Tip: 常用见取值 --> 左键：37，上键：38，右键：39，下键：40，回车键：13，空格键：32
7、默认事件
我们没有设置，但是系统默认有的事件 ==> 默认事件或默认行为
如何阻止默认事件？（有兼容）
//方法一： function stopDefault(e) { if(e.preventDefault) { e.preventDefault(); //非IE }else { e.returnValue = false; //IE } } //方法二：(无兼容） return false;
8、事件的绑定方式
（1）赋值式（DOM0级事件绑定）
常用 、简单、没有兼容
绑定方式：
obox.onclick = fn; obox.onclick = function() {//操作} obox.onclick = function() {fn();}
删除方式：
obox.obclick = nll;
（2）事件监听式（DOM0级事件绑定）
有兼容
兼容的解决：
绑定方式：
function addEvent(ele,type,fn) { if(ele.addEventListener){ ele.addEventListener(type,fn); }else if(eve.attachEvent){ ele.attachEvent("on"+type,fn); } else { ele["on"+type] = fn; } }
删除方式：
function addEvent(ele,type,fn) { if(ele.addEventListener){ ele.addEventListener(type,fn); }else if(eve.attachEvent){ ele.attachEvent("on"+type,fn); } else { ele["on"+type] = fn; } }
9、事件流的三个阶段
（1）冒泡阶段 （从里向外） ==> 默认阶段
（2）目标阶段 （当前阶段）
（3）捕获阶段 （从外向内）
待补充……
标签：取值 通过 操作 focus mouse 鼠标 简单 idt ons
原文地址：https://www.cnblogs.com/hm-08042/p/11444199.html
