js学习总结----事件基础

1、什么是事件?

事件分为两部分:

　　1)、行为本身:浏览器天生就赋予其的行为 onclick 、onmouseover（onmouseenter）、onmouseout(onmouseleave)、onmousemove、onmousedown、onmouseup、onmousewheel（鼠标滚轮滚动行为）、onscroll(滚动条滚动行为)、onresize(window.onresize浏览器窗口大小改变事件)、onload、onunload、onfocus(文本框获取焦点行为)、onblur(文本框失去焦点行为)、onkeydown、onkeyup(键盘的按下和抬起行为)。没有给上述的行为绑定方法，事件也是存在的，当我们点击这个盒子的时候，同样会触发它的onclick行为，只是什么都没有做而已

　　2)、事件绑定:给元素的某一个行为绑定方法　　

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div id="div1">
        
    </div>
    <script>
        var oDiv = document.getElementById('div1');
        //DOM0级事件绑定
        /*
            我们是把匿名函数定义的部分当做一个值赋值给oDiv的点击行为（函数表达式）
            当我们触发#div1的点击行为，会执行对应绑定上的方法
            重要:不仅仅把绑定的方法执行了，而且浏览器还默认的给这个方法传递了一个参数值->MouseEvent:鼠标事件对象
            1）、它是一个对象数据类型值，里面包含了很多的属性名和属性值，这些都是用来记录当前鼠标的相关信息的
            2）、MouseEvent-->UIEvent-->Event-->Object
            3）、MouseEvent记录的是页面中唯一一个鼠标每一次触发时候得相关信息，和到底是在哪个元素上触发的没有关系

        */

        oDiv.onclick = function(){
            //当我们触发oDiv的click行为的时候，会把绑定的这个函数执行

            //onclick这个行为定义在当前元素的私有属性上
        }
        //DOM2级事件绑定
        oDiv.addEventListener('click',function(){
            console.log("ok")
        },false)
        //addEventListener这个属性是定义在当前元素所属EventTarget这个类的原型上的
    </script>
</body>
</html>

2、关于事件对象MouseEvent的兼容问题

1)、事件对象本身的获取存在兼容问题:标准浏览器中是浏览器给方法传递的参数，我们只需要定义形参e就可以获取到；在IE6-8中浏览器不会给方法传递参数，我们如果需要的话，我们需要到window.event中获取查找

oDiv.onclick = function(e){
            e = e || window.event;
            e.target = e.target || e.srcElement
            e.pageX = e.pageX || (e.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft))
            e.pageY = e.pageY || (e.clientY + (document.documentElement.scrollTop || document.body.scrollTop))
            e.preventDefault()?e.preventDefault():e.returnValue = false
            e.clientX/e.clientY //当前鼠标触发点距离当前屏幕左上角的x/y轴的坐标值
            e.type // 存储的是当前鼠标触发的行为类型"click"
            e.target //事件源，当前鼠标触发的是哪个元素，那么他存储的就是哪个元素，但是在ie6-8中不存在这个属性（e.target的值就是undefined），我们使用e.srcElement来获取事件源
            e.pageX/e.pageY://当前鼠标触发点距离body左上角（页面第一屏幕最左上端）的x/y轴的坐标，但是在ie6-8中没有这个属性，我们通过使用clientY+滚动条卷去的高度来获取也可以
            e.preventDefault://阻止浏览器的默认行为，在ie6-8中没有这个方法，我们需要使用e.returnValue = false; 或者使用return false;和上述代码是一样的效果
            e.stopPropagation://阻止事件的冒泡传播，在ie6-8中不兼容，使用e.cancelBubble = true来代替
            KeyboardEvent（键盘事件）
                e.keyCode://当前键盘每一个键对应的值
            /*
                默认行为:
                a标签的默认行为就是跳转页面，但是有时候我们使用a标签，只是想应用他的特殊性，并不想点击的时候跳转
            */
        }　
posted @ 2017-07-19 16:27  diasa  阅读(389)  评论(0)    收藏  举报