网页可见区域部分宽高

         var sm = document.querySelector('.sm');
         console.log(document.body)//打印body
         console.log(document.documentElement)//打印html
        
         console.log(box.clientHeight) //元素的高度 = 元素本身高度+padding值
         console.log(box.clientWidth) //元素的宽度 = 元素本身宽度+padding值
         console.log(box.offsetHeight) //元素的高度 = 元素本身高度+padding值+border值
         console.log(box.offsetWidth) //元素的高度 = 元素本身高度+padding值+border值
         console.log(box.scrollHeight) //子元素的高度+padding值
         console.log(box.scrollWidth) //子元素的高度+padding值

鼠标事件获取距离

        box.onmousedown = function (e) {
            var e = e.event || window.event
         console.log(e.clientX,e.clientY)//相对于当前可视区部分x，y轴距离
         console.log(e.pageX,e.pageY)//相对于整个页面的XY轴距离，包括超出页面的部分
         console.log(e.screenX,e.screenY)//相对于屏幕的XY轴距离
         console.log(e.offsetX,e.offsetY)//相对于自身的XY轴距离
            // 自定义数据属性 data-... = ''
            var img =document.querySelector('.imgs')
        console.log(img.dataset) //打印设置的属性
         }

事件委托

  var ul = document.querySelector('ul')
         var ui = document.querySelectorAll('ul li')
         ul.onclick = function (e) { //ul点击事件
            var e = e.event || window.event
             if (e.target.id == 'l1') { //判断点击事件是否生效，如果点击第一个li，打印'第一个'
                 console.log('第一个')
            } else {//如果点击其他的，打印'其他的'
                console.log('其他的')
             }
         }

留言板

 <div class="wrapper">

        <textarea name="" id="text" cols="30" rows="10"></textarea>
        <button id="fb">发表</button>
    </div>
    <div class="content">
        <ul>
            <li>

            </li>
        </ul>
    </div>
    <script>
        var sc = document.getElementById('fb')
        var ul = querySelector('.content ul')
        var text = document.getElementById('text')
        sc.onclick = function (e){//发表按钮的点击事件，点击发表
            e= e.event||window.event;
            var html = text.value.trim();//文本域里面的内容去掉空格装进html
            var time = new Date();//创建一个新的日期
            var str =`${time.getFullYear}-${time.getMonth}-${time.getDate}   ${time.getUHours}:${time.getMinutes}:${time.getSeconds}`//将获取的年月日时分秒拼接起来装进一个新的元素
        text.value = '';//清空新的元素
        var li = document.getElementById('li');//获取li
        ul.appendChild(li);//把li写入ul
        if(html.length>0){//判断，当html里面的内容长度大于零时
            li.innerHTML =document` <span>${str}</span>//写入时间
                        <strong>${html}</strong>//写入内容
                         <button id="sc">删除</button>`//点击删除
        }
 ul.onclick = function(e){//删除按钮，点击删除
            e = e.event||window.event;
            if(e.target.nodeName == 'BUTTON'){//判断，是button按钮则生效
                ul.remove(e.target.parentNode)//清空内容
            }
        }
        }
                  </script>