JS基础-17-事件

事件简介

事件：就是文档或浏览器窗口中发生的一些特定的交互瞬间。对于 Web 应用来说，有下面这些代表性的事件：点击某个元素、将鼠标移动至某个元素上方、关闭弹窗等等。

JavaScript 是以事件驱动为核心的一门语言。JavaScript 与 HTML 之间的交互是通过事件实现的。

事件的三要素

事件源（谁）：触发事件的元素
事件类型（什么事件）：例如 click 点击事件
事件驱动程序（做啥）：事件触发后要执行的代码(函数形式)，事件处理函数

案例代码

<body>
    <button id="btn">唐伯虎</button>
    <script>
        // 点击一个按钮，弹出对话框
        // 1. 事件是有三部分组成  事件源  事件类型  事件处理程序   我们也称为事件三要素
        //(1) 事件源 事件被触发的对象   谁  按钮
        var btn = document.getElementById('btn');
        //(2) 事件类型  如何触发 什么事件 比如鼠标点击(onclick) 还是鼠标经过 还是键盘按下
        //(3) 事件处理程序  通过一个函数赋值的方式 完成
        btn.onclick = function() {
            alert('点秋香');
        }
    </script>
</body>

代码书写步骤如下：（重要）

（1）获取事件源：document.getElementById(“box”); /
（2）绑定事件：事件源box.事件onclick = function(){ 事件驱动程序 };
（3）书写事件驱动程序：关于DOM的操作。

最简单的代码举例：（点击box1，然后弹框）

<body>
<div id="box1"></div>

<script type="text/javascript">
    // 1、获取事件源
    var div = document.getElementById("box1");
    // 2、绑定事件
    div.onclick = function () {
        // 3、书写事件驱动程序
        alert("我是弹出的内容");
    }
</script>

</body>

常见的事件如下：

下面针对这事件的三要素，进行分别介绍。

1、获取事件源的方式（DOM节点的获取）

获取事件源的常见方式如下：

var div1 = document.getElementById("box1");      //方式一：通过id获取单个标签

var arr1 = document.getElementsByTagName("div");     //方式二：通过 标签名 获得 标签数组，所以有s

var arr2 = document.getElementsByClassName("hehe");  //方式三：通过 类名 获得 标签数组，所以有s

2、绑定事件的方式

方式一：直接绑定匿名函数

<div id="box1"></div>

<script type="text/javascript">
    var div1 = document.getElementById("box1");
    //绑定事件的第一种方式
    div1.onclick = function () {
        alert("我是弹出的内容");
    }
</script>

案例（仔细看下代码注释）

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            background-color: skyblue;
            width: 200px;
            height: 200px;
        }

        button {
            width: 200px;
            margin-top: 20px;
        }
    </style>
</head>

<body>
    <div></div>
    <button type="button">改变颜色</button>

    <script>
        // 点击按钮改变背景色
        var button = document.querySelector('button');
        var box = document.querySelector('div');
        button.onclick = function(event){
            // 浏览器在时间函数调用的时候，都会默认传入一个事件对象，该对象包含了此次事件的详细信息。
            console.log(event);
            if(box.style.backgroundColor == "orange"){
                box.style.backgroundColor = "skyblue";
            }else{
                box.style.backgroundColor = "orange";
            }
        }

        // 以下写法第一次需要点击两次按钮才会变色，看返回结果
        // button.onclick = function(event){
        //     console.log(event);
        //     if(box.style.backgroundColor == "skyblue"){
                    //console.log(box.style.backgroundColor == "skyblue"); //返回结果为false
        //         box.style.backgroundColor = "orange";
        //     }else{
        //         box.style.backgroundColor = "skyblue";
        //         console.log(box.style.backgroundColor == "skyblue");//true
        //     }
        // }
    </script>
</body>

方式二：行内绑定(不建议使用）

<!--行内绑定-->
<div id="box1" onclick="fn()"></div>

<script type="text/javascript">

    function fn() {
        alert("我是弹出的内容");
    }

</script>

注意第一行代码，绑定时，是写的"fn()"，不是写的"fn"。因为绑定的这段代码不是写在js代码里的，而是被识别成了字符串。

3、事件驱动程序

我们在上面是拿alert举例，不仅如此，我们还可以操作标签的属性和样式。举例如下：

点击鼠标时，原本粉色的div变大了，背景变红：

    <style>
        #box1 {
            width: 100px;
            height: 100px;
            background-color: pink;
            cursor: pointer;
        }
    </style>
</head>

<body>

<div id="box1" ></div>

