1.回顾

1.window

    -alter():警告框
    -prompt():输入框
    -confirm()：确认框
    -close() :关闭
- setInterval() :多少周期调用一次
-setTimeount()：延迟调用一次
-clearInterval()：
-clearTimeout()

2.document

3.调用匿名函数

调用匿名函数.png

4.js事件

1.在标签上使用onXXX属性来进行事件绑定

2.通过代码获取标签来绑定onclick属性
<body>
        <button id="bt1">按钮1</button>
        
        <script type="text/javascript">
            var bt1 = document.getElementById("bt1");
            bt1.onclick = sayHellow;

            function sayHellow(){
                window.alert("你好！")
            }
        </script>
    </body>

3.通过代码获取标签然后使用addEventListener事件绑定
<body>
        <button id="bt1">按钮1</button>
        
        <script type="text/javascript">
            var bt1 = document.getElementById("bt1");
            //绑定事件的回调函数(callback function)
// 你知道事件发生的时候要做什么但不知道事件什么时候发现
//这个时候都是通过绑定回调函数将来由其他地方来调用函数。
            bt1.addEventListener("click",sayHellow);
            bt1.addEventListener("click",sayGoodbye);
            bt1.addEventListener("click",function(){
                
                //取消绑定事件
                bt1.removeEventListener("click",sayHellow)
            });

            function sayHellow(){
                window.alert("你好！");
            }
            
            function sayGoodbye(){
                window.alert("拜拜");
            }
        </script>
    </body>
'''
相同属性只能绑定一次
'''

js库封装

function bind(elem,event,fn){
    if (elem.addEventListener){
        elem.addEventListener(event,fn)
    }else{
        elem.attachEvent("on"+event,fn)
    }
}


function unbin(elem,en,fn){
    if (elem.removeEventListener){
        elem.removeEventListener(en,fn)
    }else{
        elem.detachEvent("on"+en,fn)
    }
    
}

5.回调函数取事件源

    <body>
        <div id="buttons">
            <button>button1</button>
            <button>button2</button>
            <button>button3</button>
            <button>button4</button>
            <button>button5</button>
        </div>
        <script src="js/myjs.js"></script>
        <script type="text/javascript">
            var buttons = document.querySelectorAll("#buttons>button");
            //var buttons = document.getElementById("buttons").children;
            for(var i = 0;i < buttons.length;i += 1){
                //如果希望在事件回调函数中获得事件源(引发事件的标签)
                // 应该通过事件对象的target属性去获取事件源
                bind(buttons[i],"click",function(evt){
                    //浏览器兼容问题
                    evt = evt || window.event;
                    evt.target = evt.target || evt.srcElement;
                    evt.target.textContent = "欧耶";
                })
            }
        </script>
    </body>

6.事件回调函数和事件对象

-绑定事件监听器的函数都需要传入事件的回调函数
-程序员知道事件发生的时候需要做什么样的处理但是不知道事件什么时候发生
-所以传入一个函数在将来发生事件的时候由系统进行调用这种函数就叫回调函数。

2.回调函数的第一个参数代表事件对象（封装了和事件相关的所有信息）
-对于低版本的IE 可以用过window.event来获取事件对象。
a
-事件对象的属性和方法：
-tartget / srcElement ------事件源（引发事件的标签）

b.阻止事件的默认行为
evt.prevent();
form.submit()

    <body>
        <a id="about" href="http://www.baidu.com">百度</a>
        
        <script src="js/myjs.js"></script>
        
        <script>
            var about = document.getElementById("about");
            bind(about,"click",function(evt){
                evt = evt || window.event;
                if (evt.preventDefault){
                    evt.preventDefault()
                }else{
                    evt.returnValue = false;
                }
            })
            
            
        </script>
        
    </body>

3.处理事件有两种顺序：事件冒泡(默认,从内向外)，事件捕获（true，从外向内）

function bind(elem,event,fn){
    if (elem.addEventListener){
        elem.addEventListener(event,fn,true)
    }else{
        elem.attachEvent("on"+event,fn)
    }
}

-如果要阻止事件的传播行为（例如阻止事件冒泡）可以使用

evt.stopPropagation() 
evt.cancelBubble = true (IE浏览器中)

7.猜数字游戏

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <input type="number" name="" id="input" placeholder="请输入数字"/>
        <button id="button">确定</button>
        <button id="button1">再来一次</button>
        <p id="p"> </p>
        <script type="text/javascript">
            var number = parseInt(Math.random()*100+1);
            var input = document.getElementById("input");
            var button = document.getElementById("button");
            var p = document.getElementById("p");
            console.log(number)
            button.addEventListener("click",test);
            var count = 0;
            
            var button1 = document.getElementById("button1");
            button1.addEventListener("click",function(){
                button.disabled = false;
                number = parseInt(Math.random()*100+1);
                p.innerHTML = ""
                console.log(number)
            })
            
            function test(){
                if (input.value > number){
                    p.innerHTML += "输入的"+input.value+"大了"+"<br>";   
                    count += 1
                }else if (input.value < number){
                    p.innerHTML += "输入的"+input.value+"小了"+"<br>";   
                    count += 1
                }else{
                    count += 1
                    p.innerHTML += "恭喜你猜对了数字是,"+input.value+"一共猜了"+count+"次";
                    button.disabled = true; 
                }
                input.value = ""
                input.focus()
            }
            
            input.addEventListener("keydown",function(evt){
                evt = evt || window.event;
                if (evt.keyCode == 13 || evt.which == 13) {
                    test();
                }
            });
            
            
                    
                    
        </script>
    </body>
</html>

2018-09-26 day25