JS(Dom事件操作)第十九

发布于：2022-10-31 ⋅ 阅读:(272) ⋅ 点赞:(0)

JS(Dom事件操作)第十九 今天的内容又是事件

 

 事件这个词你是如何理解的呢！ 

鼠标单机事件触发按钮执行内容 

 

 

 

 分析代码 得出自己的结论

 事件三要素
 - 事件源（谁）：触发事件的元素
 - 事件类型（什么事件）： 例如 click 点击事件
 - 事件处理程序（做啥）：事件触发后要执行的代码(函数形式)，事件处理函数 
 <!--! 方法一 -->
<button οnclick="alert('单机按钮弹出事件内容信息为你已经开始了')">单机按钮弹出事件内容信息为你已经开始了</button>

<button οnclick="onclicks()">单机按钮弹出事件内容信息为你已经开始了</button>
 

    function all(){
        alert("我是自动执行的事件信息")
    }
    all()
   

    function onclicks(){
        alert("单机按钮弹出事件内容信息为你已经开始了")
    }
 

举出一个案例自己不能推出三个案例则不复也

案例一 常看到的事件操作代码实战

<!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>事件的文件基础信息</title>
    <style>
        * {
            background-color: rgb(0, 232, 232);
        }

        #input_text {
            border: 2px solid paleturquoise;
            width: 300px;
            height: 300px;
            margin: auto;
            background-color: red;
            color: white;
            border-radius: 12px;
            font-size: 30px;
        }


        #input_text1 {
            border: 2px solid rgb(20, 20, 20);
            width: 300px;
            height: 300px;
            margin: auto;
            background-color: rgb(255, 255, 255);
            color: rgb(247, 9, 9);
            border-radius: 12px;
            font-size: 30px;
        }

        .input_text1 {
            border: 2px rgb(255, 0, 0);
            width: 300px;
            height: 300px;
            margin: auto;
            background-color: rgb(255, 255, 255);
            color: rgb(255, 0, 0);
            border-radius: 12px;
            font-size: 30px;
        }

        .input_text2 {
            border: 1px rgb(0, 0, 0);
            width: 300px;
            height: 300px;
            margin: auto;
            background-color: rgb(255, 255, 255);
            color: rgb(255, 255, 255);
            border-radius: 12px;
            font-size: 30px;
            display: block;
        }
    </style>
</head>

<body onload="checkCookies()">
   
    
    <!--  事件三要素
    - 事件源（谁）：触发事件的元素
    - 事件类型（什么事件）： 例如 click 点击事件
    - 事件处理程序（做啥）：事件触发后要执行的代码(函数形式)，事件处理函数 -->
    <!-- 事件一 鼠标单机事件 -->
    <!-- onclick鼠标单机左边生效 -->
    <button id="input_text">我是用户的单机事件</button>
    <script>
        var btn = document.getElementById("input_text")
        console.log(btn)
        btn.onclick = function () {
            var ss=document.querySelector("#input_text")
            ss.textContent="我是自定义的函数的单机事件信息内容"
            alert("我是用户实现的单机事件")
            btn.style.backgroundColor = 'pink'
            btn.style.color = 'red'
            btn.addEventListener("click",function(){
                console.log("btn.addEventListener 创建单机事件")
            })
        }
    </script>

    <!-- ondblclick	鼠标双击时	鼠标 -->
    <button id="input_text1">我是用户的鼠标两次单机的事件</button>
    <script>
        var btn1 = document.querySelector("#input_text1")
        console.log(btn1)
        btn1.ondblclick = function () {
            confirm("我是用户的鼠标两次单机的事件")
            btn1.style.backgroundColor = 'green'
        }
        // onkeydown	键盘按下	键盘

        btn1.onkeydown = function () {
            window.alert("键盘按下的事件")
            btn1.style.height = '100px'
        }

        // onkeypress	键盘按键（含按下与抬起）	键盘

        btn1.onkeypress = function () {
            console.log("键盘按键（含按下与抬起）	键盘 事件")
            btn1.style.backgroundColor = 'yellow'
        }
    </script>


    <button class="input_text1">键盘抬起</button>
    <script>
        var btn2 = document.querySelector(".input_text1")
        // onkeyup	键盘抬起	键盘
        btn2.onkeyup = function () {
            alert("键盘抬起来使用的事件")
            btn2.style.height = '200px'
            btn2.style.color = 'black'
        }
        // onmousedown	鼠标按下时	鼠标
        btn2.onmousedown = function () {
            alert("onmousedown	鼠标按下时	鼠标")
            btn2.style.backgroundColor = 'yellow'
        }
        // 鼠标的移入移出事件 移出时
        // onmousemove	鼠标移动时	鼠标onmouseup	鼠标抬起时	鼠标onmouseout	鼠标移出时	鼠标 onmouseover	鼠标移入时	鼠标

        btn2.onmousemove = function () {
            btn2.style.backgroundColor = 'orange'
            btn2.style.height = '250px'
        }

        // 移出
        btn2.onmouseout = function () {
            btn2.style.backgroundColor = 'red'
            btn2.style.height = '400px'
            btn2.style.color = ' white'
        }
    </script>


    <button class="input_text2" onmouseover=sut()>鼠标移入事件</button>

    <script>
        function all() {
            var btn3 = document.querySelector(".input_text2")
            btn3.onmouseover = function () {
                btn3.style.backgroundColor = 'red'
                btn3.style.color = 'white'
            }
            // 移出
            btn3.onmouseout = function () {
                btn3.style.height = '400px'
                btn3.style.color = ' white'
                btn3.style.display = 'none'
            }
        }

        function sut() {
            all()

        }
    </script>



    <script>
        function checkCookies() {
            if (navigator.cookieEnabled == true) {
                alert("Cookies 可用")
            } else {
                alert("Cookies 不可用")
            }
        }
    </script>



