- 浏览器有一种特殊的侦测手段，它可以监听用户在网页上的操作（行为）（点击、输入、鼠标....）；还提供了回调能力 让我们客户端可以自定义用户行为以后的动作。
常用事件：
onclick： 鼠标点击某个对象
ondblclick ： 鼠标双击某个对象
onload： 某个页面或图像被完成加载 body img
onerror ： 当加载文档或图像时发生某个错误 iframe img
onresize ： 当的尺寸发生改变的时候 window
window.innerWidth 获取当前窗口的宽度 window.innerHeight 获取当前窗口的高度onscroll ： 当对象发生滚动操作的是 window iframe
document.body.scrollTop||document.documentElement.scrollTop 获取浏览器滚动高度
表单事件：
onfocus ： 表单元素取到焦点 text password textarea
onblur ： 表单元素**失去焦点 **
onchange ： 表单的值发生改变的时候 text (失去焦点之前才判断) select
-
onsubmit ： 表单被提交的时候 触发事件 form 不能是submit
<form action="" onsubmit="return check()">
check() 进行数据验证 如果你验证通过 函数中return true ；验证失败 return false
鼠标事件：
- onmouseover： 鼠标被移到某元素之上
- onmousemove： 鼠标被移动
- onmouseout： 鼠标从某元素移开
- onmousedown ： 某个鼠标按键被按下
- onmouseup： 某个鼠标按键被松开
键盘事件：
- onkeydown ： 某个键盘的键被按下
- onkeypress ： 某个键盘的键被按下或按住
- nkeyup ： 某个键盘的键被松开
this指向问题
1、如果是全局中 this window
2、普通函数中 this window
3、对象.方法中 this 当前对象
4、直接标签中事件中 this 当前DOM元素对象
事件绑定
告诉浏览器 当发生了指定事件以后 执行什么代码
- 方式一：直接标签上 绑定事件
<div onclick="f()">嘻嘻</div>
- 方式二：事件理解为 标签对象的方法
// DOM对象.事件名 = function() { ... }
div.onclick = function () {
alert('点到了')
}
- 方式三：每个DOM对象 addEventListener 用于添加需要监听事件
function ff()
{
// 移除对象的指定事件监听
div.removeEventListener('click', ff);
alert('点到了')
}
// DOM.addEventListener('事件名去on', function() { ... })
div.addEventListener('click', ff);
批量事件绑定
使用循环方式
var divs = document.getElementsByTagName('div');
for (var i = 0; i <= divs.length - 1; i++) {
divs[i].onclick = function () {
console.log(this, this.innerHTML)
}
}
event 对象
-- 每个事件本身 都是一个对象,每个事件都有event，该事件本身是一个函数，而该函数的形参接收一个event对象。
- 不同类型事件 对象中的信息（属性）是不一样的 不需要死记 console 调试查看即可。
对象.事件名 = function(event) { ... }
console .log(event)//查看事件属性返回的编码
阻止事件冒泡：
ev.stopPropagation();
