JS：自定义属性，键盘事件，window事件，排他思想

1.自定义属性

目前我见到的是用于“tab栏切换”中使用，是为了追加索引以展现不同的切换效果：

<div class="tab">
        <div class="tab_list">
            <ul>
                <li class="current">商品介绍</li>
                <li>规格与包装</li>
                <li>规格与包装</li>
                <li>规格与包装</li>
            </ul>
        </div>
        <div class="tab_con">
            <div class="item">
                商品介绍内容
            </div>
            <div class="item">
             内容
            </div>
            <div class="item">
                商品介绍
            </div>
            <div class="item">
                商品介
            </div>
        </div>
    </div>
    <script>
        var tab_list = document.querySelector('.tab_list');
        var lis =document.querySelectorAll('li');
        var items =document.querySelectorAll('.item');
        for(var i = 0;i<lis.length;i++){
            // 开始给五个小li添加索引号
            lis[i].setAttribute('index',i);
            lis[i].onclick=function(){
                for(var i = 0;i<lis.length;i++){
                    lis[i].className=''
                }
                this.className = 'current'
                // 下面内容显示
                var index = this.getAttribute('index');
                console.log(index);
               for(var i = 0;i<items.length;i++){
                   items[i].style.display='none';
               }
               items[index].style.display='block';
            }
        }
        
    </script>

2.键盘事件

主要是keyup,keydown和keypress这几个，但是平常keyup使用的较多，三者之间还有细微的区别：

<script>
        // keyup和keudown不区分大小写。获取keyCode值不同
        document.addEventListener('keyup', function () {
            console.log('111');
        })
        document.addEventListener('keydown', function () {
            console.log('222');
        })
        // 不能识别Ctrl shift 区分大小写
        document.addEventListener('keypress', function (e) {
            console.log('333');
            console.log(e);
        })
        // 获取ASCI值
    </script>

3.window事件

window窗口加载事件：
window.onload：是窗口（页面）加载事件，当文档内容（包括图像、脚本文件、css文件等）完全加载完成会触发该事件，调用该事件对应的事件处理函数。
document.DOMContentLoaded：此加载事件会在DOM加载完成时触发，这里所说的加载不包括css样式表，图片和flash动画等额外内容的加载。

4.排他思想

 <script>
       var btns = document.getElementsByTagName('button');
       for (var i = 0;i<btns.length;i++){
        //    首先以点击的对象为主，样式改变
           btns[i].onclick = function(){
            //    利用for循环在对除点击外的元素的样式还原
               for (var i = 0;i<btns.length;i++){
                   btns[i].style.backgroundColor = '';
               }
                this.style.backgroundColor = 'pink';
           }
       }
  </script>