web开发：javascript高级

一、事件案例

二、循环绑定之变量污染

三、事件的绑定与取消

四、事件对象

一、事件案例

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>事件高级</title>

    <style>

        .box {

            width: 350px;

            height: 350px;

            margin: 100px auto 0;

        }

        .box div {

            width: 70px;

            height: 70px;

            background-color: yellow;

            border-radius: 50%;

            float: left;

        }

    </style>

</head>

<body>

<div class="box">

    <div></div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

</div>

</body>

<script>

    var divs = document.querySelectorAll(".box div");

    // 需要注意的点: 我们需要修改背景颜色, 背景颜色是计算后样式,

    // 那么getComputedStyle()获取颜色的格式需要手动处理, 而行间式不需要处理,

    // 且行间式不仅可以设置, 还可以修改  => 将原本计算后样式设置的更改为行间式

    // 通过循环利用行间式将所有背景颜色重置

    for (let i = 0; i < divs.length; i++) {

        divs[i].style.backgroundColor = "black";

    }

    // 游戏的实现

    for (let i = 0; i < divs.length; i++) {

        // 循环绑定 (问题: 变量污染)

        divs[i].onclick = function () {

            console.log(i)

            // toggle 颜色 => 抽离出toggle颜色的方法

            // 修改自身

            toggleBGColor(this);

            // 修改上下左右, 考虑问题, 不存在的兄弟方位

            // 上, 关系i-5, 第一排没有上 i < 5 => 对立面 i >= 5均有上

            if (i >= 5) {

                var topEle = divs[i - 5]

                toggleBGColor(topEle);

            }

            // 下, 关系i+5, 最后一排没有下, 对立面 i < 20

            i < 20 && toggleBGColor(divs[i + 5]);

            // 左, 关系i-1, 第一列没有左, 对立面 i % 5 != 0

            i % 5 != 0 && toggleBGColor(divs[i - 1]);

            // 右, 关系i+1, 最后一列没有右, 对立面 i % 5 != 4

            i % 5 != 4 && toggleBGColor(divs[i + 1]);

        }

    }

    function toggleBGColor(ele) {

        var bgColor = ele.style.backgroundColor;

        if (bgColor == 'black') {

            ele.style.backgroundColor = "yellow";

        } else {

            ele.style.backgroundColor = "black";

        }

    }

</script>

</html>

二、循环绑定之变量污染

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>循环绑定</title>

</head>

<body>

<div class="box">0000000000000000001</div>

<div class="box">0000000000000000002</div>

<div class="box">0000000000000000003</div>

</body>

<script>

    var divs = document.querySelectorAll(".box");

    /* 存在污染

    for (var i = 0; i < divs.length; i++) {

        // i = 0 | 1 | 2 | 3

        // 循环绑定

        divs[i].onclick = function () {

            console.log("***", i)

        }

    }

    // i = 3

    console.log(">>>", i);

    */

    /* 利用块级作用域解决

    for (let i = 0; i < divs.length; i++) {

        // {i=0 <= i} {i=1 <= i} {i=2 <= i}

        // i = 3

        // 循环绑定

        divs[i].onclick = function () {

            console.log("***", i)

        }

    } // for运行结束, i=3会被销毁

    console.log(">>>", i)

    */

    // 利用标签的属性解决

    /*

    for (var i = 0; i < divs.length; i++) {

        divs[i].index = i;

        divs[i].onclick = function () {

            // console.log("###", i)

            console.log(this.index)

        }

    }

    */

    // 利用闭包处理循环绑定

    for (var i = 0; i < divs.length; i++) {

        (function () {

            var index = i;

            divs[index].onclick = function () {

                console.log("###", index)

            }

        })()

        /*

        (function (index) {

            divs[index].onclick = function () {

                console.log("###", index)

            }

        })(i)

         */

        /*

        (function (i) {

            divs[i].onclick = function () {

                console.log("###", i)

            }

        })(i)

         */

    }

</script>

</html>

三、事件的绑定与取消

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>事件的绑定与取消</title>

    <style>

        .box {

            width: 100px;

            height: 100px;

            background-color: orange;

            border-radius: 50%;

        }

    </style>

</head>

<body>

