JS(Dom事件操作)第十九

简介: JS(Dom事件操作)第十九

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

 

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

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

 

 

分析代码 得出自己的结论

事件三要素
- 事件源(谁):触发事件的元素
- 事件类型(什么事件): 例如 click 点击事件
- 事件处理程序(做啥):事件触发后要执行的代码(函数形式),事件处理函数

分析代码 得出自己的结论
 事件三要素
 - 事件源(谁):触发事件的元素
 - 事件类型(什么事件): 例如 click 点击事件
 - 事件处理程序(做啥):事件触发后要执行的代码(函数形式),事件处理函数 

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

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

 

<!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元素时

45d760d12d8c4f70bfc62765ca35b5bc.png
当我点击div时
1dcb92f2da0e405782af52b7e70d7821.png
单我点击BOTY元素时
<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>
相关文章
|
18天前
|
JavaScript
js 事件流、事件冒泡、事件捕获、阻止事件的传播
js 事件流、事件冒泡、事件捕获、阻止事件的传播
8 1
|
21天前
|
JavaScript
vue 全局响应键盘按键/监听键盘事件(含 js 获取键盘keyCode值的方法)
vue 全局响应键盘按键/监听键盘事件(含 js 获取键盘keyCode值的方法)
28 2
|
21天前
|
JavaScript 前端开发 索引
JavaScript编码之路 【JavaScript之操作数组、字符串方法汇总】(三)
JavaScript编码之路 【JavaScript之操作数组、字符串方法汇总】(三)
20 1
|
21天前
|
存储 JavaScript 前端开发
js/javascript 操作字符串【全】(含常用的操作字符串的lodash)
js/javascript 操作字符串【全】(含常用的操作字符串的lodash)
12 1
|
5天前
|
JavaScript 前端开发 API
前端框架与库 - jQuery基础与DOM操作
【7月更文挑战第18天】jQuery 是一个简化JavaScript任务的库,以其“write less, do more”理念著称。核心功能包括DOM操作、事件处理和Ajax。DOM操作如选择元素(`$(&quot;p&quot;)`、`$(&quot;#myDiv&quot;)`、`$(&quot;.myClass&quot;)`)、创建及添加元素、修改属性和内容。事件处理如绑定(`click`)和触发(`trigger`)。常见问题涉及`$`符号冲突(使用`jQuery`代替)、异步加载管理和选择器性能优化。了解并规避这些问题能提升jQuery使用效率。
|
17天前
|
JavaScript 容器
js【详解】事件
js【详解】事件
18 0
|
17天前
|
缓存 JavaScript API
js【详解】DOM
js【详解】DOM
10 0
|
17天前
|
JavaScript
js【详解】event loop(事件循环/事件轮询)
js【详解】event loop(事件循环/事件轮询)
17 0
|
20天前
|
JavaScript 前端开发 UED
|
21天前
|
移动开发 JavaScript 前端开发
VUE实现一个列表清单【props 父子组件通信、slot插槽的使用、全局自定义指令的封装、$nextTick解决异步DOM更新、巧用v-model简化父子组件之间的通信、触发事件的事件源event】
VUE实现一个列表清单【props 父子组件通信、slot插槽的使用、全局自定义指令的封装、$nextTick解决异步DOM更新、巧用v-model简化父子组件之间的通信、触发事件的事件源event】
11 0