js初阶学习路线

最新推荐文章于 2024-03-26 19:59:55 发布

lyu_ping

最新推荐文章于 2024-03-26 19:59:55 发布

阅读量193

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/qq_42443548/article/details/103788979

版权

js-Day09-12.31

今日目标：

1.Event事件对象（掌握）

2.掌握事件监听的注册，注销方法

3.理解音乐播放器的制作思路

（1）事件对象

概念：事件发生时，就会自动产生的对象（自带对象）

事件的四要素：

1.事件源：事件发生在谁身上，谁就是事件源

2.事件类型：发生的事件类型

3.事件处理函数：事件发生时，执行的函数（代码）

4.事件对象：事件旁观者，包含了事件发生时所有的信息

1.1 标准浏览器：事件对象，作为函数的参数传入

function(e或者event) {
    console.log(e或者event)
}

1.2 在IE浏览器下（IE9以下，不包含IE9）

function(e或者event) {
    console.log(window.event)
}

1.3 事件对象的兼容（重点）

var e = e || window.event;
console.log(e)

2.1 事件对象的属性和方法：

e.clientX : 鼠标指针的X轴坐标

e.clientY : 鼠标指针的Y轴坐标

function(e) {
    var e = e || window.event;
    console.log(e.clientX);
    console.log(e.clientY);
}

事件源兼容：

IE：e.scrElement

标准：e.target

兼容：

var target = e.scrElement || e.target;

方法：

e.preventDefault()：阻止默认事件(相当于事件里的return false)

//自定义菜单
window.oncontextmenu = function(e) {
    //兼容
    var e = e || window.event;
    //阻止浏览器显示菜单
    e.preventDefault();
}

小练习：简单瞄准镜效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        #shoot {
            width: 100px;
            height: 100px;
            background: skyblue;
            border-radius: 50%;
            font-size: 30px;
            text-align: center;
            line-height: 95px;
            position: absolute;
            left: 0;
            top: 0;
            cursor: none;
        }
    </style>
</head>
<body>
    <div id="shoot">+</div>
</body>
</html>

let oDiv = document.querySelector("#shoot");
window.onmousemove = function (e) {
    //兼容处理
    var e = e || window.event;
    //鼠标x坐标,再减去宽度的一半，让瞄准镜在鼠标正中
    let x = e.clientX - 50;
    //鼠标y坐标,再减去宽度的一半，让瞄准镜在鼠标正中
    let y = e.clientY - 50;
    //把鼠标坐标赋值给元素
    oDiv.style.left = x + "px"
    oDiv.style.top = y + "px"
}

（2）事件注册及注销 (重点)

事件注册有三种方式：

第一：直接在标签上绑定 ---------- 不推荐

第二：通过元素对象直接注册 -----------缺点：同类型事件只能注册一次

元素对象.事件类型 = 匿名函数

第三：通过事件监听来注册 ------------- 企业常用

注册：

标准浏览器（非IE）：target.addEventListener(‘事件类型(不带on)’，事件处理函数)

IE模式下：target.attachEvent(‘事件类型(带on)’，事件处理函数)

兼容写法：
```
/* 
            功能说明：注册事件
            语法： addEvent(obj, type, fn)
            obj:事件源
            type：事件类型，传入不带on的
            fn：事件处理函数
*/
function addEvent(obj, type, fn) {
    //标准模式
    if (obj.addEventListener) {
        obj.addEventListener(type, fn)
    } else {
        //非标准模式(IE)
        obj.attachEvent('on' + type, fn)
    }
}
```
注销：

标准浏览器（非IE）：removeEventListener(‘事件类型(不带on)’，事件处理函数)

IE模式下：target.detachEvent(‘事件类型(带on)’，事件处理函数)

        /* 
            功能说明：注销事件
            语法： removeEvent(obj, type, fn)
            obj:事件源
            type：事件类型，传入不带on的
            fn：事件处理函数
        */
        function removeEvent(obj, type, fn) {
            //标准模式
            if (obj.addEventListener) {
                obj.removeEventListener(type, fn)
            } else {
                //非标准模式(IE)
                obj.detachEvent('on' + type, fn)
            }
        }