给对象绑定事件

---

js给对象绑定事件

---

1.什么是事件？

一个事件由什么组成：

1.事件源 ：即 谁来触发事件
2.事件类型 ：即 触发什么事件
3.事件处理函数 ：即 触发之后做什么

var oDiv = document.getElementById("div1");
oDiv.onclick = function(){
}

在这个函数中：
事件源 —→ oDiv
事件类型 —→ click
事件处理函数 —→ function(){ }

var oDiv = document.getElementById("div1");
oDiv.onclick = function(){ 
    alert("事件处理函数")
}

把我们点击 div 后想做的事情写进事件处理函数里，
当我们点击 div 时就会执⾏事件处理函数内部的代码，
每点击⼀次，就会执⾏⼀次事件处理函数

2.事件类型有哪些？

1.鼠标事件（可绑定在任意元素节点上）

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

※这里有两套鼠标移入移出事件，其区别是：
mouseover、mouseout在鼠标经过子节点时会重复触发
mouseenter、mouseleave在鼠标经过子节点时不会重复触发

2.键盘事件

keydown 键盘按下（一直按着会不停触发）
keyup 键盘抬起
keypress 键盘按下

※keydown支持所有键，keypress只支持字符键，不支持功能键

3.HTML事件

①window事件
load 当页面加载完成后触发
unload 当页面解构（刷新页面、关闭当前页面）时触发
scroll 页面滚动时触发
resize 窗口大小发生变化时触发

②表单事件
blur 失去焦点
focus 获取焦点
select 选中文本框内容时触发
change 改变文本框内容并失去焦点时触发
submit 点击submit按钮时触发
reset 点击reset按钮时触发

※submit、reset必须绑定在form上

3.给对象绑定事件的方法？

1.内联模式（直接将事件添加到元素上）

<h1 οnclick = "alert("内联模式")">hello</h1>

2.外联模式（将事件作为属性添加到对象上）

var oDiv = document.getElementById("div1");
oDiv.onclick = function(){ 
    alert("外联模式")
}

3.事件监听器

创建事件监听器addEventListener
格式：元素节点.addEventListener(   )
第一个参数：事件类型  例如：click
第二个参数：函数名/匿名函数
第三个参数：布尔值     false  事件冒泡       true   事件捕获
※事件监听器绑定事件，可以将多个函数绑定在一个事件上
删除事件监听器removeEventListener
格式：元素节点.removeEventListener(   )
第一个参数：事件类型
第二个参数：函数名（不能匿名）
※指定删除某一个事件下的某一个函数