• 浏览器有一种特殊的侦测手段，它可以监听用户在网页上的操作（行为）（点击、输入、鼠标....）；还提供了回调能力 让我们客户端可以自定义用户行为以后的动作。

常用事件：

• 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();