JS学习笔记（九）BOM对象学习/元素样式的读取和修改/事件性质学习/事件函数举例_怎么在javascript的bom中对元素的样式，内容，属性进行设置-CSDN博客

本文链接：https://blog.csdn.net/CSmengy473/article/details/119085430

JS学习笔记（九）

JS学习笔记（九）
存档P110和window的一系列函数。

一、BOM对象

BOM - browser object model 浏览器对象模型
BOM提供了一组对象，可以使我们通过JS来操作浏览器。

如下这些BOM对象在浏览器中都是作为window对象的属性保存的，可以通过window对象来使用，也可以直接使用。

			console.log(window.navigator);
			console.log(location);
			console.log(history);

1.window

window代表的是整个浏览器的窗口，同时window也是网页中的全局对象。

2.navigator

代表的当前浏览器的信息，通过该对象可以来识别不同的浏览器。

在这里插入图片描述

			var ua = navigator.userAgent;
			
			console.log(ua);
			
			if(/firefox/i.test(ua)){
				alert("你是火狐！！！");
			}else if(/chrome/i.test(ua)){
				alert("你是Chrome");
			}else if(/msie/i.test(ua)){
				 alert("你是IE浏览器~~~");
			}else if("ActiveXObject" in window){
				alert("你是IE11，枪毙了你~~~");
			}

如果通过UserAgent不能判断IE11，还可以通过一些浏览器中特有的对象，来判断浏览器的信息，比如：ActiveXObject。


			if("ActiveXObject" in window){
				alert("你是IE，我已经抓住你了~~~");
			}else{
				alert("你不是IE~~~");
			}

3.location

封装了当前浏览器的地址栏信息。通过Location可以获取地址栏信息，或者操作浏览器跳转页面

直接打印location，则可以获取到地址栏的信息（当前页面的完整路径）

			alert(location);

直接将location属性修改为一个完整的路径/相对路径,页面会自动跳转到该路径，并且会生成相应的历史记录。

			location = "http://www.baidu.com";
			location = "01.BOM.html";

location.assign() 跳转到其他的页面，作用和直接修改location一样

			location.assign("http://www.baidu.com");

location.reload() 重新加载当前页面，作用和刷新按钮一样
如果在方法中传递一个true，作为参数，则会强制清空缓存刷新页面
location.replace() 使用一个新的页面替换当前页面，调用完毕也会跳转页面；不会生成历史记录，不能使用回退按钮回退。

4.history

代表浏览器的历史记录，可以通过该对象来操作浏览器的历史记录。

由于隐私原因，该对象不能获取到具体的历史记录，只能操作浏览器向前或向后翻页。
该操作只在当次访问时有效。

属性 length history.length可以获取到当成访问的链接数量
方法 back() history.back()回退到上一个页面，作用和浏览器的回退按钮一样
方法 forward() history.forward()跳转下一个页面，作用和浏览器的前进按钮一样
方法 go() history.go()需要一个整数作为参数,用来跳转到指定的页面;正数向前跳转，负数向后回退。

5.screen

代表用户的屏幕的信息，通过该对象可以获取到用户的显示器的相关的信息。

二、元素样式

1.通过JS修改元素样式

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

注意：

如果CSS的样式名中含有-，这种名称在JS中是不合法的比如background-color
需要将这种样式名修改为驼峰命名法，去掉-，然后将-后的字母大写。
我们通过style属性设置的样式都是内联样式，而内联样式有较高的优先级，所以通过JS修改的样式往往会立即显示。
如果在样式中写了**!important**，则此时样式会有最高的优先级，即使通过JS也不能覆盖该样式，此时将会导致JS修改样式失效，所以尽量不要为样式添加!important。

2.通过JS读取元素内联样式

语法： 元素.style.样式名

通过style属性设置和读取的都是内联样式，无法读取样式表中的样式。

3.通过JS读取元素非内联样式

