Day07-JavaScript

前端拓海

已于 2023-12-02 15:06:14 修改

阅读量123

点赞数 4

文章标签： javascript 前端开发语言

于 2023-11-29 11:21:50 首次发布

本文链接：https://blog.csdn.net/Spirs/article/details/134685454

版权

一.注册事件处理程序的方式

<body>

    <div onclick="alert('123')"> 123 </div>
    <div class="box">123</div>
    <div class="box2">123</div>
    <div class="box3">123</div>

    <script>

        var box = document.getElementsByClassName("box")[0];
        var box2 = document.getElementsByClassName("box2")[0];
        var box3 = document.getElementsByClassName("box3")[0];

        box.onclick = function () {
            console.log(123);
        }



        // 元素.addEventListener(事件名,函数,true/false)
        // true代表事件捕获，false代表事件冒泡。
        // 由于现在的浏览器都是执行事件冒泡，所以第三个参数通常写成false。

        box2.addEventListener('click',function(e){
            console.log(e);
        },false);

    </script>

</body>

二.添加事件监听与on的区别

<body>

    <div class="box">123</div>
    <div class="box2">123</div>
    <div class="box3">123</div>

    <script>

        var box = document.getElementsByClassName("box")[0];
        var box2 = document.getElementsByClassName("box2")[0];
        var box3 = document.getElementsByClassName("box3")[0];

        box.onclick = function() {
            console.log(123);
        }


        box.onclick = function() {
            console.log(456);
        }

        // 元素.addEventListener(事件名,函数,true/false)
        // true代表事件捕获，false代表事件冒泡。
        // 由于现在的浏览器都是执行事件冒泡，所以第三个参数通常写成false。

        box2.addEventListener('click', function(e) {
            console.log(e);
        }, false);

        box2.addEventListener('click', function(e) {
            console.log('abc');
        }, false);

        // on 绑定事件 与添加事件监听 addEventListener 的区别
        // on绑定事件 如果绑定了相同的多个事件 那么 后者会覆盖前者
        // addEventListener 添加的多个相同的事件  则会按顺序执行

        // 给元素添加事件一共三种方式
        // 1.在开始标签上写 on事件名称="JS代码"
        // 2.在script标签里面获取元素 然后 通过 元素的属性 添加事件 onclick
        // 3.使用addEventListener 添加事件监听

        // 浏览器不同 支持的JS语法也不同
        // ele:事件源
        // type：事件类型
        // handleFun ： 事件处理函数

        function addMyEvent(ele, type, handleFun) {

            // 标准浏览器的方法
            if (ele.addEventListener) {
                console.log(1);
                ele.addEventListener(type, handleFun);
                // IE浏览
            } else if (ele.attachEvent) {
                console.log(2);
                ele.attachEvent('on' + type, handleFun);
            } else {
                console.log(3);
                ele['on' + type] = handleFun;
                eleonclick = function() {}
            }
        };

        addMyEvent(box2, 'mouseenter', function() {
            console.log("进入事件");
        });

    </script>

</body>

三.移除事件

<body>

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

    <script>

        var box = document.getElementsBuClassName("box")[0];
        var box2 = document.getElementsBuClassName("box2")[0];
        var box3 = document.getElementsBuClassName("box3")[0];

        // 匿名函数
        // box.onclick = function() {
        // console.log("单机");
        // }

        // 注销事件
        // box.onclick = null;
        console.dir(box);

        // 创建普通函数
        function fun() {
            console.log(123);
        }

        // 具名函数的消除
        box.addEventListener('click', fun);
        // ele.removeEventListener('click',clickHandler);
        box.removeEventListenner('click', fun);

    </script>

</body>

四.循环绑定事件

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0px;
            padding: 0px;
        }

        ul,
        li {
            list-style: none;
        }

        li {
            width: 120px;
            height: 40px;
            text-align: center;
            line-height: 40px;
            border: 1px solid black;
            float: left;
            margin-right: 10px;
        }
    </style>
</head>

<body>

    <ul class="list">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>

    <script>

        var list = document.getElementsByClassName("list")[0];

        // DOM 元素 是一个对象 有属性和方法
        // 对象页允许 添加属性和方法

        // 遍历
        for (var i = 0; i < list.children.length; i++) {
            console.log(list.children[i]);

            // 给每一个li都添加上一个属性
            list.children[i].index = i;

            list.children[i].onclick = function () {
                console.dir(this.index);
            }
        }

    </script>

</body>

</html>