事件案例

1、事件对象

    <script>        var div = document.querySelector("div")        div.onclick = function(e) {            // 兼容性的写法！！！            var e = e || window.event;            console.log(e)            // 鼠标的x y轴坐标            console.log(e.clientX)            console.log(e.clientY)            console.log(e.target)// target 目标        }        // 1.event对象是一个事件对象！！！        // 2.只有事件存在，才会存在的。系统传递个过来的，不是自己定义的！！        // 3. 事件对象包含了一系列相关数据的集合 (事件相关的！！！    </script>

2、

  var ul = document.querySelector("ul")        // 当点击li的时候，ul绑定的click事件会不会执行？ 会执行，因为有冒泡事件！！！        ul.addEventListener("click", function(e) {            // 谁产生了事件就是谁！！！e.target 是事件源！！！            console.log(e.target)            // 谁绑定这个函数，this就是谁！！！            console.log(this) // ul            // 事件绑定的元素            console.log(e.currentTarget) // ul current 当前        })

3、冒泡事件

 var grandfather = document.querySelector(".grandfather")        var father = document.querySelector(".father")        var son = document.querySelector(".son")        grandfather.addEventListener("click", function() {            console.log("grandfather捕获阶段")        }, true)        grandfather.addEventListener("click", function() {            console.log("grandfather冒泡阶段")        }, false)        father.addEventListener("click", function() {            console.log("father捕获阶段")        }, true)        father.addEventListener("click", function() {            console.log("father冒泡阶段")        }, false)        son.addEventListener("click", function() {            console.log("son捕获阶段")        }, true)        son.addEventListener("click", function(e) {            console.log("son冒泡阶段")            // 1方式1 ：阻止冒泡            // e.stopPropagation()  // Propagation: 传播            // 2.方式2            e.cancelBubble = true; // cancel:取消  bubble:冒泡        }, false)

4、阻止默认事件

例如
 <!-- <a href="javascript:void(0)">点击一下</a> -->    <a href="http://www.baidu.com">点击一下</a>    <script>        var a = document.querySelector("a")        a.onclick = function(e) {            // 1.先弹出alert 2.跳转到了百度、、、 （href是一个浏览器的默认事件）            alert ("这是一个测试！！！")            // e.preventDefault(); // prevent: 阻止  default:默认            return false;        }        // 1.a  javascript:void(0)        // 2.e.preventDefault()        // 3.return false;    </script>

5、鼠标上的一些事件

     // click dblclick   double        // 给document        document.addEventListener("contextmenu", function(e) {  //网页中文字不能被选中            // alert("111")            e.preventDefault()        })        document.addEventListener("selectstart", function(e) {  //鼠标右击不会显示菜单            e.preventDefault()        })

6、鼠标跟随事件

        var img = document.querySelector("img")        document.addEventListener("mouseover", function(e) {            // clientX   可视区域的X             // pageX     文本文档中的X            // screeX    在电脑屏幕中X            // 1.获取鼠标的位置            var x = e.pageX;            var y = e.pageY;            img.style.left = x - 50 + "px"            img.style.top = y - 50 + "px"        })

7、onload 和 window.onload区别

8、窗口变化事件load  resize

    <script>        window.addEventListener('load', function() {            var div = document.querySelector("div")            // resize 是监听窗口变化！！！这个监听，一旦窗口发生变化，就执行函数！！！            window.addEventListener('resize', function() {                // 窗口的宽度                console.log(window.innerWidth)                if(window.innerWidth >= 600) {                    div.style.background = "red"                }else {                    div.style.background = "blue"                }            })        })    </script>

9、倒计时

 <div>        <span class="hour"></span>        <span class="minute"></span>        <span class="second"></span>    </div>    <script>        var hour = document.querySelector(".hour")        var minute = document.querySelector(".minute")        var second = document.querySelector(".second")        function cutDown() {            var nowTime = +new Date();            var endTime = +new Date("2020-3-24 16:00:00")            var offsetTime = (endTime - nowTime)/1000;            var h = parseInt(offsetTime / 60 / 60 % 24);            var m = parseInt(offsetTime / 60 % 60)            var s = parseInt(offsetTime % 60);            h = h < 10 ? '0' + h : h;            m = m < 10 ? '0' + m : m;            s = s < 10 ? '0' + s : s;            // 需要把值放入dom元素中去            hour.innerText = h;            minute.innerText = m;            second.innerText = s;        }        // 每隔1000ms就会执行cutDown函数！！！        var timer = setInterval(cutDown, 1000)        // clearInterval(timer) 清除定时器    </script>

10、短信验证码

    手机号: <input type="number"> <button>发送验证码</button>    <script>        //         var btn = document.querySelector("button")        var time = 5;        var timer = null;        btn.addEventListener("click", function() {            timer = setInterval(function() {                if(time == 0) {                    clearInterval(timer);                    btn.innerText = "重新发送验证码"                    btn.disabled = false                    time = 5;                }else {                    btn.disabled = true                    btn.innerHTML = "(" + time + ")"                    time--;                }                            }, 1000)        })    </script>

11、location函数

 <button>点击</button>    <script>        var btn = document.querySelector("button")        btn.onclick = function() {            // 能够记录浏览器的浏览历史可以实现后退功能！！            // location.assign("http://www.baidu.com")            // 不能够记录浏览历史，也不可以回退！！！            // location.replace("http://www.baidu.com")            location.reload();        }    </script>