<div class="box"></div>

<div class="box"></div>

<div class="box"></div>

<div class="begin">开始</div>

<div class="event_on1">事件的绑定1</div>

<div class="event_on2">事件的绑定2</div>

</body>

<script>

    // 每一个box点击都会toggle颜色, 当颜色都变成黑色, 取消所有点击事件,

    // 点击开始, 重新获得点击事件(所有状态应该重置)

    var beginBtn = document.querySelector('.begin');

    var boxs = document.querySelectorAll('.box');

    // 定义一个count计算器,计黑的个数

    var count = 0;

    // 启动服务

    beginBtn.onclick = init;

    // 开始功能

    // function beginAction() {

    //     // 让所有box拥有点击事件

    // }

    // box点击切换颜色

    function toggleColor() {

        // console.log(this)

        if (this.style.backgroundColor == "orange") {

            this.style.backgroundColor = "black";

            count++;

        } else {

            this.style.backgroundColor = "orange";

            count--;

        }

        // 检测是否需要结束

        count == 3 && overAction();

    }

    // 结束功能, 取消所有box点击事件

    function overAction() {

        for (var i = 0; i < boxs.length; i++) {

             boxs[i].onclick = null;

        }

    }

    // 重置功能, 并让所有box拥有点击事件

    function init() {

        for (var i = 0; i < boxs.length; i++) {

            boxs[i].style.backgroundColor = "orange";

            boxs[i].onclick = toggleColor;

        }

        // 计算器重置

        count = 0;

    }

    // 启动服务

    // init();

</script>

<script>

    var event_on1 = document.querySelector('.event_on1');

    // 事件绑定的第一种方式

    event_on1.onclick = function () {

        console.log(1)

    };

    event_on1.onclick = function () {

        console.log(2)

    }

    // 事件绑定的第二种方式

    var event_on2 = document.querySelector('.event_on2');

    // 可以为一个元素绑定多个事件, 按绑定顺序依次执行

    event_on2.addEventListener('click', function () {

        console.log("a")

    });

    var action = function () {

        console.log("b")

    }

    event_on2.addEventListener('click', action);

    // 如何取消事件

    event_on2.removeEventListener('click', action)

</script>

</html>

四、事件对象

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>事件对象</title>

    <style>

        body {

            margin: 0;

        }

        .box {

            background-color: pink;

        }

        .sup {

            width: 200px;

            height: 200px;

            background-color: red;

        }

        .sub {

            width: 100px;

            height: 100px;

            background-color: orange;

        }

    </style>

</head>

<body>

    <div class="box">12345</div>

    <div class="sup">

        <div class="sub"></div>

    </div>

    <a href="https://www.baidu.com">只想相应点击事件</a>

</body>

<script>

    var box = document.querySelector('.box');

    // 事件的钩子函数, 系统回调时传递了一个值, 该值为事件对象

    box.onclick = function (ev) {  // 回调函数

        console.log(ev)

        // 特殊按键 altKey | shiftKey | ctrlKey

        console.log(ev.altKey)

        // 鼠标的点击点

        console.log(ev.clientX, ev.clientY)

    }

</script>

<script>

    var sup = document.querySelector('.sup');

    var sub = document.querySelector('.sub');

    // 事件默认有冒泡, 子级相应事件后,会将事件传递给父级,如果父级有相同事件,也会被激活, 最终传递给document

    sub.onclick = function (ev) {

        console.log(ev);

        // 取消冒泡, 当自身处理事件后, 该事件就处理完毕, 结束, 不再向上传递

        ev.cancelBubble = true;

        console.log("子级被点击了")

    };

    sup.onclick = function () {

        console.log("父级被点击了")

    };

    document.onclick = function () {

        console.log("文档被点击了")

    }

</script>

<script>

    // 默认事件

    var aBtn = document.querySelector('a');

    aBtn.onclick = function (ev) {

        ev.cancelBubble = true;

        console.log("a被点击了");

        // 手动转跳页面

        open('https://www.oldboyedu.com', '_self');

        // a标签默认会完成转跳, 如果取消默认事件

        return false;

    }

</script>

</html>

巴特西

web开发：javascript高级

最新文章

热门文章