2.5.1、鼠标事件

onmouseover/onmouseout（鼠标悬停/鼠标移开）

 <p id="p">hello world</p>
    <script>
        var p = document.getElementById("p");
        p.onmouseover = function(){
            this.style.background = "red"
        }
        p.onmouseout = function(){
            this.style.background = "yellow"
        }
    </script>

点击消失 onclick

不能对HTML collection执行点击事件，只有对具体元素执行事件
this—>在事件中

    <div class="one">hello 1</div>
    <div class="one">hello 2</div>
    <div class="one">hello 3</div>
    <div class="one">hello 4</div>

 var all = document.getElementsByClassName("one");
        for(var i=0;i<all.length;i++){
            all[i].onclick = function(){
                this.style.display = "none"
            }
        }

ID

btn点击事件

input输入框有checked，true表示选中，false没有选中

//
<input id="input" type="checkbox">篮球
//
    <script>
        var input = document.getElementById("input");
        input.checked = false;
        console.log(input.id)
    </script>

全选/不选/反选

//html
 <button id="all">全选</button>
    <button id="noall">不选</button>
    <button id="reverse">反选</button>
    <div>
        <input type="checkbox">足球
        <input type="checkbox">篮球
        <input type="checkbox">LOL
        <input type="checkbox">王者荣耀
    </div>

//
        var all = document.getElementById("all");
        var noall = document.getElementById("noall");
        var reverse = document.getElementById("reverse")
        var inputs = document.getElementsByTagName("input");
        /*对but执行点击事件*/ 
        all.onclick = function(){
        /*2.将所有的input的checked属性设置为true*/  
        for(var i=0;i<inputs.length;i++){
            inputs[i].checked = true;
          }
        }
        noall.onclick = function(){
        for(var i=0;i<inputs.length;i++){
            inputs[i].checked = false;
          }
        }
        reverse.onclick = function(){
        for(var i=0;i<inputs.length;i++){
            console.log(inputs[i].checked)
            inputs[i].checked = (inputs[i].checked) ? false : true;
          }
        }