Web前端开发笔记-----22.认识事件、事件类型、事件对象、事件对象属性

Web前端开发笔记-----22.事件、认识事件、事件类型、事件对象、事件对象属性

---

一、认识事件

1.什么是事件

事件是发生并得到处理的操作，即：事件来了，人后处理。

2.事件绑定方式

1.内联模式

<button onclick="btnClick">内联模式</button>

2.外联模式

var oBtn = document.getElementById("btn1");
        oBtn.onclick = function(){}
<button id="btn1"></button>

3.绑定事件格式：

元素节点.on + 事件类型 = 匿名函数

---

二、事件类型

1.鼠标事件

click 单击
dblclick 双击
mouseover 鼠标移入
mouseout 鼠标移出
mousedown 鼠标按下
mouseup 鼠标抬起
mousemove 鼠标移动（会不停的触发）
mouseenter 鼠标移入
mouseleave 鼠标移出

注：鼠标事件可以绑定在任意元素节点上。

mouseover和mouseenter的区别：
mouseover mouseout 经过子节点会重复触发。
mouseenter mouseleave 经过子节点不会重复触发(IE8后才有)。

2.键盘事件（表单元素，全局window）

keydown 键盘按下（如果按下不放手，会一直触发）
keyup 键盘抬起

keypress 键盘按下（只支持字符键）

3.HTML事件

a.window事件

load 当页面加载完成以后会触发
unload 当页面解构的时候触发（刷新页面，关闭当前页面） 只IE浏览器兼容
scroll 页面滚动
resize 窗口大小发生变化的时候触发

b.表单事件

blur 失去焦点
foucs 获取焦点
select 当我们在输入框内选中文本的时候触发
change 当我们对输入框的文本进行修改并且失去焦点的时候

注：必须添加在form元素上
submit 当我们点击submit上的按钮才能触发
reset 当我们点击reset上的按钮才能触发

---

三、事件对象

事件绑定：
元素节点.on + 事件类型 =匿名函数
注：
1.系统会在事件绑定完成的时候，生成一个事件对象
2.触发事件的时候，系统会自动去调用事件绑定的函数。将事件对象当做第一个参数传入。

事件对象获取（固定写法）：

window.onload = function(){
   
            var oBtn = document.getElementById("btn1");
            oBtn.onclick = function(ev){
   
                var e = ev || window.event