DOM03

最新推荐文章于 2024-07-12 10:43:17 发布

rcj15651130122

最新推荐文章于 2024-07-12 10:43:17 发布

阅读量27

点赞数

文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/rcj15651130122/article/details/131057273

版权

一、创建元素内容总结：

document.write 页面重绘

document.write('晚上出去浪啊')

createElement和innerHTML 相对来说createElement加载速度会比innerHTML稍微快一点(如果创建的内容较少的话，两个基本没什么区别)

document.createElement()

element.innerHTML()

二、注册事件(绑定事件)的方法：

<body>
    <div>11111</div>
    <script>
        //  onclick  一个元素只能注册一次事件，多次注册下面的事件会覆盖上面的
        var div = document.querySelector('div')
        // div.onclick = function () {
        //     alert('周末了')
        // }
        // div.onclick = function () {
        //     alert('周末了1111111')
        // }

        // addEventListener 事件监听  可以多次注册同一个事件类型 每个都会依此执行  ie9以下不能使用
        // 元素对象(EventTarget).addEventListener(注册事件的类型,函数,布尔值)  事件类型不要加on

        // div.addEventListener('click', function () {
        //     alert('周末了')
        // })
        // div.addEventListener('click', function () {
        //     alert('周末了11111')
        // })

        // dataEvent() 支持ie9以下的版本  了解即可  执行顺序是从下到上
        div.attachEvent('onclick', function () {
            alert('周末了')
        })
        div.attachEvent('onclick', function () {
            alert('周末了1111')
        })
    </script>
</body>

三、删除事件(解绑事件)的方法：

<body>
    <div>11111</div>
    <button class="btn">抽奖</button>
    <script>
        //  onclick  一个元素只能注册一次事件，多次注册下面的事件会覆盖上面的
        var div = document.querySelector('div')
        var btn = document.querySelector('.btn')
        // btn.onclick = function () {
        //     alert('很遗憾没有中奖')
        //     btn.disabled = true
        // }
        // div.onclick = function () {
        //     alert('很遗憾没有中奖')
        //     // 传统注册事件的删除方式
        //     div.onclick=null
        // }

        // addEventListener 事件监听  可以多次注册同一个事件类型 每个都会依此执行  ie9以下不能使用
        // 元素对象(EventTarget).addEventListener(注册事件的类型,函数,布尔值)  事件类型不要加on

        // div.addEventListener('click', fn) //里面的fn不需要加括号

        // function fn() {
        //     alert('周末了')
        //     //removeEventListener(事件类型，事件执行的函数)
        //     div.removeEventListener('click', fn)

        // }
        // dataEvent() 支持ie9以下的版本  了解即可  执行顺序是从下到上
        div.attachEvent('onclick', fn)

        function fn() {
            alert('周末了')
            div.detachEvent('onclick', fn)
        }
    </script>
</body>

四、DOM事件流

<body>
    <div class="box">
        <div class="sbox"></div>
    </div>
    <script>
        //js代码中只能执行捕获或者冒泡中的一个阶段，不能同时执行
        //onclick和attachEvent这两个事件只能执行冒泡阶段
        //并不是所有的事件都有捕获或者冒泡阶段 onblur onmouseleave没有冒泡阶段
        var box = document.querySelector('.box')
        var son = document.querySelector('.sbox')
        //addEventListener(type,function,boolean)如果boolean是true的时候，表示事件可以获取捕获阶段
        //在捕获阶段，先执行了box在执行的son
        // son.addEventListener('click',function(){
        //     alert('我是son')
        // },true)
        // box.addEventListener('click',function(){
        //     alert('我是div')
        // },true)

//addEventListener(type,function,boolean)如果boolean是false/null的时候，表示事件可以获取冒泡阶段
        //在冒泡阶段，先执行了son在执行的box
        son.addEventListener('click',function(){
            alert('我是son')
        },false)
        box.addEventListener('click',function(){
            alert('我是div')
        },false)
    </script>
</body>