js多种事件

巨蟹座守护骑士

已于 2023-12-22 18:08:42 修改

阅读量516

点赞数

分类专栏： js 文章标签： javascript 前端 servlet

于 2022-07-31 14:19:49 首次发布

本文链接：https://blog.csdn.net/weixin_70563937/article/details/126083918

版权

js 专栏收录该内容

26 篇文章 0 订阅

订阅专栏

事件委托 e.target 主要用于控制新生成的元素

还可以通过行内事件控制新生成的元素在生成了新的元素之后马上获取

多个子元素有相同的事件给父元素绑定那个事件

通过判断点击的标签的文本类名nodeName 来进行下一步操作

    <!DOCTYPE html>
    <html lang="en">

    <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 1000px;
            height: 700px;
            margin: auto;
            border: 1px solid #d7d7d7;
        }

        .box .lyb {
            color: sienna;
        }

        .box p {
            line-height: 40px;
            width: 900px;
            margin: auto;
            border-bottom: 1px solid gray;
            margin-bottom: 30px;
        }

        .box .jiyu {
            font-family: '楷体';
            font-weight: bold;
            color: sienna;
            text-indent: 2em;
            font-size: 18px;
        }

        .box p .bianji {
            color: gray;
            cursor: pointer;
            font-size: 14px;
            font-family: '楷体';
            margin-left: 10px;
        }

        .box #content {
            outline: none;
            border: none;
            border-top: 1px solid sienna;
            border-bottom: 1px solid sienna;
        }

        #ol1 {
            width: 900px;
            margin: auto;
        }

        li {
            width: 90%;
        }

        span:nth-child(1) {
            float: left;
        }

        span:nth-child(2) {
            float: right;
            cursor: pointer;
        }
    </style>

</head>

<body>
    <div class="box" id="d1">
        <p class="lyb">留言板</p>
        <p><strong>主人寄语</strong><span class="bianji">编辑您的主人寄语</span></p>
        <p class="jiyu">
            我难人亦难,不可为难;我易人亦易,不可大意。
        </p>
        <p><strong>留言</strong><strong class="count">(0)</strong></p>
        <p class="p1">
            <textarea name="" id="content" cols="120" rows="10" disabled></textarea><br>
            <button>我要留言</button>
        </p>
        <ol id="ol1">

        </ol>
    </div>
    <script>
        var btn = document.querySelector("button")
        var txt = document.querySelector("textarea")
        var ol = document.querySelector("ol")
        var p1 = document.getElementsByClassName("p1")[0]
        var flag = true
        var del = document.querySelectorAll("span")
        var div = document.getElementById("d1")
        console.log(del);
        // txt.disabled = true //自带属性直接修改
        //content.disabled=true//可以直接使用id操作
        var sum = document.getElementsByClassName("count")[0]
        var num = 0
        div.onclick = function (e) {
            var target = e.target
            if (target.innerText == "我要留言") {
                target.innerText = "发表"
                txt.disabled = false
            } else if (target.innerText == "发表") {
                if (txt.value) {
                    //有时候+=比创建添加节点方便的多
                    ol.innerHTML += `<li><span>${txt.value}</span><span>删除</span></li>`
                    console.log(txt.value);
                    num++
                    sum.innerText = num
                    txt.value = ""
                } else {
                    alert("内容不能为空")
                }
            }
            if (target.innerText == "删除") {
                if (confirm("你确定要删除吗？")) {
                    target.parentElement.parentElement.removeChild(target.parentElement)
                    num--
                    sum.innerText = num
                    if (num == "0") {
                        txt.disabled = true
                        btn.innerText = "我要留言"
                    }
                }
            }

        }
    </script>
</body>

</html>

