学习webAPI第五天

今天学习事件
冒泡事件: 多个元素嵌套, 有层次关系, 如都注册了相同的事件, 若点击了里面的盒子, 会从里往外依次触发
阻止冒泡事件 e.stopPpropagetion()
ie8没有事件对象 ie8阻止冒泡事件 window.event.cancelBubble = true;
阻止默认的事件 return false
e.preventDefault
三个事件阶段
1 事件捕获阶段: 从外向内触发
2 事件目标阶段: 最开始选择的那个
3 事件冒泡阶段: 从里向外触发

同时给三个div注册点击事件
    var arr = [my$("dv3"), my$("dv2"), my$("dv1")];
    arr.forEach(function (element, index) {
        //给每一个绑定事件
        element.addEventListener("click", function (e) {
            // e.eventPhase   判断是什么事件阶段
            console.log(this.id+"========"+e.eventPhase);
        }, true)
        //  为false 是冒泡事件,  为true是捕获事件
    })



 //给同一个元素绑定不同的事件
    function f1(e) {
        switch (e.type){
            case "click":
                alert("好帅");
                break;
            case "mouseover":
                this.style.backgroundColor = "red";
                break;
            case "mouseout":
                this.style.backgroundColor = "cyan";
                break;
        }
    }

    my$("dv").onclick=f1;
    my$("dv").onmouseover=f1;
    my$("dv").onmouseout=f1;

BOM: 浏览器对象模型
在浏览器中有个顶级对象 : window
页面(文档)的顶级对象: document
页面中的内容都是属于浏览器

location对象:  地址栏的对象

console.log(window.location);

    //地址栏上#即后面的内容
    console.log(location.hash);
    //主机名和端口号
    console.log(location.host);
    //主机名
    console.log(location.hostname);
    //文件的路径
    console.log(location.pathname);
    //端口号
    console.log(location.port);
    //协议
    console.log(location.protocol);
    //搜索的内容
    console.log(location.search);

    my$("btn").onclick=function () {
        //点击跳转页面    (设置指定的地址)
        // location.href="http://www.baidu.com";
        //重新加载
        // location.reload();
        //替换地址   没有历史记录
        // location.replace("http://www.baidu.com");
    }

history对象
.back() 返回上一个历史记录
.forword() 返回下一个历史记录
.go() 取到指定的历史记录

星星代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #dv {
            width: 500px;
            height: 500px;
            background-color: black;
            position: relative;
        }

        #pp {
            font-size: 20px;
            color: gold;
            position: absolute;
        }
    </style>
</head>
<body>
<input type="button" value="星星亮" id="btn">
<div id="dv">
    <p id="pp">★</p>
</div>
<script src="common.js"></script>
<script>
    var timer;
    my$("btn").onclick = function () {
        clearInterval(timer);
        if (my$("btn").value=="星星亮") {
            timer = setInterval(function () {
                var x = parseInt(Math.random() * 450);
                var y = parseInt(Math.random() * 450);
                my$("pp").style.left = x + "px";
                my$("pp").style.top = y + "px";
            }, 100)
            my$("btn").value="星星暗"
        }else if (my$("btn").value=="星星暗") {
            clearInterval(timer);
            my$("btn").value="星星亮"
        }
    }

</script>
</body>
</html>

猜你喜欢