</body>

</html>

案例二 事件冒泡

先看运行结果

当用户点击body元素时

 

当用户点击span标签时

 

当用户点击p标签时

 

当用户点击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>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: cornflowerblue;
            text-align: center;
            line-height: 200px;
        }

        span {
            border: 3px solid red;
            background-color: aliceblue;
            background-color: antiquewhite;
            height: 100%;
        }

        p {
            background-color: aquamarine;
            color: red;
        }

        body {
            background-color: aliceblue;
        }
    </style>

    <div>我是div
        <span>我是span
            <p>我是p标签的内容信息</p>
        </span>
    </div>

    <script>
        var body = document.body;
        var divel = document.querySelector("div");
        var spanel = document.querySelector("span");
        var pel = document.querySelector("p")

      

    </script>
</body>

</html>

  下面的this只代表这谁

        pel.onclick = function () {
            console.log(this.textContent);
        }
        spanel.onclick = function () {
            console.log(this.textContent);
        }
        divel.onclick = function () {
            console.log(this.textContent);
        }
        body.onclick = function () {
            console.log(this)
        }

        document.onclick = function () {
            console.log(this)
        }

        window.onclick = function () {
            console.log(this)
        }

事件的冒泡从来面到外面依次执行

案例三 事件捕获

先看运行的效果流程

当我点击p标签时候

 

当我点击span标签时

 

当我点击div时

 

单我点击BOTY元素时

   body.addEventListener("click", function (e) {
      console.log(this)
      console.log(e.type) //事件的类型
      console.log(e.clientX, e.clientY)  //客户端
      console.log(e.target)   //当前处理事件
      console.log(e.currentTarget)  //当前处理事件
      console.log(e.eventPhase)      //事件所处在的阶段
      console.log(e.offsetX, e.offsetY)  //事件发生的元素内
      console.log(e.pageX, e.pageY)   //事件发生在document的位置
      console.log(e.screenX, e.screenY)  // 相对屏幕的位置
  }, true)

<script>
    var body = document.body;
    var divel = document.querySelector("div");
    var spanel = document.querySelector("span");
    var pel=document.querySelector("p")
    divel.addEventListener("click",function(){
        window.dispatchEvent(new Event("ghjkl"))
    })
    window.addEventListener("ghjkl",function(e){
        console.log(e)
    })
    pel.onclick=function(){
        console.log(this.textContent);
    }
    spanel.onclick = function () {
        console.log(this.textContent);
    }
    divel.onclick = function (e) {
        console.log(this.textContent);
        console.log(this==divel)
        console.log(this===divel)
        e.stopPropagation()
        alert("组织")
    }
    body.onclick = function () {
        console.log(this)
    }
    document.onclick = function () {
        console.log(this)
    }
    window.onclick = function () {
        console.log(this)
    }
    // 事件捕获
    // 先捕获到目标事件然后在mao
    body.addEventListener("click", function (e) {
        console.log(this)
        console.log(e.type) //事件的类型
        console.log(e.clientX, e.clientY)  //客户端
        console.log(e.target)   //当前处理事件
        console.log(e.currentTarget)  //当前处理事件
        console.log(e.eventPhase)      //事件所处在的阶段
        console.log(e.offsetX, e.offsetY)  //事件发生的元素内
        console.log(e.pageX, e.pageY)   //事件发生在document的位置
        console.log(e.screenX, e.screenY)  // 相对屏幕的位置
    }, true)
    divel.addEventListener("click", function () {
    }, true)
    spanel.addEventListener("click", function (e) {
    }, true)
    document.addEventListener("click", function (e) {
    }, true)
    window.addEventListener("click", function (e) {
        console.log(this)
        console.log(this)
        console.log(e.type) //事件的类型
        console.log(e.clientX, e.clientY)  //客户端
        console.log(e.target)   //当前处理事件
        console.log(e.currentTarget)  //当前处理事件
        console.log(e.eventPhase)      //事件所处在的阶段
        console.log(e.offsetX, e.offsetY)  //事件发生的元素内
        console.log(e.pageX, e.pageY)   //事件发生在document的位置
        console.log(e.screenX, e.screenY)  // 相对屏幕的位置
    }, true)
</script>

网站公告

今日签到

点亮在社区的每一天
去签到

热门文章

最新发布