JavaScript事件

渐悟离迷

于 2024-09-12 05:00:00 发布

阅读量1.4k

点赞数 28

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/2301_82060934/article/details/142152895

版权

JavaScript事件

绪论

事件：作为交互的重要组成成分，当用户访问web页面时，引起的一系列的操作。当操作执行时，某个事件也会执行，这时，事件处理函数代码也会执行。

事件有两种形式：

赋值式（DOM0级事件）//例如：div.onclick = function(){} 删除事件：div.onclick = null
事件监听器（DOM2级事件）

1. 事件监听器

添加事件监听器

addEventListener（不带on的事件名称，事件处理函数（可以是函数体，也可以是函数名），布尔值（表示冒泡或者捕获，可省略））//布尔值默认为false，即冒泡；

移除事件监听器

removeEventListener（事件名，处理函数）

2. 事件源

e.target //可以得到事件源，得到的是整个标签（包括其中的内容）

捕获

捕获是：当鼠标点击或触发DOM事件时（被触发DOM事件的这个元素被叫做事件源），浏览器会从根节点=>事件源（由外层到内层）进行事件传播。

冒泡

冒泡是：它的传播顺序与事件捕获相反，是从事件源=>根节点（由内层到外层）进行事件传播。

//阻止事件冒泡：e.stopPropagation();

3. 常见的事件类型

鼠标事件

click 点击

dblclick 双击

mousedown 按下

mouseup 释放

mouseover 移入

mouseout 移出

mousemove 移动

html事件

load 页面加载完毕

resize 窗口大小发生变化

scroll 滚动滚动条

举例：

//事件监听器
window.addEventListener("load", () => {
  console.log("页面加载完毕");
});
//赋值式
window.onload = () => {
  console.log("页面加载完毕");
};

select 选中文本

Input 文本框内容发生改变（Input 或 textarea）

change 内容改变并失去交点时触发

focus 获得焦点时触发

blur 失去焦点时触发

举例：

oInput.onselect = () => {
   console.log("选中文本时触发");
};

提交表单重置表单

submit 提交

reset 重置

let oForm = document.querySelector("form");
//赋值式
oForm.onsubmit = function () {
  alert("ok");
};
//事件监听器
oForm.addEventListener("submit", () => {
  alert("ook");
});

4. 事件对象

当一个事件发生时，会产生一个默认的对象，这个对象里包含了和事件相关的所有信息，我门可以通过给事件处理函数加一个参数来获取到这个事件对象

例如：

let oDiv = document.querySelector("div");

事件对象里表示距离的三组属性

鼠标距离页面的左边距和上边距

oDiv.addEventListener("click", (e) => {
        console.log(e.pageX, e.pageY);
      });

鼠标距离可视区域的左边距和上边距

oDiv.addEventListener("click", (e) => {
        console.log(e.clientX, e.clientY);
      });

鼠标距离直接操作那个元素（事件源）的左边距和上边距

oDiv.addEventListener("click", (e) => {
   console.log(e.offsetX, e.offsetY);
});//点盒子内的时候显示

document.addEventListener("click", (e) => {
   console.log(e.offsetX, e.offsetY);
}); //点击页面就显示（包括盒子内）

5. 键盘事件

键盘事件

keydown 键盘按下

keyup 键盘释放

keypress 键盘字符键按下（数字、字母）

例子：

let oInput = document.querySelector("input");
    oInput.onkeydown = function () {
    console.log("ok");
};//在文本框中按下任意键
document.onkeydown = function () {
    console.log("ok1");
};//在页面中按下任意键

事件对象的属性

判断是否按下了：ctrl、alt、shift

document.onkeydown = function (e) {
  console.log(e.ctrlKey, e.altKey, e.shiftKey); //布尔值
};

获取按键的键盘码

document.onkeydown = function(e){
    console.log(e.ctrlkey,e.altkey,e.shiftkey);
};

按住ctrl+enter发送消息

let ipt = document.querySelector("input");
let box = document.querySelector("div");
ipt.onkeydown = function(e){
    if(e.keyCode == 13 && e.ctrlkey){
        box.innerText += ipt.value;
        ipt.value == "";
    }
}

控制div的移动

let box = document.querySelector("div");
document.onkeydown = function(e){
    switch(e.keyCode){
        case 38:
            box.style.top = box.offsetTop - 10 + "px";
            break;
            case 39:
            box.style.left = box.offsetLeft + 10 + "px";
            break;
            case 40:
            box.style.top = box.offsetTop + 10 + "px";
            break;
            case 37:
            box.style.left = box.offsetLetf - 10 + "px";
            break;
    }
}

6. 默认行为及阻止默认行为

阻止默认行为 a标签的跳转

我们没有添加事件处理函数，但是事件触发时，会默认出现的效果
a标签的跳转表单的提交文本框的输入右键菜单
是阻止默认行为

 let sub = document.querySelector(".sub");
      let subUl = document.querySelector(".subUl");
      sub.addEventListener("click", (e) => {
        subUl.style.display = "block";
        e.preventDefault();//阻止默认行为
      });

阻止默认行为右键菜单

let oUl = document.querySelector("ul");
      let orename = document.querySelector("li");
      document.addEventListener("contextmenu", (e) => {
        e.preventDefault();
        let l = e.clientX;
        let t = e.clientY;
        oUl.style.display = "block";
        oUl.style.left = l + "px";
        oUl.style.top = t + "px";

        let _tar = e.target;

        orename.addEventListener("click", () => {
          let oInput = document.createElement("input");
          document.body.replaceChild(oInput, _tar);
          oInput.value = _tar.innerText;
          oUl.style.display = "none";
          oInput.addEventListener("blur", () => {
            document.body.replaceChild(_tar, oInput);
            _tar.innerText = oInput.value;
          });
        });
      });

7. 事件委托

事件委托：利用事件冒泡的原理，把本应该添加到某个DOM元素上的事件，添加给他的外层元素
目的：让新增的元素具有相同的事件好处：减少事件添加的次数，提高执行效率
新增的li也需要有事件

let oUl = document.querySelector("ul");
      let aList = document.querySelectorAll("li");
      /* for (let i = 0; i < aList.length; i++) {
        aList[i].onclick = function () {
          console.log("ok");
        };
      } */

      oUl.onclick = function (e) {
        //可以通过取到事件源的标签名
        // console.log(e.target.tagName);
        if (e.target.tagName == "LI") {
          console.log("ok");
        }
      };

      let oBtn = document.querySelector("button");
      oBtn.onclick = function () {
        for (let i = 0; i < 5; i++) {
          let oLi = document.createElement("li");
          oUl.appendChild(oLi);
        }
      };

8. 拖拽

let oDiv = document.querySelector("div");
      let maxL = window.innerWidth - oDiv.offsetWidth; //最大的left和最大的top
      let maxT = window.innerHeight - oDiv.offsetHeight;
      oDiv.onmousedown = function (e) {
        let x = e.offsetX;
        let y = e.offsetY;
        document.onmousemove = function (e) {
          let l = e.pageX - x;
          let t = e.pageY - y;

          //范围控制
          /*  l = l <= 0 ? 0 : l >= maxL ? maxL : l;
          t = t <= 0 ? 0 : t >= maxT ? maxT : t; */
          if (l <= 0) {
            l = 0;
          }
          if (t <= 0) {
            t = 0;
          }
          if (l >= maxL) {
            l = maxL;
          }
          if (t >= maxT) {
            t = maxT;
          }

          oDiv.style.left = l + "px";
          oDiv.style.top = t + "px";
        };
        document.onmouseup = function () {
          document.onmousemove = null;
        };
      };