web第六天-CSDN博客

本文链接：https://blog.csdn.net/qq_55364077/article/details/131738394

事件监听

    <style>
        div {
            width: 300px;
            height: 300px;
            background-color: pink;
        }
        .yincang {
            display: none;
        }
    </style>

   <button>切换</button>
    <div class="yincang"></div>
    <script>
        // 1、获取元素
        const btn = document.querySelector('button')
        const box = document.querySelector('div')
        // 2、添加事件监听
        btn.addEventListener('mouseenter', () => {  
            // console.log('1111') mouseenter 事件在定点设备（通常指鼠标）首次移动到元素的激活区域内时，在该元素上触发。
            box.classList.toggle('yincang')
        }, true)
    </script>

事件绑定

 <button>点击</button>
    <script>
        // 1、获取元素
        let btn = document.querySelector('button')
        // 

        // e.on事件名 = 回调函数
        btn.onclick = function () {
            // console.log('111')
            btn.style.backgroundColor = 'pink'
        }
    </script>

捕获、冒泡

   <script>
        document.querySelector('.grandfather').addEventListener('click', (e) => {
            console.log('我是yeye')
            // e.stopPropagation()  阻止捕获和冒泡阶段中当前事件的进一步传播。
        }, true)
        // 默认为false冒泡    true捕获
        document.querySelector('.father').addEventListener('click', (e) => {
            console.log('我是父亲')
            // e.stopPropagation()
        }, true)
        document.querySelector('.son').addEventListener('click', () => {
            console.log('我是儿子')
        }, true)
    </script>

默认阻止行为

 <script>
        document.querySelector('button').addEventListener('click', (e) => {
            e.preventDefault() 
            // 默认阻止传播行为
        })
 </script>

load事件

 <script>
        window.addEventListener('load', function () {
            document.querySelector('button').addEventListener('click', () => {
                console.log('1111')
            })

        })
</script>

节点操作

    <div class="father">
        我是父亲
        <div class="son1">我是儿子</div>
        <div class="son">我是儿子</div>
        <div class="son">我是儿子</div>
        <div class="son">我是儿子</div>
        <div class="son">我是儿子</div>
    </div>

    <script>
        let father = document.querySelector('.son').parentNode
        console.log(father)

        let son = document.querySelector('.father').children
        console.log(son)

        document.querySelector('.son1').nextElementSibling.style.color = 'pink'
        // nextElementSibling 返回当前元素在其父元素的子元素节点中的后一个元素节点
    </script>

节点追加


<body>
    <button>
        发布
    </button>
    <ul>
        <li>11111</li>
        <li>2222</li>
        <li class="three">3333</li>
        <li>4444</li>
    </ul>

    <script>
        // 
        const btn = document.querySelector('button')
        const ul = document.querySelector('ul')
        btn.addEventListener('click', () => {
            // 1、创建节点  createElement 用于创建一个由标签名称 tagName 指定的 HTML 元素。
            let newLi = document.createElement('li')
            //2、添加内容
            newLi.innerHTML = `<h1>我是新创建的li</h1>  <button>删除</button>`
            // 3、追加
            let p2 = newLi.querySelector('button')
            console.log(p2)

            p2.addEventListener('click', () => {
                ul.removeChild(newLi)
            })
            // removeChild() 方法从 DOM 中删除一个子节点。返回删除的节点。
            ul.append(newLi)
            // Element.append在 Element的最后一个子节点之后插入一组对象
        })
    </script>
</body>

构造函数

<body>
    <script>
        function Obj(uname, age, gender) {
            this.uname = uname,
                this.age = age,
                this.gender = gender
        }
        Obj.prototype = {
            //必须手动指明构造器所指向的构造函数
            constructor: Obj,

            sing: function () {
                console.log('我要唱歌了~')
            },
            dance: function () {
                console.log('我爱跳舞')
            }

        }
        console.log(Obj.prototype)
        let obj1 = new Obj('gouxin', 21, 'nv')

        obj1.sing()
        // __proto__   :对象原型，实例出来的对象中用于指向构造函数Obj的原型对象prototype的
        console.log(obj1.__proto__ === Obj.prototype)


    </script>

this关键字

        // 默认指向windows  ,函数基本调用时，也只想windows
               console.log(this)
        // 对象方法中，this指向当前对象

        // 箭头函数，没有this的概念，会沿着作用域链查找
        let obj2 = {
            uname: 'gouxin',
            age: 18,
            sing: () => {
                console.log(this)
            }
        }
        obj2.sing()

js执行机制

    <script>
        console.log('11')
        setTimeout('console.log(\'22\')', 0)  
        // setTimeout 设置一个定时器，一旦定时器到期，就会执行一个函数
    </script>