JavaScript第二部分-CSDN博客

本文链接：https://blog.csdn.net/weixin_44399428/article/details/127219724

1.事件流

1）事件流：描述的是在页面中接受事件的顺序。

2）事件冒泡：由最具体的元素接收，然后逐级向上传播至最不具体的元素的节点。

3）事件捕获：最不具体的节点先接收事件，而最具体的节点应该是最后接收事件。

//事件冒泡：程序从button开始，然后div，最后是标题
//事件捕获：相反
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="div">
        <button id="btn1">按钮</button>
    </div>
</body>
</html>

2.事件处理

1)HTML事件：直接添加到HTML结构中

2）DOM0级事件处理：把一个函数赋值给一个事件处理程序属性

3）DOM2级事件处理：addEventListener("事件名"，"事件处理函数"，”布尔值“)；true：事件捕获

false：事件冒泡 removeEventListener()；事件移除

<body>
    <div id="div">
        <button id="btn1">按钮</button>
    </div>
//按顺序执行，后边的会覆盖前边的
    <script>
        var btn1 = document.getElementById("btn1");
        btn1.onclick = function (){alert("Hello DOM0级事件处理程序1")};//被覆盖
        btn1.onclick = function (){alert("Hello DOM0级事件处理程序2")};//被覆盖
        btn1.onclick = function (){alert("Hello DOM0级事件处理程序3")};
    </script>
//获取id，执行功能模块
    <script>
        var btn1 = document.getElementById("btn1")
        btn1.addEventListener("click",demo1);
        btn1.addEventListener("click",demo2);
        btn1.addEventListener("click",demo3);
        function demo1(){
            alert("DOM2级事件处理程序1")
        };
        function demo2(){
            alert("DOM2级事件处理程序2")
        };
        function demo3(){
            alert("DOM2级事件处理程序3")
        };
//移除功能
        btn1.removeEventListener("click",demo2);
    </script>
</body>

3.时间对象

1）事件对象：在触发DOM事件的时候都会产生一个对象

2）事件对象event：

type：获取事件类型

target：获取事件目标

stopPropagation（）：阻止事件冒泡

preventDefault（）：阻止事件默认行为

<div id="div">
    <button id="btn1">按钮</button>
    <a href="http://www.jikexueyuan.com" id="aid">极客学院</a>
</div>
//获取事件的类型
<script>
        document.getElementById("btn1").addEventListener("click",Type);
        function Type(event){
            alert(event.type);
        }
</script>
//获取事件目标
<script>
        document.getElementById("btn1").addEventListener("click",Type);
        function Type(event){
            alert(event.target);
        }
</script>
//事件的冒泡，仅点击button，会弹出div，先执行button，然后向上执行div
    <script>
        document.getElementById("btn1").addEventListener("click",Type);
        document.getElementById("div").addEventListener("click",showDiv);
        document.getElementById("aid").addEventListener("click",showA);
        function Type(event){
            alert(event.target);
            //阻止事件冒泡，不会弹出div
            event.stopPropagation();
        }
        function showDiv(){
            alert("div");
        }
        function showA(event){
            //阻止事件冒泡,向上运行
            event.stopPropagation();
            //阻止事件默认行为，比如跳转网页
            event.preventDefault();
        }
    </script>

4.内置对象

<body>
    <!-- 创建对象 -->
    <script>
        //方法一:直接创建对象
        people = new Object();
        people.name = "iwen";
        people.age = "30";
        document.write("name:"+people.name + ", age:"+people.age);
        people = {name:"iwen", age:"30"};
        document.write("name:"+people.name+", age:"+people.age);
        //方法二:使用function
        function people(name,age){
            this.name=name;
            this.age=age;
        }
        son = new people("iwen", 30);
        document.write("name:"+son.name+", age:"+son.age);
    </script>
</body>

5.String字符串对象

1）String对象：String对象用于处理已有的字符串，字符串可以使用双引号或单引号

2）在字符串中查找字符串返回其位置：indexOf()

3）内容匹配返回内容：match()

4）替换内容：replace()

5）字符串大小写转换：toUpperCase()/toLowerCase()

6）字符串转为数组：strong>split()

    <script>
        var str = "Hello World";
        var str1 = "hello,jilike,xueyuan";
        //匹配一个字符串是否存在，存在返回字符串位置，不存在返回-1
        document.write(str.indexOf("World"));
        //匹配一个字符串是否存在，存在返回此字符串，不存在返回null
        document.write(str.match("World"));
        //将打印内容进行替换,第一个参数为本来存在的，第二个参数为要替换的
        document.write(str.replace("World","jikexueyuan"));
        //全部转化为大写
        document.write(str.toUpperCase());
        //全部转化为小写
        document.write(str.toLowerCase());
        //字符串转为数组
        var s = str1.split(",");
        document.write(s[0]);
    </script>

6.Date对象

1）Date对象：日期对象用于处理日期和时间

2）获取当日的日期

3）常用方法：getFullYear()：常用年份 getTime()：获取毫秒

getFullYear()：设置具体的日期 getDay()：获取星期

小闹钟写法
<body onload="startTime">
    <script>
        function startTime(){
            var today = new Date();
            var h = today.getHours();
            var m = today.getMinutes();
            var s = today.getSeconds();
            m = checkTime(m);
            s = checkTime(s);
            document.getElementById("timetext").innerHTML = h+":"+m+":"+s;
            t = setTimeout(function(){
                startTime();
            },1000);
        }

        function checkTime(i){
            if(i<10){
                i = "0"+i
            }
            return i;
        }
    </script>
    <div id="timetext"></div>
</body>