JS ＜2＞_a pointing device button has been pressed and rele-CSDN博客

本文链接：https://blog.csdn.net/weixin_43918232/article/details/122914253

DOM

文档对象模型 (DOM) 是HTML和XML文档的编程接口。它提供了对文档的结构化的表述，并定义了一种方式可以使从程序中对该结构进行访问，从而改变文档的结构，样式和内容。DOM 将文档解析为一个由节点和对象（包含属性和方法的对象）组成的结构集合。简言之，它会将web页面和脚本或程序语言连接起来。

DOM 是网页的结构模型，允许脚本语言访问该页面。
DOM 中的组织系统模仿 HTML 文档的嵌套结构。
嵌套在另一个元素中的元素称为该元素的子元素。它们嵌套在其中的元素称为这些元素的父元素。
DOM 还允许访问 HTML 元素的常规属性，例如样式、id 等。

重要的数据类型

`document`	当一个成员返回 `document` 对象（例如，元素的 `ownerDocument` 属性返回它所属于 `document` ) ，这个对象就是root `document` 对象本身。 DOM document Reference 一章对 `document` 对象进行了描述。
`element`	`element` 是指由 DOM API 中成员返回的类型为 `element` 的一个元素或节点。例如， document.createElement() 方法会返回一个 `node` 的对象引用，也就是说这个方法返回了在DOM中创建的 `element`。 `element` 对象实现了 DOM `Element` 接口以及更基本的 `Node` 接口，参考文档将两者都包含在内。
`nodeList`	`nodeList` 是一个元素的数组，如从 document.getElementsByTagName() 方法返回的就是这种类型。 `nodeList` 中的条目由通过下标有两种方式进行访问： list.item(1) list[1] 两种方式是等价的，第一种方式中 `item()` 是 `nodeList` 对象中的单独方法。后面的方式则使用了经典的数组语法来获取列表中的第二个条目。
`attribute`	当 `attribute` 通过成员函数 (例如，通过 `createAttribute()`方法) 返回时，它是一个为属性暴露出专门接口的对象引用。DOM中的属性也是节点，就像元素一样，只不过您可能会很少使用它。
`namedNodeMap`	`namedNodeMap` 和数组类似，但是条目是由name或index访问的，虽然后一种方式仅仅是为了枚举方便，因为在 list 中本来就没有特定的顺序。出于这个目的， `namedNodeMap` 有一个 item() 方法，你也可以从 `namedNodeMap` 添加或移除条目。

选择和修改元素

1 .querySelector()方法允许我们指定一个 CSS 选择器，然后返回与该选择器匹配的第一个元素。

document.querySelector('p');

2 如果你想直接通过他们访问元素id，你可以使用恰当命名的.getElementById()方法：

document.getElementById('bio').innerHTML = 'The description';
//该示例链接，以便它选择 ID 为 'bio' 的元素并将其设置.innerHTML为 text 'The description'。

修改元素样式

语法：元素.style.样式名 = "样式值"

注意：如果CSS的样式名中含有-，修改为驼峰命名法。

document.querySelector('body').style.backgroundColor='#201F2E';

我们通过style属性设置的样式都是内联样式，而内联样式有较高的优先级，所以通过JS修改的样式往往会立即显示。
若写了!important，则此时样式会有最高的优先级，即使通过JS也不能覆盖该样式，此时将会导致JS修改样式失效。所以尽量不要为样式添加!important

创建和插入元素

.createElement(tagName)可基于作为参数传递给它的指定标签名称创建一个新元素。

为了创建一个元素并将其添加到网页中，您必须将其指定为 DOM 上已存在的元素的子元素。。使用appendChild()将添加一个子元素作为最后一个子节点。

//创建一个新的段落元素，给它一个id，将文本添加到新元素的.innerHTML中，并将它附加到文档的正文中
let paragraph = document.createElement('p');
 
paragraph.id = 'info'; 
 
paragraph.innerHTML = 'The text inside the paragraph';
 
document.body.appendChild(paragraph);

移除一个元素

除了从头修改或创建元素之外，DOM 还允许删除元素。.removeChild()方法从父级中删除指定的子级。.

querySelector()只删除嵌套在该父元素中的元素，也可以使用该方法指定不同的父元素。querySelector()返回第一段，以下代码将删除第一段：

let paragraph = document.querySelector('p');
document.body.removeChild(paragraph);

隐藏一个元素，使它最初不加载，.hidden属性可通过将其指定为 true 或 false 来隐藏它：

document.getElementById('sign').hidden = true;

事件对象

当事件的响应函数被触发时，浏览器每次都会将一个事件对象作为实参传递进响应函数，在事件对象中封装了当前事件相关的一些信息。比如：鼠标的坐标……

注意：在IE8中浏览器被触发时，浏览器不会传递事件对象，在IE8及以下浏览器中，是将事件对象作为window对象的属性保存的。

onmousemove：该事件将会在鼠标在元素中移动时被触发
clientX：可以获取鼠标指针的水平坐标
clientY：可以获取鼠标指针的垂直坐标

例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			#div1{
				width: 300px;
				height: 50px;
				margin-bottom: 10px;
				border: 1px solid black;
			}
			#div2{
				width: 300px;
				height: 20px;
				border: 1px solid black;
			}
		</style>
		<script type="text/javascript">
			window.onload = function(){
				/*
				 * 当鼠标在div1中移动时，在div2中来显示鼠标的坐标
				 */
				//获取两个div
				var div1 = document.getElementById("div1");
				var div2 = document.getElementById("div2");
				
				div1.onmousemove = function(event){
					//兼容IE8及以下浏览器
//					if(!event){
//						event = window.event;
//					}
					
					event = event ||window.event;
					
					var x = event.clientX;
					var y = event.clientY;
	
					//在div2中显示鼠标的坐标
					div2.innerHTML = "x="+x+"，y="+y;
				};
			};
			
		</script>
	</head>
	<body>
		<div id="div1"></div>
		<div id="div2"></div>
	</body>
