JavaScript 事件 Events

A. 事件

描述: 事件，其实就是浏览器捕捉用户的行为操作

    用户单双击，按下键盘，关闭浏览器等，都是用户的行为操作。
    当用户点击某个按钮，意思就是用户在该元素上触发了点击事件。

B. 如何绑定事件？

1. 在元素上添加事件属性
    绑定点击事件:
        <button onclick="">点击</button>

2. 找对象的方式
    绑定点击事件:
        var test = document.getElementById('test');
        test.onclick = function(){};

C. 有哪些事件？

文档事件，图片事件，鼠标事件，键盘事件，表单事件，其他事件...

D. 文档事件

1. onload: 文档加载成功
    回顾：JS执行顺序
        window.onload
    问题：window.onload 重复出现？

    * 所有JS代码都必须写 window.onload 中

E. 图片事件

1. onload
    加载成功
2. onerror
    加载错误

F. 鼠标事件 1~7 可以绑定在任何元素上

1. onclick          单击
2. ondblclick       双击

3. onmousedown      按下
4. onmouseup        弹起

5. onmousemove      鼠标移动

6. onmouseover      经过
7. onmouseout       离开


8. oncontextmenu    在用户点击鼠标右键打开菜单时触发

G. 事件对象是什么鬼?

描述: 事件对象是用于记录鼠标或键盘的状态信息
作用:
    1. 你点击时鼠标的位置？
    2. 按键时，具体按的哪个键？
重要：
    * 事件对象是随着事件产生的

H. 如何获取事件对象？

event
    事件对象

IE下的事件对象
    window.event

I. 事件对象的相关属性(鼠标 / 键盘)

1. event.clientX, event.clientY
    返回当事件被触发时，鼠标指针的水平坐标和垂直坐标

2. event.keyCode
    键盘编码

3. 事件冒泡
    1. event.cancelBubble
        阻止事件冒泡(IE支持, 不符合W3C标准)
    2. event.stopPropagation()  
        * 标准 Event 方法
        不再派发事件。阻止事件冒泡(符合W3C标准)


4. 阻止默认行为
    event.preventDefault()  通知浏览器不要执行与事件关联的默认动作。

5. 其他特定需求的事件对象属性:
    1. event.altKey
        返回当事件被触发时，"ALT" 是否被按下。
    2. event.ctrlKey
        返回当事件被触发时，"CTRL" 键是否被按下。
    3. event.shiftKey
        返回当事件被触发时，"SHIFT" 键是否被按下。

J. 键盘事件

1. onkeydown    按下
2. onkeyup      弹起
3. onkeypress   按一次

4. 案例:

K. 其它事件

1. onscroll     滚动事件
    1. 为DOM对象绑定
        element.onscroll
    2. 为浏览器绑定
        window.onscroll

2. onresize     调整窗口大小

L. 表单事件

1. onblur       元素失去焦点时触发
2. onfocus      元素获取焦点时触发

3. oninput      元素获取用户输入时触发
    注意：IE8不兼容
    实例：实时统计字符数量

4. onchange
    该事件在表单元素的内容改变时触发( <input>,<select>, 和 <textarea>)

5. onsubmit     表单提交
6. onreset      表单重置
    注意:
        onsubmit 、 onreset 是为表单绑定的，而不是某个按钮

    <!--  -->