二、（8）JavaScript Event事件对象

JavaScript-Event对象

Event对象

　　event对象：也就是“事件对象”: 代表一个网页上的事件发生时的相关信息。具体比如：鼠标的位置，按键的键值/键名，事件发生在谁身上（就是所谓的事件源）。

事件对象的组成

注意：event对象在FF浏览器中，必须在事件调用函数的位置传如函数中。

案例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <button type="button" id="btn">普通按钮</button>
        
        <script>
            /*
             * 事件对象的属性和方法：
             *     1. 属性
             *         target        事件发生的目标，就是事件源
             *         x            鼠标点击时的x位置，相对于浏览器内容的左上角
             *         y            鼠标点击时的y位置，相对于浏览器内容的左上角
             *         which        鼠标或键盘的按键键位，鼠标是 1左,2中,3右。键盘事件时与keyCode相同
             *         keyCode        键盘键位
             *         
             *     2. 方法
             *         e.preventDefault()    阻止浏览器的默认行为，与 return false 效果相同
             */
            btn.onclick=function(e){
                console.log(e);
            }
            
            document.body.onkeydown=function(e){
                console.log(e);
            }
        </script>
    </body>
</html>

事件冒泡与捕获

事件的冒泡与捕获

　　向下是捕获1-2-3-4,向上是冒泡5,6,7,8

　　事件的捕获和冒泡只能够通过W3C标准方法注册事件的方式来完成。

案例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <section id="box1">
            <div id="box2">
                <h1 id="box3">今天星期六，马上放假了，好嗨哦~~~~</h1>
            </div>
        </section>
        
        <script>
            /*
             * 冒泡：冒泡是事件的一种默认机制，事件在子元素触发时，父元素也会被触发，一真向上直到根节点
             * 
             * 捕获：捕获也是事件的一种机制，事件触发时首先触发在根元素，再逐层向下捕捉，直到事件源
             */
            box1.addEventListener('click',function(){
                console.log('box1被点击了');
            },false);
            
            box2.addEventListener('click',function(){
                console.log('box2被点击了');
            },false);
            
            box3.addEventListener('click',function(){
                console.log('box3被点击了');
            },false);
        </script>
    </body>
</html>

扩展：事件委派的实现

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <ul id="box">
            <li>新闻一</li>
            <li>新闻二</li>
            <li>新闻三</li>
        </ul>
        <button type="button" id="btn">新增一行</button>
        
        <script>
            /*
             * 事件委派：
             *     1. 为什么要用事件委派？
             *         因为网页在与用户交互过程中可以会产生新元素，会错过加载页面的事件绑定，所以需要事件委派
             * 
             *     2. 什么是事件委派？
             *         事件委派是将事件委托给网页加载时就存在的父元素，
             *         事件触发时，由于事件的冒泡机制，点击子元素父元素也会触发，触发委派的事件
             *         委派的事件触发时，通过事件对象反查事件源，实现目标
             */
            btn.onclick=function(){
                var li=document.createElement('li');
                li.innerText='新闻四';
                box.appendChild(li);
            }
            //事件委派
            box.onclick=function(e){
                e.target.style.background='#f00';
            }
            /*
            var lis=box.children;
            //遍历数组，批量绑定事件
            for(var i=0; i<lis.length; i++){
                lis[i].onclick=function(){
                    this.style.background='#f00';
                }    
            }
            */
        </script>
    </body>
</html>

音乐播放器

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    #musicbox{
        margin: 20px auto;
        border: red 20px solid;
        width: 600px;
        height: 400px;
        padding: 20px;
        background: #333333;
    }
    @font-face {
        font-family: "icom";
        src: url("fonts/icomoon.ttf?relgn") format("truetype");
    }
    #musicbox img{width: 200px;float: left;margin-right: 100px;}
    #musicbox>p>span{
        font-family: icom;
        color: #ffffff;
        font-size: 20px;
        margin: 0 10px;
        cursor: pointer;/*鼠标移上去变手型*/
    }
    #pervbtn::before{content: "\ea1f";}
    #nextbtn::before{content: "\ea20";}
    #musicbox>p>#playbtn{position: relative;top: 4px;font-size: 30px;}
    #musicbox>p{line-height: 100px;}
    /*音乐播放点击开始和暂停两种状态*/
    .play::before{content: "\ea1c";}
    .pause::before{content: "\ea1d"}
</style>
<body>

<div id="musicbox">
    <img src="" alt="" id="musicpic"/>
    <p>
        <span id="pervbtn"></span>
        <span id="playbtn" class="play"></span>
        <span id="nextbtn"></span>
    </p>
<!--    使用audio标签播放音乐-->
    <audio src="" id="player">你的电脑不支持音乐播放器！</audio>
</div>
<script>
    //创建数组对象
    var list=[
        {id:1,title:"Mascara",singer:"邓紫棋",pic:"images/1.jpg",music:"music/1.mp3"},
        {id:2,title:"西安人的歌",singer:"程渤智",pic:"images/2.jpg",music:"music/2.mp3"},
        {id:3,title:"往后余生",singer:"李贰叁",pic:"images/3.jpg",music:"music/3.mp3"},
    ];
    playIndex=0;//默认播放

    //点击时播放音乐
    playbtn.onclick=function () {
        if (player.paused){//获取播放器状态，如果是暂停，就播放
            player.play();//开始播放
            this.className="pause";//换图标
        }else{//如果是播放，就暂停
            player.pause();
            this.className="play";
        }
    }
    //点击一条按钮时，播放下一首音乐
    nextbtn.onclick=function(){
        if (playIndex<list.length-1){
            ++playIndex;
        }else{
            playIndex=0;//从零开始
        }
        change(playIndex);//切换，图片
        player.play();//播放音乐
        playbtn.className="pause";//改变播放图标状态
    }

    //设置一个播放函数，用于修改页面的图片和音频地址
    function change(n) {
        musicpic.src = list[n].pic;//修改当前的图片地址为音乐对应的图片
        player.src = list[n].music;//
    }
    //函数调用
    change(playIndex);

    //点击上一首时，播放上一首音乐
    pervbtn.onclick=function () {
        if (playIndex==0){
            playIndex=list.length-1;//如果当前播放的是第一首，就回到最后一首
        }else{
            playIndex--;
        }
        change(playIndex);//切换，图片
        player.play();//播放音乐
        playbtn.className="pause";//改变播放图标状态
    }
</script>
</body>
</html>

效果图片

作业

4.1. 有多个按钮，制作点击某个按钮，就让这个按钮隐藏掉；

4.2. 制作一个选项卡效果

4.3. 制作音乐播放器

posted @ 2021-02-17 22:52  全村的希望、  阅读(170)  评论(0)  编辑  收藏  举报