DOM属性操作与事件

最新推荐文章于 2023-01-10 15:00:02 发布

鸡蛋灌饼1

最新推荐文章于 2023-01-10 15:00:02 发布

阅读量883

点赞数

文章标签： html 前端

本文链接：https://blog.csdn.net/jidanguanbing1/article/details/121864557

版权

本文深入解析鼠标移入移出、聚焦失去焦点、点击双击等基本事件，以及键盘按下抬起的处理，还有浏览器加载完成和滚动事件的使用。同时探讨了事件监听、冒泡机制和阻止默认行为的方法，以及元素属性操作和样式设置的各种途径。

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

1、鼠标事件

onmouseover鼠标移入事件：在鼠标指针移动到元素上时触发。支持冒泡

onmouseout 鼠标移出事件：在鼠标指针移出元素后触发

onmouseenter鼠标进入事件：在鼠标指针进入到元素上时触发。不支持冒泡

onmouseleave 鼠标离开事件：在鼠标指针离开元素后触发

onfocus获取焦点事件：在鼠标光标获取输入框焦点时触发

onblur失去焦点事件：在鼠标光标失去焦点时触发

onclick单击事件：在鼠标指针单击时触发

ondblclick双击事件：在鼠标光标双击时触发。

2、键盘事件

onkeydown：键盘按下

onkeyup:键盘抬起

3、浏览器事件

onload:浏览器加载完成执行

onscroll:滚动浏览器滚动条时触发

事件的进阶

1监听事件

绑定监听事件： addEventListener（“事件的类型”，事件处理的程序也就是函数）

box1.addEventListener("click", myFunc)
  function myFunc() {
    this.style.backgroundColor = "blue";
  }

2解绑监听事件：removeEventListener（“事件的类型”，事件的处理程序）

box1.removeEventListener("click", myFunc);

事件对象

任何事件都有event，事件对象的兼容性写法

var event = event || window.event;
// 事件的类型
    console.log(event.type);
    // 元素的ID
    console.log(event.target.id);
    // 文本的内容
    console.log(event.target.innerText);
    // 事件的触发点是距离浏览器左侧的横纵坐标
    console.log("横坐标：" + event.clientX + "," + "纵坐标：" + event.clientY);
    console.log("横坐标：" + event.pageX + "," + "纵坐标：" + event.pageY);
    console.log("我单击header!");

元素的坐标

1、clientX与clientY

clientX 事件属性返回当事件被触发时鼠标指针向对于浏览器页面（或客户区）的水平坐标。客户区指的是当前窗口。

clientY 事件属性返回当事件被触发时鼠标指针向对于浏览器页面（客户区）的垂直坐标。客户区指的是当前窗口。

2、pageX与e.pageY

pageX/Y：相对于文档边缘,包含滚动条距离

clientX/Y：相对于当前页面且不包含滚动条距离

有兼容性问题从IE9以后才支持,pageY = clientY + 页面滚动出去的距离

事件的冒泡

什么是冒泡事件

事件冒泡阶段：事件从事件目标(target)开始，往上冒泡直到页面的最上一级标签。
假设一个元素div，它有一个下级元素p。
<div>
　　<p>元素</p>
</div>
这两个元素都绑定了，如果用户点击了p，它在div和p上都触发了，那么就先出发p在出发div。这就是冒泡。

阻止冒泡：event.stopPropagation（）

阻止默认事件行为

什么元素有默认行为呢？如链接<a>，提交按钮<input type=”submit”>等。当Event 对象的 cancelable为false时，表示没有默认行为，这时即使有默认行为，调用preventDefault也是不会起作用的。

阻止a链接跳转

(1)、单return
<!-- 第一种方法 -->
  <a href="https://www.baidu.com" onclick="alert('单击链接了！'); return false">百度一下</a>
  <a href="https://www.baidu.com" onclick="fn1(); return false">百度两下</a>
 function fn1() {
    alert("单击链接了哈");
  }

第一种缺点：代码不分离，不符合低耦合，高内聚的规范

(2)、双return
<!-- 第二种方法 -->
  <a href="https://www.baidu.com" onclick="return fn2();">百度三下</a>
 function fn2() {
    alert("单击百度三了哈！");
    return false;
  }

第二种代码缺点同上

(3)、先获取再绑定

<!-- 第三种方法 -->
  <a href="https://www.baidu.com" id="link">百度四下</a>
  document.getElementById("link").onclick = function () {
    alert("单击百度四了哈！");
    return false;
  }

元素的属性操作

1.自定义属性

元素除了本身的属性还可以设置自定义属性

<div id="box1" class="box_1" name1="divObj">我是盒子</div>

(2)、获取属性

getAttribute("属性的名字")

getAttribute("属性"):不仅可以获取元素本身的属性的属性值，还可以获取元素自定义的属性的属性值

 console.log(in1.getAttribute("type"));//text
  console.log(in1.getAttribute("name"));//user
  console.log(in1.getAttribute("id"));//text1
  console.log(in1.getAttribute("style"));//color: re

3.设置属性

setAttribute("属性的名字","属性的值");

元素的属性的设置:不仅可以设置元素本身的属性，还可以设置元素自定义的属性

setObj1.onclick = function () {
    in1.setAttribute("name", "password");
    // in1.setAttribute("class", "");
    in1.className = "";
    // in1.setAttribute("style", "border:5px dotted pink");
    in1.style.border = "5px dotted pink";
    console.log(in1.getAttribute("name"));//password

4。移除属性

removeAttribute("属性"):不仅可以移除元素本身的属性，还可以移除元素自定义的属性

  var removeObj = document.getElementById("remove");
  removeObj.onclick = function () {
    in1.removeAttribute("class");
    div1.removeAttribute("name1");
  }

元素样式设置的几种方式