JavaScript(事件二）

事件对象

事件对象的获取方式：

    1.通过一个形参来接收

    2.通过window.event来接收 === event

    var e = e || window.event

    // console.log(event);
    // console.log(event === e); // true

    // console.log(event === window.event); // true

事件对象 - 系统在调用事件函数传入了一个实参对象，这个对象就是事件对象

事件对象的作用：记录了跟当前事件相关的很多信息

获取事件对象：

    window.event

    在正常的浏览器中，通过事件函数的第一个形参，也可以获取到的，在低版本ie中只能使用window.event来获取

阻止事件冒泡：

        事件对象.cancelBubble = true

<style>
    .box{
        width: 200px;
        height: 200px;
        background-color: pink;
    }
</style>
<body>
<!-- <div class="box"></div> -->
<style>
    .big{
        width: 300px;
        height: 300px;
        background-color: #f00;
    }
    .middle{
        width: 200px;
        height: 200px;
        background-color: #00f;
    }
    .small{
        width: 100px;
        height: 100px;
        background-color: #0f0;
    }
</style>
<div class="big">
    <div class="middle">
        <div class="small"></div>
    </div>
</div>
</body>
<script>
// 1.阻止事件冒泡
var big = document.querySelector('.big');
var middle = document.querySelector('.middle');
var small = document.querySelector('.small');
big.onclick = function() {
    console.log('大');
}
middle.onclick = function() {
    console.log('中');
}

small.onclick = function() {
    var e = window.event
    // 阻止事件冒泡 - 事件.cancelBubble = true

    e.cancelBubble = true

    // e.stopPropagation()
    // if(e.stopPropagation) {
    //     e.stopPropagation()
    // } else {
    //     e.cancelBubble = true
    // }

    console.log('小');

    // big.onclick()
}
</script>

事件类型

2.获取到事件类型

<body>
<button>按钮</button>
</body>
<script>
// 2.获取到事件类型
document.querySelector('button').onclick = function() {
console.log(window.event);

// 事件对象.type 代表当前的事件类型
console.log( window.event.type );
}
</script>

3.获取鼠标按键信息

document.querySelector('button').onmousedown = function() {
    console.log(window.event);

    // 事件对象.button 代表当前鼠标按键信息：0左键 1滚轮 2右键
    console.log( window.event.button );
}

4.键盘按键信息

事件对象.keyCode - 键盘按键码  --   数字字母对应阿斯克码(误差)

        回车：13

        空格：32

        上：38

        下：40

        右：39

        左：37

事件对象.ctrlKey - 返回布尔值，代表是否按住ctrl键

事件对象.altKey - 返回布尔值，代表是否按住alt键

事件对象.shiftKey - 返回布尔值，代表是否按住shift键

//将阿斯克码转成字符
    if(String.fromCharCode(e.keyCode).toLowerCase() === 'a') {
        console.log('是');
    } else {
        console.log('不是');
    }

//判断是否按住了ctrl+z
    if(e.ctrlKey && String.fromCharCode(e.keyCode).toLowerCase() === 'z') {
        console.log('是');
    } else {
        console.log('不是');
    }

低版本火狐中按键码有兼容问题

    console.log( e.which );

    var keycode = e.keyCode || e.which

获取鼠标点击的位置

    相对于标签：offsetX    offsetY

    相对于浏览器窗口：clientX    clientY

    相对于整个页面：pageX   pageY

阻止默认行为

默认行为：自带的功能

有些标签不需要使用js事件操作，自动就能实现某些功能，例如a标签、form、鼠标右击

利用事件对象，阻止默认行为

    var e = window.event;

    1.阻止默认行为 - 事件对象.returnValue = false

       e.returnValue = false

    2.在事件函数的末尾，添加  return false

    return false

    3.如果有链接，就将链接改为：javascript:;

获取具体的更精准的目标元素      事件对象.target

事件委托

事件委托：利用事件冒泡原理，让父标签代替子标签处理事件

    事件委托怎么做？给父标签绑定事件，在父标签事件中，通过事件对象.target获取到当前触发事件的目标子标签，处理这个行为、

    好处：

    1.提高绑定的效率

    2.动态添加的子标签也能具备事件