chuck
/
custom-tool-function


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172
							<!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>
    <script src="./src/index.js"></script>
    <style>
        #outter{
            width:200px;
            background:red;
            height:200px;
        }
        #inner{
            width:100px;
            background:green;
            height:100px;
        }
    </style>
</head>
<body>
    <div id="outter">
        <div id="inner"></div>
    </div>
    <ul id="items">
        <li>1111</li>
        <li>2222</li>
        <li>3333</li>
        <li>4444</li>
        <li>5555</li>
        <div>666</div>
    </ul>
    <script>
        //1、事件捕获冒泡-- 先触发outer
        let outter = document.querySelector('#outter')
        let inner = document.querySelector('#inner')
        outter.addEventListener('click',function(){
            console.log('捕获outter')
        },true)   // true 是否为捕获
        inner.addEventListener('click',function(){
            console.log('捕获inner')
        },true)   // true 是否为捕获
        outter.addEventListener('click',function(){
            console.log('冒泡outter')
        })   // true 是否为捕获
        inner.addEventListener('click',function(){
            console.log('冒泡inner')
        })   // true 是否为捕获

        //2、事件委托函数封装
        addEventListener('#items','click',function(e){
            console.log(this.innerHTML)
        },'li')

        //3、手写事件总线 -- 一个事件绑定多个回调
        eventBus.on('login',data=>{
            console.log(data+'2222')
        })
        eventBus.on('login',data=>{
            console.log(data+'3333')
        })
        //触发
        setTimeout(()=>{
            eventBus.emit('login','张三')
        },2000)
        //注销事件
        eventBus.off('login')

    </script>
</body>
</html>