事件冒泡子元素有与父元素相似的事件就会被一起触发

    <div>
        <button>按钮</button>
    </div>
    <script>
        var div = document.querySelector("div")
        var btn = document.querySelector("button")
        div.addEventListener("click", function () {
            console.log("盒子");
        },true)
        btn.addEventListener("click", function () {
            console.log("按钮1");
        }, true)
        btn.addEventListener("click", function () {
            console.log("按钮2");
        }, true)
        // 默认为false
        // false是冒泡阶段执行 从下到上 按钮2 按钮1 盒子
        // true是捕获阶段执行 从上到下 盒子 按钮1 按钮2
    </script>

阻止事件冒泡： e.stopPropagation()

点击按钮的时候不能触发事件，只有点击盒子之后再点击按钮才可以触发事件

    <div>
        <button>按钮</button>
    </div>
    <script>
        var div = document.querySelector("div")
        var btn = document.querySelector("button")
        var num = 0
        // 变量方法
        // btn.onclick = function (e) {
        //     console.log("按钮");
        //     e.stopPropagation()
        //     div.onclick = function (e) {
        //         e.stopPropagation()
        //         num=1
        //         // console.log(num);
        //         alert("你点到盒子了,触发了按钮功能")
        //     }
        //     if (num == 1) {
        //         alert("你点击了按钮")
        //     }
        // }
        //正规方法
        div.onclick = function (e) {
            e.stopPropagation()
            var target = e.target
            if (target.nodeName == "DIV") {
                btn.onclick = function () {
                    alert("你点击了按钮")
                }
            }
        }
    </script>

阻止事件默认行为： e.preventDefault()

    <form action="">
        <input type="buton" value="按钮1">
        <button>按钮2</button>
    </form>
    <script>
        var btn1 = document.querySelector("input")
        var btn2 = document.querySelector("button")
        btn1.onclick = function () {
            console.log("按钮1");
            // 加了type=button就不会有默认提交行为
            // 在form外面的提交按钮也不会触发提交行为
        }
        btn2.onclick = function (e) {
            // 没有加type=button会执行默认提交行为/自动刷新页面
            //在事件中加阻止事件默认行为
            e = e || event
            e.preventDefault()
            console.log("按钮2");
        }
        </script>

事件监听 事件解绑： btn.removeEventListener("click", fn)

    <button>触发</button>
    <button>清除触发</button>
    <script>
        var btn = document.getElementsByTagName("button")[0]
        var btn1 = document.getElementsByTagName("button")[1]
        // 普通事件解绑
        // btn.onclick = function () {
        //     alert("触发了函数")
        // }
        // btn1.onclick = function () {
        //     // onclick 事件解绑直接设置为null
        //     // 没有用事件监听第二个会覆盖第一个
        //     btn.onclick = null
        // }

        function fn() {
            alert("触发了函数")
        }
        btn.addEventListener("click", fn)
        btn1.addEventListener("click", function () {
            // 事件监听的解绑只能解绑全局函数
            btn.removeEventListener("click", fn)
        })
        </script>

定时器

    单次定时器
    <button>清除定时器</button>
    <script>
        var timer = setTimeout(function () {
            console.log("定时器");
        }, 1000)//同步读秒异步打印
        var btn = document.querySelector("button")
        btn.onclick = function () {
            //清除定时器
            clearTimeout(timer)
        }
        //打印完了循环再打印定时器
        // for (var i = 0; i < 3000; i++) {
        //     console.log("循环");
        // }
    </script>

    循环定时器
    <button>开启定时器</button>
    <button>清除定时器</button>
    <script>
        var trim = null
        // 在两个函数里面使用要用全局变量
        var btn = document.getElementsByTagName("button")[0]
        var btn1 = document.getElementsByTagName("button")[1]
        btn.onclick = function () {
            //clearInterval(trim)//防止叠加
            // 开启赋值 重定义trim变量
            trim = setInterval(function () {
                console.log("循环定时器");
            }, 1000)
            this.disabled = true//防止点击暂停加速
        }
        btn1.onclick = function () {
            // 清除定时器
            clearInterval(trim)
            btn.disabled = false
        }
    </script>