js从菜鸟到精通day07-DOM事件

Mi Manchi卍.

已于 2023-08-26 14:07:15 修改

阅读量87

点赞数

文章标签： javascript 前端 css

于 2023-08-26 13:56:27 首次发布

本文链接：https://blog.csdn.net/weixin_63927136/article/details/132417636

版权

本文详细介绍了DOM事件的基础概念，包括事件三要素（触发元素、事件类型和处理程序），以及各种类型的鼠标、表单、键盘和窗口事件的示例。讲解了事件对象的使用、自定义函数中的`this`指向，以及如何通过DOM属性和addEventListener方法注册事件。还涉及了事件冒泡、阻止事件传播和默认行为的方法。

摘要由CSDN通过智能技术生成

DOM事件

6.1事件三要素

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

事件对象的使用

var box = document.getElementById('box');
 
  box.onclick = function(e){
      console.log(e)
      .........
  }

事件对象(event)的属性

this指向总结(重点)

自定义构造函数中this:指向实例化对象
普通函数中this:指向window
自定义对象的方法中this:指向当前对象
事件绑定的函数中的this:指向事件的绑定者

事件对象的兼容性写法

box.onclick = function(e) {
     // 事件对象
     //兼容IE8以下的写法
     e = e || window.event;
     var target = e.target || e.srcElement;
     console.log(target);
};

6.2. 事件的类型

6.2.1 鼠标事件(12个)

        // 获取元素
        var box = document.getElementsByClassName("box")[0];

        // 鼠标事件

        // 鼠标刚进入时触发 onmouseover
        // box.onmouseover = function(){
        //     console.log("鼠标刚进入");
        // }

        // 鼠标完全进入时 触发  onmouseenter
        // box.onmouseenter = function(){
        //     console.log("鼠标完全进入时触发");
        // }

        // 鼠标移动事件 触发  onmousemove
        // box.onmousemove = function () {
        //     console.log("鼠标移动触发")
        // }

        // 鼠标刚要离开 触发 onmouseout
        // box.onmouseout = function(){
        //     console.log("鼠标刚要离开触发");
        // }

        // 鼠标完全离开 触发 onmouseleave
        // box.onmouseleave = function(){
        //     console.log("鼠标完全离开");
        // }

        // 鼠标按下时触发 onmousedown
        // box.onmousedown = function(){
        //     console.log("按下触发");
        // }

        // 鼠标弹起触发 onmouseup
        // box.onmouseup = function(){
        //     console.log("弹起触发")
        // }

        // 鼠标单机触发 onclick 
        // box.onclick = function () {
        //     console.log("单机触发");
        // }

        // 鼠标双击触发 ondblclick
        // box.ondblclick = function(){
        //     console.log("双击触发");
        // }

        // 当鼠标滚轮被滚动时 运行的脚本  onmousewheel
        // document.onmousewheel = function(){
        //     console.log("鼠标滚轮被滚动");
        // }

        // 当元素的滚动条被滚动时 触发  onscroll
        // box.onscroll = function(){
        //     console.log("元素的滚动条动了");
        // }


        // 当用户右键打开菜单栏触发 oncontextmenu
        document.oncontextmenu = function () { 
            console.log("用户打开菜单栏了");
        }

        // document 也可以作为你的事件源
        // out 和 over  支持事件冒泡
        // enter 和 leave  不支持事件冒泡

6.2.2 表单事件(6个)

// 内容改变事件 onchange
        username.onchange = function () {
            // 内容改变且失去焦点
            console.log("内容改变了");
        }

        // 获取焦点事件  onfocus
        pwd.onfocus = function () {
            console.log("获取焦点");
        }

        // 失去焦点事件 onblur
        pwd.onblur = function () {
            console.log("失去焦点");
        }

        // 输入事件 oninput
        username.oninput = function () {
            console.log("输入事件触发");
        }

        txt.oninput = function () {
            // console.log("触发");
            console.log(this.value);
            console.log(this.value.length);
            title.innerText = "还可以输入" + (100 - this.value.length) + "个字"
        }


        // 表单提交事件 onsubmit  应该绑定给form
        _form.onsubmit = function () {
            alert("确定要提交吗?")
        }

        // 表单重置事件 onreset 绑给form 
        _form.onreset = function () { 
            alert("确定要重置吗")
        }

6.2.3 键盘事件(3个)

document.onkeydown = function (e) {
            console.log("键盘按下");
}
// document.onkeyup = function () { 
        //     console.log("键盘弹起");
        // }

        // document.onkeypress = function(){
        //     console.log("按着不松");
        // }

6.2.4 窗口事件(3个)

// 窗口事件 都是绑定给 window
        window.onload = function () {
            // 文档及其资源文件都加载完成时触发
            // 会等 DOM  图片、音频、视频等资源文件 加载完触发
            var box = document.getElementsByClassName("box")[0];
            console.log(box);
        }
// onload文档及其资源文件都加载完成时触发  
        // onresize事件会在窗口或框架被调整大小时发生。
        window.onresize = function () {
            console.log('窗口大小改变了');

        }

        // onunload 关闭网页时 本地存储

        window.onunload = function () {
            console.log("网页被关闭了");
        }

6.3. 注册事件处理程序

6.3.1 通过DOM元素属性注册事件处理程序

<button id="mybutton">点我</button>
<script> 
    var mybutton = document.getElementById('mybutton');
    mybutton.onclick = function() { 
        alert('Hello World');
    };
    
    mybutton.onclick = function() { 
    alert('Hi');
    };
</script>

6.3.2 使用addEventListener()方法注册事件处理程序

<button id="mybutton">点我</button>
<script>
    var mybutton = document.getElementById('mybutton');
        mybutton.addEventListener('click', function() { 
        alert('Hello World'); 
    }, false);
    mybutton.addEventListener('click', function() { 
        alert('Hi'); 
    }, false);
</script>

添加事件监听与 on 的区别：

on 绑定事件与添加事件监听 addEventListener 的区别
on绑定事件如果绑定了相同的多个事件那么后者会覆盖前者
addEventListener 添加的多个相同的事件则会按顺序执行
给元素添加事件一共三种方式
1.在开始标签上写 on事件名称="JS代码"
2.在script标签里面获取元素然后通过元素的属性添加事件 onclick
3.使用addEventListener 添加事件监听

6.4. 事件的传递过程(事件冒泡)

<script>
        // 获取父与子
        var box = document.getElementsByClassName("box")[0];
        var son = document.getElementsByClassName("son")[0];
        // 都绑定上 onmouseover 事件 鼠标刚进入事件
        // box.onmouseover = function(){
        //     console.log("父元素的进入事件");
        // }
        // son.onmouseover = function(){
        //     console.log("子元素的进入事件");
        // }
        // 1.解决办法
        box.onmouseenter = function () {
            console.log("父元素的进入事件");
        }
        son.onmouseenter = function () {
            console.log("子元素的进入事件");
        }
        // 当相互嵌套的两个元素绑定了相同的事件
        // 就会触发事件冒泡.
    </script>