在IE浏览器中 获取元素当前显示的样式语法：元素.currentSyle.样式名。
在其他浏览器，但不包括E8及以下的浏览器 ，可以使用**getComputedStyle()**方法来获取元素当前的样式。**getComputedStyle()**方法需要两个参数 第一个：要获取样式的元素第二个：可以传递一个伪元素，一般都传null。该方法会返回一个对象，对象中封装了当前元素对应的样式,可以通过对象.样式名来读取样式。（建议使用）

currentStyle只有IE浏览器支持，其他的浏览器都不支持。
currentStyle方法读取元素样式，如果获取的样式没有设置，会获取它的默认值。。
getComputedStyle()方法来获取元素当前的样式，是window的方法，可以直接使用。
getComputedStyle()方法读取元素样式，如果获取的样式没有设置，则会获取到真实的值，而不是默认值。比如：没有设置width，它不会获取到auto，而是一个长度。

alert(box1.cuurentStyle.width);  //auto  默认

var obj = getComputedStyle(box1,null);
alert(getComputedStyle(obj.width);//1350px 真实长度
alert(getComputedStyle(box1,null).backgroundColor);

通过currentStyle和getComputedStyle()读取到的样式都是只读的，不能修改，如果要修改必须通过style属性

			/*
			 * 定义一个函数，用来获取指定元素的当前的样式
			 * 参数：
			 * 		obj 要获取样式的元素
			 * 		name 要获取的样式名
			 */	
			 
			function getStyle(obj , name){
				//getComputedStyle是一个函数，也是对象。
				// 变量没找到-报错 属性没找到-返回undefined
				//变量没找到，影响if语句执行，报错。因此加window
				if(window.getComputedStyle){
					//正常浏览器的方式，具有getComputedStyle()方法
					return getComputedStyle(obj , null)[name];
				}else{
					//IE8的方式，没有getComputedStyle()方法
					return obj.currentStyle[name];
				}	
			}

4.其他样式属性（开发常用没看结合CSS看）

clientWidth，clientHeigh 元素的可见宽度和高度

这些属性都是不带px的，返回都是一个数字，可以直接进行计算。
会获取元素宽度和高度，包括内容区和内边距。
只读。

offsetWidth offsetHeight 元素的整个的宽度和高度，包括内容区、内边距和边框
offsetParent 获取当前元素的定位父元素

获取到离当前元素最近的开启了定位的祖先元素。如果所有的祖先元素都没有开启定位，则返回body

offsetLeft 当前元素相对于其定位父元素的水平偏移量
offsetTop 当前元素相对于其定位父元素的垂直偏移量
scrollWidth scrollHeight 获取元素整个滚动区域的宽度和高度
scrollLeft 可以获取水平滚动条滚动的距离
scrollTop 可以获取垂直滚动条滚动的距离

三、事件

1.事件对象(event)

当事件的响应函数被触发时，浏览器每次都会将一个事件对象(event)作为实参传递进响应函数,在事件对象中封装了当前事件相关的一切信息，比如：鼠标的坐标键盘哪个按键被按下鼠标滚轮滚动的方向等等。

在IE8中，响应函数被处罚时，浏览器不会传递事件对象。在IE8及以下的浏览器中，是将事件对象作为window对象的属性保存的，即window.event.clientX,Chrome也是这种方式。

areaDiv.onmousemove = function(event){
   var x = window.event.clientX;
   console.log(x);
};

2.事件的冒泡（Bubble）

所谓的冒泡指的就是事件的向上传导，当后代元素上的事件被触发时，其祖先元素的相同事件也会被触发。

在开发中大部分情况冒泡都是有用的,如果不希望发生事件冒泡可以通过事件对象来取消冒泡

				var s1 = document.getElementById("s1");
				s1.onclick = function(event){
					event = event || window.event;
					alert("我是span的单击响应函数");				
					//取消冒泡
					//可以将事件对象的cancelBubble设置为true，即可取消冒泡
					event.cancelBubble = true;
				};

3.事件的委派

事件的委派指将事件统一绑定给元素的共同的祖先元素，这样当后代元素上的事件触发时，会一直冒泡到祖先元素，从而通过祖先元素的响应函数来处理事件。
事件委派是利用了冒泡，通过委派可以减少事件绑定的次数，提高程序的性能。

target
event.target，event中的target表示的触发事件的对象

在这里插入图片描述

4.事件的绑定

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

它只能同时为一个元素的一个事件绑定仅一个响应函数，不能绑定多个，如果绑定了多个，则后边会覆盖掉前边的。

对象.addEventListener( ) 注：不支持IE8及以下的浏览器

参数：
1.事件的字符串，不要on，例如"click"。
2.回调函数，当事件触发时该函数会被调用。
3.是否在捕获阶段触发事件，需要一个布尔值，一般都传false。

例如：

btn01.addEventListener("click", function(){ alert(1);}, false);

对象.attachEvent() 后绑定先执行，执行顺序和addEventListener()相反

参数：
1.事件的字符串，要on
2.回调函数

例如：

btn01.attachEvent("onclick",  function(){  alert(2);  }   );

5.事件的传播

关于事件的传播网景公司和微软公司有不同的理解。

微软公司认为事件应该是由内向外传播，也就是当事件触发时，应该先触发当前元素上的事件，然后再向当前元素的祖先元素上传播，也就说事件应该在冒泡阶段执行。

网景公司认为事件应该是由外向内传播的，也就是当前事件触发时，应该先触发当前元素的最外层的祖先元素的事件，然后在向内传播给后代元素。

W3C综合了两个公司的方案，将事件传播分成了三个阶段。
1.捕获阶段
在捕获阶段时从最外层的祖先元素，向目标元素进行事件的捕获，但是默认此时不会触发事件。
2.目标阶段
事件捕获到目标元素，捕获结束开始在目标元素上触发事件。
3.冒泡阶段
事件从目标元素向他的祖先元素传递，依次触发祖先元素上的事件。

如果希望在捕获阶段就触发事件，可以将addEventListener()的第三个参数设置为true，一般情况下我们不会希望在捕获阶段触发事件，所以这个参数一般都是false。

四、事件函数举例

1.鼠标操作相关事件

在这里插入图片描述
例如：
拖拽元素的拖拽的流程：
1.当鼠标在被拖拽元素上按下时，开始拖拽 onmousedown
2.当鼠标移动时被拖拽元素跟随鼠标移动 onmousemove
3.当鼠标松开时，被拖拽元素固定在当前位置 onmouseup

2.键盘操作相关事件

在这里插入图片描述

可以通过keyCode来获取按键的编码，通过它可以判断哪个按键被按下。altKey,ctrlKey,shiftKey,这个三个用来判断alt、ctrl 、shift是否被按下如果按下则返回true，否则返回false。

1.onkeydown 按键被按下

对于onkeydown来说如果一直按着某个按键不松手，则事件会一直触发。
当onkeydown连续触发时，第一次和第二次之间会间隔稍微长一点，其他的会非常的快，这种设计是为了防止误操作的发生。

2.onkeyup 按键被松开

键盘事件一般都会绑定给一些可以获取到焦点的对象或者是document。

3.鼠标滚轴事件

onMouseWheel 待查

六、系统对话框

1.alert（）

2.confirm（）

confirm弹出的对话框有一个确认和取消按钮。用户可以通过按钮来确认是否执行操作。

函数的执行会返回一个布尔值，如果选择确定则返回true，如果点击取消则返回false。

				var res = confirm("确认删除?");
				if(res == true)
					tr.parentNode.removeChild(tr);

JS学习笔记（九）BOM对象学习/元素样式的读取和修改/事件性质学习/事件函数举例