事件对象

事件触发时对于事件处理函数，JS执行引擎会默认传一个实参就是事件对象，通常用形参event接收。Event对象（事件对象）存储着事件发生时的相关信息，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态等。

事件对象的信息

事件源对象

event.target：火狐只有这个

event.srcElement：IE6/78只有这个

这两个chrome都有

兼容性写法 var ele=event.target|| event.srcElement

鼠标事件触发时

altKey：鼠标事件发生时，是否按下alt键,返回一个布尔值

ctrlKey：鼠标事件发生时，是否按下ctrl键,返回一个布尔值

metaKey ：鼠标事件发生时，是否按下windows/commond键,返回一个布尔值

shiftKey 鼠标事件发生时，是否按下shift键,返回一个布尔值

pageX：鼠标点击的X坐标；(包含body隐藏的，页面滚动到下方后上面body被隐藏的会包括)，pageY：鼠标点击的Y坐标；(包含body隐藏的)

pageX，pageY：鼠标点击时鼠标距离页面（距离body）的左上角，pageX是距离body元素左上角的水平距离，pageY是距离body元素左上角的垂直距离（会加上滚动的距离）

clientX，clientY：返回鼠标位置相对于浏览器窗口左上角的坐标，单位为像素(不包括body隐藏的，页面滚动到下方后上面body被隐藏的不包括)。以body的左上角为原点，向右为X的正方向，向下为Y的正方向。

clientX，clientY：鼠标点击时鼠标距离页面的显示区域（浏览器页面可视区）的左上角（与页面是否有滚动无关）

在页面没有滚动时，page、client 的值相同，pageX，pageY页面滚动时不会改变，而clientX，clientY也会随着浏览器页面的滚动而改变。

screenX，screenY返回鼠标位置相对于屏幕左上角的坐标，单位为像素

1.screenX 鼠标点击的坐标距电脑屏幕水平方向的距离

2.screenY 鼠标点击的坐标距电脑屏幕垂直方向的距离

movementX，movementY返回一个位移值，单位为像素，表示当前位置与上一个mousemove事件之间的距离。点击事件中不会改变永远是0，在mousemove事件中光标移动时会持续触发，就会改变其值，有负数也有正数（由上一次触发mousemove事件的movementX，movementY减去下一次触发mousemove事件的movementX，movementY）

offsetX，offsetY：相对于元素自己的x/y，跟它是否是定位的元素无关。

1.offsetX：鼠标点击的坐标距元素自身水平方向元素的距离，不受滚动条影响

2.offsetY：鼠标点击的坐标距元素自身垂直方向元素的距离，不受滚动条影响

输入框操作的事件对象

data：事件触发时，输入框输入的内容而不是输入框中的内容，输入框中的内容是元素节点的value值（获取元素节点可以先获取元素用变量引用，也可以通过事件触发时this对象，还可以通过事件对象中target获取事件源对象）

键盘事件触发时

charCode：指用户按下字符的编码

keyCode：表示用户按下键的实际的编码。

keydown和keyup:：charCode值为0

keypress：charCode有值

结论：charCode返回keypress事件触发键值的字母代码，keyCode返回keydown或keyup事件的键的代码。

常用keyCode：37左，38上，39右，40下，13enter，键盘上的键名A是65，B是66

code：表示键盘输入的键名

key：表示输入的文字

altKey：事件发生时，是否按下alt键,返回一个布尔值

ctrlKey：事件发生时，是否按下ctrl键,返回一个布尔值

metaKey ：事件发生时，是否按下windows/commond键,返回一个布尔值

shiftKey 鼠标事件发生时，是否按下shift键,返回一个布尔值

事件对象的type属性

type：返回要触发的事件类型，但事件类型不加on 比如：click，mouseover等

事件中的this

属性绑定事件

this表示绑定事件的元素，事件处理函数形参event是事件对象

    <button class="btn">按钮</button>
    <script>
        let btn=document.querySelector(".btn");
        btn.onclick=function(event){
            //事件处理函数形参event是事件对象
            console.log(event);
            console.log(this);
        };
     </script>

行内式绑定

行内式绑定的函数，就相当于在调用函数。行内绑定时，行内无法获取事件对象。

    <button class="btn" onclick="fn(100)">按钮</button>
    <script>
        function fn(arg){
            //形参arg接收传入的实参
            console.log(arg,111);
            //在行内式绑定中window.event事件对象
            console.log(window.event,222);
            console.log(this,333);
        };
     </script>

行内的环境对象是行内这个元素节点，而函数的调用者是window。所以此时函数中的this是window

    <button class="btn" onclick="fn(this)">按钮</button>
    <script>
        function fn(arg){
            //形参arg接收传入的实参
            console.log(arg,111);
            //在行内式绑定中window.event事件对象
            console.log(window.event,222);
            console.log(this,333);
        };
     </script>

行内的环境对象是行内这个元素，所以此时传入的实参this是行内这个元素节点，可在事件处理函数中用形参接收这个绑定事件的元素节点。

1.当行内式绑定传入了实参点击事件对象的兼容写法：

var event=(event.constructor==PointerEvent&&event)|| window.event

2.当行内式绑定没有传入实参点击事件对象的兼容写法：

var event=event|| window.event

3.在行内直接写代码无法传参，所有浏览器都支持window.event、event来获取当前正在被触发的对象的事件

<p onclick = "alter(event)"></p>
<p onclick = "alter(window.event)"></p>
<p onclick = "alter(arguments[0])"></p>

4.在行内调用函数可传参，也可直接调用

<script>
function test(e){
        console.log(e);//传参所有浏览器都可以输出当前被触发的事件
        //直接调用
        console.log(event);
        console.log(window.event);
    }
</scripy>
<body>
 <p>
    <input type="text" onclick="test(event)">
    //或
     <input type="text" onclick="test(window.event)">
 </p>
</body>

添加监听器绑定

    <button class="btn">按钮</button>
    <script>
        let btn=document.querySelector(".btn");
        btn.addEventListener("click",function(event){
            //事件处理函数形参event是事件对象
            console.log(event,1111);
            console.log(this,2222);
        });
    </script>