2.5、js事件

8.3 事件

onclick  一次点击
onfocus;   聚焦事件
onblur  事件

#onclick  内联事件
<button id="btn" onclick="go(event)">btn</button>
# data-自定义属性名  定义data-aid="123456"
<button id="btn"  data-aid="123456" onclick="go(event)">btn</button>
#获取自定义属性值   event.target.dataset.value
 function go(event){
            console.log("hello world")
            console.log(eveent.target.dataset.aid)
        }

8.3.1 chid

#firstChild  获取第一个子节点
#firstElementChild  获取第一个元素子节点
#listChild
#listElementChild
#nextSibling
#nextElementsibling
#previousSibling
#previousElementSibling

 <div>hello</div>
    <ul id="app">
        <li>hrml</li>
        <li>css</li>
    </ul>
    <div>world</div>
    <script>
        var app = document.getElementById("app");
        console.log(app. previousElementSibling)
    </script>

8.3.2 classList

点击字体变色。点击按钮取消

#add(); addClass();
#remove(); removeClass();

 <style>
         .current{
             color: red;
         }
    </style>
<p id="app">hello world</p>
    <button id="btn">移除class</button>
    <script>
        var app = document.getElementById("app");
        var btn = document.getElementById("btn");
        app.onclick = function(){
            this.classList.add("current")
        }
        btn.onclick = function(){
            app.classList.remove("current")
        }
    </script>

8.3.3 toggle

`点击变颜色，再点击颜色消失

#toggle togglecClass()
#contains       hasClass()  判断是否包含某个class

<p id="app">hello world</p>
    <script>
        var app = document.getElementById("app");
        app.onclick = function(){
            // if(this.classList.toggle("current")){
            //     this.classList.remove("current")
            // }else{
            //     this.classList.add("current")
            // }
            this.classList.toggle("current")
        }
    </script>

7.4 onsubmit

<form id="from" onsubmit="alert(1)">
    <p>
        用户名：<input type="text" name="user">
    </p>
     <p>
         密码：<input type="password" name="pwd">
     </p>
     <input type="submit" id="input">
    </form>

7.5 value

element.value

 <input type="text" id="input" value="relloworld">
    <script>
        var input = document.getElementById("input");
        input.onkeyup = function(event){
            if(event.keyCode ==13 ){
                console.log(this.value)
            }
        }
    </script>

7.10

<ul>
        <li>html <button>删除</button></li>
        <li>css <button>删除</button></li>
        <li>javascript <button>删除</button></li>
    </ul>
    <script>
        // parentNode--元素的父节点
        var btns = document.getElementsByTagName("button");
        for(var i=0;i<btns.length;i++){
            btns[i].onclick = function(){
                var temp = window.confirm("确定吗")
                if(temp){
                    this.parentNode.style.display = "none"
                }
            }
        }
    </script>

7.11 prompt输入型弹窗

 <script>
        var test = window.prompt("请输入","hello world");
        console.log(test)
    </script>

7.12 setInterval清除定时器

设置定时器的时候,会在window下挂载一个属性
clearInterval()清除定时器

<button id="btn">停止定时器</button>
    <script>
        var btn = document.getElementById("btn");
        var temp = setInterval(function() {
            console.log("2")
        },1000)
        btn.onclick = function(){
            clearInterval(temp);
        }
    </script>