</html>

事件绑定

使用 对象.事件 = 函数 的形式绑定响应函数

注意：它只能同时为一个元素的一个事件绑定一个响应函数

let element = document.querySelector("button");

function turnButtonRed (){
	element.style.backgroundColor = "red";
  element.style.color = "white";
  element.innerHTML = "Red Button"; 
}

element.onclick = turnButtonRed;

addEventListener() 绑定响应函数

参数：
①事件的字符串，不要on
②回调函数，当事件触发时该函数会被调用
③是否在捕获阶段触发事件，需要一个布尔值，一般都传false

注意：使用addEventListener()可以同时为一个元素的相同事件同时绑定多个响应函数，这样当事件被触发时，响应函数将会按照函数的绑定顺序执行。这个方法不支持IE8及以下的浏览器。

示例：弹出框会依次弹出1 2 3

<script type="text/javascript">
			
			window.onload = function(){		
				/*
				 * 点击按钮以后弹出一个内容
				 */
				//获取按钮对象
				var btn01 = document.getElementById("btn01");
				btn01.addEventListener("click",function(){
					alert(1);
				},false);
				
				btn01.addEventListener("click",function(){
					alert(2);
				},false);
				
				btn01.addEventListener("click",function(){
					alert(3);
				},false);
				
			};
		</script>

let readMore = document.getElementById('read-more');
let moreInfo = document.getElementById('more-info');

// Write your code here:
function showInfo(){
  moreInfo.style.display = 'block';
}

readMore.addEventListener('click', showInfo);

取消

eventTarget.removeEventListener('click', eventHandlerFunction);

attachEvent()：在IE8中可以使用attachEvent()来绑定事件

参数：
①事件的字符串，要on
②回调函数

注意：这个方法也可以同时为一个事件绑定多个处理函数，不同的是它是后绑定先执行，执行顺序和addEventListener()相反。

attachEvent()中的this，是window

示例：弹出框会依次弹出 3 2 1

<script type="text/javascript">
			
			window.onload = function(){		
				/*
				 * 点击按钮以后弹出一个内容
				 */
				//获取按钮对象
				var btn01 = document.getElementById("btn01");
				btn01.attachEvent("onclick",function(){
					alert(1);
				});
				
				btn01.attachEvent("onclick",function(){
					alert(2);
				});
				
				btn01.attachEvent("onclick",function(){
					alert(3);
				});
			};
		</script>

定义一个函数，用来为指定元素绑定响应函数

参数：obj要绑定事件的对象 eventStr 事件的字符串(不要on) callback回调函数

function bind(obj , eventStr , callback){
	if(obj.addEventListener){
		//大部分浏览器兼容的方式
		obj.addEventListener(eventStr , callback , false);
	}else{ 
		/*
		 * this是谁 由调用方式决定
		 * callback.call(obj)
		 */
		 //IE8及以下
		obj.attachEvent("on"+eventStr , function(){
		//在匿名函数中调用回调函数
		callback.call(obj);
	 	});	
	}
}

事件参考

发送DOM事件是为了将发生的相关事情通知代码。每个事件都是继承自Event 接口的对象，可以包括自定义的成员属性及函数用于获取事件发生时相关的更多信息。事件可以表示任何从基本的用户交互、到发生在渲染模型自动通知的任何事情。

鼠标事件

Event Name Fired When auxclick A pointing device button (ANY non-primary button) has been pressed and released on an element. click (en-US) 在元素上按下并释放任意鼠标按键。 contextmenu (en-US) 右键点击（在右键菜单显示前触发）。 dblclick (en-US) 在元素上双击鼠标按钮。 mousedown (en-US) 在元素上按下任意鼠标按钮。 mouseenter (en-US) 指针移到有事件监听的元素内。 mouseleave (en-US) 指针移出元素范围外（不冒泡）。 mousemove (en-US) 指针在元素内移动时持续触发。 mouseover (en-US) 指针移到有事件监听的元素或者它的子元素内。 mouseout (en-US) 指针移出元素，或者移到它的子元素上。 mouseup (en-US) 在元素上释放任意鼠标按键。 pointerlockchange (en-US) 鼠标被锁定或者解除锁定发生时。 pointerlockerror (en-US) 可能因为一些技术的原因鼠标锁定被禁止时。 select (en-US) 有文本被选中。 wheel (en-US) 滚轮向任意方向滚动。

练习1

let itemOne = document.getElementById('list-item-one');
let itemTwo = document.getElementById('list-item-two');
let itemThree = document.getElementById('list-item-three');
let itemFour = document.getElementById('list-item-four');
let itemFive = document.getElementById('list-item-five');
let resetButton = document.getElementById('reset-button');

let reset = function() {
  itemOne.style.width = ''
  itemTwo .style.backgroundColor = ''
  itemThree.innerHTML = 'The mouse must leave the box to change the text'
  itemFive.style.display = "none"
};
resetButton.onclick = reset;

// Write your code here
function increaseWidth(){
  itemOne.style.width = '500px';
}

itemOne.addEventListener('mouseover', increaseWidth);

function changeBackground(){
  itemTwo.style.backgroundColor = 'green';
}

itemTwo.addEventListener('mouseup', changeBackground);

function changeText(){
  itemThree.innerHTML = 'The mouse has left the element';
}

itemThree.addEventListener('mouseout', changeText);

function showItem(){
  itemFive.style.display = 'block';
}

itemFour.addEventListener('mousedown', showItem);

效果：