2020-11-16

事件1：

<div id="box">test</div>
<script>
    const box=document.querySelector('#box')
    const callback=(e)=>{
        console.log(e)
        for(let prop in e){
            console.log(prop)
        }
    }
    box.addEventListener('click',callback)
    //创建一个自定义事件
    const helloEvent=new Event('hello',{bubbles:true,cancelable:false})//事件的类型叫做hello
    //处理事件的函数
    const helloCallback=(event)=>{
        box.textContent='hello,event'
    }
    box.addEventListener('hello',helloCallback)
    box.dispatchEvent(helloEvent)
    document.body.addEventListener('hello',()=>{console.log('hello')})
    box.dispatchEvent(helloEvent)
</script>

事件2：

test

事件3

<!-- <div id="box">
    <button id="myButton">test</button>
</div> -->
<!-- <script>
    const box=document.querySelector('#box')
    const myButton=document.querySelector('#myButton')
    box.addEventListener('click',(e)=>{
        console.clear()
        console.log(e.isTrusted)
        console.log(`event.type:${e.type}`)
        console.log(`event.target:${e.target}`)
        console.log(`event.currentTarget:${e.currentTarget}`)
        
    })
</script> -->

click me

事件4

test

导航到微软公司

动态节点：

<ul id="list1" class="list list1">
    <li>java</li>
    <li>javascript</li>
    <li>python</li>
</ul>
<!-- <script src="dongtaijiedian.js"></script> -->
<!-- <script src="dongtaijiedian2.js"></script> -->
<!-- <button id="myButton1">Button1</button>
<script src="shijian1.js"></script> -->
<div id="box">test</div>
<script>
    window.addEventListener('click',()=>{console.log('==> window 捕获阶段')},true)
    document.addEventListener('click',()=>{console.log('==> document 捕获阶段')},true)
    document.documentElement.addEventListener('click',()=>{console.log('==> html 捕获阶段')},true)
    document.body.addEventListener('click',()=>{console.log('==> body 捕获阶段')},true)
    document.addEventListener('click',()=>{console.log('==> box 捕获阶段')},true)
    window.addEventListener('click',()=>{console.log('==> window 冒泡阶段')},false)
    document.addEventListener('click',()=>{console.log('==> document 冒泡阶段')},false)
    document.documentElement.addEventListener('click',()=>{console.log('==> html 冒泡阶段')},false)
    document.body.addEventListener('click',()=>{console.log('==> body 冒泡阶段')},false)
    document.addEventListener('click',()=>{console.log('==> box 冒泡阶段')},false)
</script>

const oList=document.querySelector("#list1")
const oliElement=document.createElement(“li”)
const oTextNode=document.createTextNode(“swife”)
oliElement.appendChild(oTextNode)
// oliElement.textContent=‘swife’
// oList.append(oliElement)
oList.appendChild(oliElement)
oList.prepend(oliElement)

// //插入成第二个节点
// oList.firstElementChild.after(oliElement)
// //插入倒数第二个子节点
// oList.lastElementChild.before(oliElement)
// //删除最后的子节点(自己删除自己)
// oList.lastElementChild.remove()
// //替换javascript子节点
// oList.lastElementChild.previousElementSibling.replaceWith(oliElement)

oList.lastElementChild.classList.add(‘list1’)
oList.lastElementChild.previousElementSibling.classList.add(‘list’)
oList.lastElementChild.classList.add(‘list1’)
oList.addEventListener(‘mouseover’,(Event) =>{
Event.target.classList.toggle(‘list1’)
})

const oList=document.querySelector(’#list1’)
//ul的第二个元素子节点
const oli=oList .firstElementChild.nextElementSibling
// oli.cssText=‘border:1px solid red’
//float ==> cssFloat
//background-color => backgroundColor
oli.style.backgroundColor=‘red’
oli.style.border=‘1px solid blue’

const comStyle=window.getComputedStyle(oli)//只读
console.log(comStyle)
console.log(comStyle.borderStyle)