<script type="text/javascript">
    var div1 = document.getElementById("box1");
    //点击鼠标时，原本粉色的div变大了，背景变红了
    div1.onclick = function () {
        div1.style.width = "200px";   //属性值要写引号
        div1.style.height = "200px";
        div1.style.backgroundColor = "red";   //属性名是backgroundColor，不是background-color
    }
</script>

上方代码的注意事项：

在js里写属性值时，要用引号
在js里写属性名时，是backgroundColor，不是CSS里面的background-color。

实现效果如下：

封装弹窗函数

html文件内容

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="fnAlert.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        button {
            width: 200px;
            height: 60PX;
            margin: 20px 0 20px 20px;
            border-radius: 10px;
            background: yellow;
            color: purple;
            text-align: center;
            font-size: 20px;
            outline: transparent;
        }

        .zhezhao {
            position: fixed;
            top: 0;
            left: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100vw;
            height: 100vh;
            background: rgba(0, 0, 0, 0.5);
        }

        .alert {
            display: flex;
            flex-direction: column;
            width: 600px;
            height: 400px;
            background: #fff;
            border-radius: 16px;
        }

        .header {
            display: flex;
            justify-content: space-between;
            height: 80px;
            border-bottom: 1px solid #ccc;
            padding: 0 30px;
        }

        .header span:first-child {
            font-size: 24px;
            font-weight: bold;
            line-height: 80px;
        }

        .close {
            font-size: 20px;
            line-height: 80px;
            color: #ccc;
            cursor: pointer;
        }

        .close:hover {
            color: orange;
        }

        .content {
            flex: 1;
            padding: 60px 20px;
            text-align: center;
            font-size: 20px;
            border-bottom: 1px solid #ccc;
        }

        .butList {
            display: flex;
            justify-content: space-evenly;
            align-items: center;
            height: 100px;
        }

        .btn {
            width: 200px;
            height: 60px;
            background: rgb(250, 133, 8);
            border-radius: 5px;
            color: #fff;
            font-size: 16px;
            line-height: 60px;
            text-align: center;
        }

        .btn:last-child {
            background: #ccc;
        }

        .btn:first-child:hover {
            background: rgb(241, 87, 4);
        }

        .btn:last-child:hover {
            background: rgb(181, 181, 181);
        }
    </style>
</head>

<body>
    <button>是否跳转到百度</button>
    <script>
        var oButton = document.querySelector('button');
        oButton.onclick = function(){
            fnAlert({   
                title: "严重警告！",
                content: "是否要离开本站，跳转到百度？",
                fnConfirm:function () {
                    location.href = "https://www.baidu.com"
                },
                fnCancel:function () {
                    var h1 = document.createElement("h1");
                    h1.innerHTML = "用户取消跳转至百度";
                    document.body.appendChild(h1);
                }
            })
        }
    </script>
</body>

外部文件封装函数内容

//传一个对象作为参数
/* options:
{
    title:'温馨提示',
    content:'是否在页面添加一个蓝色的盒子？',
    fnConfirm:function(){
        var oBox = document.createElement("div");
        oBox.style.cssText = "width:300px;height:300px;background:blue";
        document.body.appendChild(oBox);
    },
    fnCancel:function(){

    },
} */

function fnAlert(options) {
    var oBtn = document.querySelector("button");
    //创建弹窗
    var oZheZhao = document.createElement("div");
    oZheZhao.className = "zhezhao"
    oZheZhao.innerHTML = `
            <div class="alert">
                <div class="header">
                    <span>`+ options.title + `</span>
                    <span class="close">x</span>
                </div>
                <div class="content">`+ options.content + `</div>
                <div class="butList">
                    <div class="btn">确定</div>
                    <div class="btn">取消</div>
                </div>
             </div>
             `
    document.body.appendChild(oZheZhao);

    // 点击关闭按钮关闭弹窗
    var oClose = document.querySelector(".close");
    oClose.onclick = function () {
        document.body.removeChild(oZheZhao);
    }
    // 点击确认创建盒子，同时关闭弹窗
    var oConfirm = document.querySelector(".btn:first-child");
    oConfirm.onclick = function () {
        if (typeof options.fnConfirm == 'function') {
            options.fnConfirm()
        } else {
            console.error("传入的参数，没有设置确认函数");
        }
        document.body.removeChild(oZheZhao);
    }
    // 点击取消关闭弹窗
    var oCancel = document.querySelector('.btn:last-child');
    oCancel.onclick = function () {
        if (typeof options.fnCancel == 'function') {
            options.fnCancel()
        } else {
            console.error("传入的参数，没有设置取消函数");
        }
        document.body.removeChild(oZheZhao);
    }
}