初学js Day08

每天只会嘻嘻嘻

已于 2024-08-31 10:32:01 修改

阅读量419

点赞数 9

文章标签： javascript 前端 vue.js

于 2024-08-31 10:31:51 首次发布

本文链接：https://blog.csdn.net/caiji76531/article/details/141474188

版权

一.DOM事件

二.事件对象

三.事件

事件分为单击事件、鼠标事件、键盘事件、窗口事件、表单事件

一.DOM事件

时间三要素：

1.事件源(给谁绑定事件)

2.事件类型（绑定一个什么事件）

3.事件处理程序（绑定事件后要干什么）

二.事件对象

事件对象即 event

btn.onclick = function (e) {
console.log("点我干啥");
console.log(e);
属性
事件的触发者
console.log(e.target);
}

var link = document.getElementsByTagName("a")[0];
link.onclick = function (e) {
console.log("点击a标签");
阻止默认事件
e.preventDefault();
}

三.事件

事件分为单击事件、鼠标事件、键盘事件、窗口事件、表单事件

1.单击事件

单击事件即单击某个按钮触发的事件叫做单击事件

var btn = document.getElementsByTagName("button")[0];
btn.onclick = function (e) {
console.log("点我干啥");
}

2.鼠标事件

鼠标刚进入（onmouseover）

鼠标完全进入（onmouseenter）

鼠标刚要离开（onmouseout）

鼠标完全离开（onmouseleave）

鼠标移动（onmousemove）

鼠标按下（onmousedown）

鼠标弹起（onmouseup）

鼠标双击（ondblclick）

鼠标滚轮滚动（onmousewheel）

3.键盘事件

键盘按下（onkeydown）

键盘按着不放（onkeypress）

键盘弹起（onkeyup）

4.窗口事件

资源加载完毕（onload）

窗口大小改变（onresize）

关闭窗口（onunload）

5.表单事件

内容改变事件（onchange）

获取焦点（onfocus）

失去焦点（onblur）

输入事件（oninput）

提交事件（onsubmit）

重置事件（onrest）

四.注册事件处理程序

        var box = document.getElementsByClassName("box")[0];
        // 1. on 事件
        // box.onclick = function () {
        //     console.log("on 事件");
        // }

        // box.onclick = function () {
        //     console.log("第二个事件");
        // }

        // 2.addEventListener()
        box.addEventListener("click", function () {
            console.log("事件1");
        });

        box.addEventListener("click", function () {
            console.log("事件2");
        });

五.事件冒泡

事件传递过程

事件捕获

目标阶段（事件执行）

事件冒泡：当为多个嵌套的元素设置了相同的事件处理程序，它们将触发事件冒泡机制。

在事件冒泡中，最外部的元素将首先触发其事件，然后是栈内的下一个元素触发该事件，以此类推直到到达最外面的元素，如果把事件处理程序指定给所有的元素，那么这些事件将依次触发

阻止事件冒泡

        var father = document.getElementsByClassName("father")[0];
        var son1 = document.getElementsByClassName("son1")[0];
        var son2 = document.getElementsByClassName("son2")[0];

        father.onmouseover = function (e) {
             console.log("进入" + e.target.className);
         }

        father.onclick = function () {
            console.log(this);
        }

        son1.onclick = function (e) {
            console.log(this);
            // 阻止事件冒泡
            e.stopPropagation();
        }

        son2.onclick = function (e) {
            console.log(this);
            // e.stopPropagation();

        }

六.循环绑定事件

循环绑定事件属于异步操作

七.事件委托

事件委托即将原本绑定在子元素身上的事件，现在绑定到父元素身上，利用事件冒泡机制和事件对象，触发当前事件

var nav = document.getElementsByClassName("nav")[0];
nav.onclick = function (e) {
      // 事件的触发者
      // console.log(e.target)
    e.target.style.backgroundColor = "pink";
}