JavaScript(事件二）

最新推荐文章于 2023-04-21 14:22:29 发布

APLL_

最新推荐文章于 2023-04-21 14:22:29 发布

阅读量802

点赞数 1

文章标签：事件对象事件冒泡阻止默认行为事件类型事件委托

本文链接：https://blog.csdn.net/APLL_/article/details/123720934

版权

事件对象

事件对象的获取方式：

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:;