JavaScript事件

事件介绍

当我们点击一个按钮时，会弹出一个对话框。 在JavaScript中，“点击”这个事情就被看做一个事件。“弹出对话框”其实就是我们在点击事件中坐的一些事。

事件三要素

事件源       -> 触发事件的元素  如 ：按钮
事件类型      -> 事件如何触发，点击、双击、移动... 如： click 点击事件
事件处理函数  -> 事件做什么

事件对象

1. 处理事件，与事件相关的
2. 当触发事件，自动生成一个事件对象
   window-打开浏览器对象生成window对象
3. 获取事件对象
   在事件处理函数中取名为event， 更改函数对象名（事件函数定义一个形参，接受事件对象）
4. 事件对象兼容性 非IE浏览器 <--> IE浏览器 ：window。event

事件对象位置属性

    var divEle = document.querySelector('div')
    /*
        绑定点击事件
        1.事件源  div元素
        2.事件类型  事件类型名click
        3.事件处理函数
        事件对象 event
    */

    divEle.onclick = function(e){
        e = e || window.event  // 获取事件对象
        console.log('offsetX :',e.offsetX, '  offsetY :',e.offsetY)  // 相对自身坐标
        console.log('clientX :',e.clientX, '  clientY :',e.clientY)  // 相对浏览器窗口
        console.log('pageX :',e.pageX, '  pageY :',e.pageY)  // 相对页面窗口
    }