JS事件DOM&BOM

深、蓝、

于 2019-09-22 18:20:44 发布

阅读量106

点赞数

本文链接：https://blog.csdn.net/qq_38684688/article/details/101166364

版权

JavaScript-事件-BOM&DOM

事件(Event)

事件概述

javascript是一门事件驱动型语言，通常服务于html页面中，对于html页面中的元素必然会存在一些动作，这些动作的触发，称之为事件驱动。

事件分类

浏览器窗体事件
在这里插入图片描述
鼠标事件

键盘事件

表单事件

事件使用方式

1. 直接在元素上使用onXXX属性设置事件

 <button onclick="btnClick()">按钮</button>

2. 通过DOM对象为元素绑定事件（常见）

<button id="btn">按钮</button>
<script>
	var btn = document.getElementById('btn')；
    btn.addEventListener('click',function(){
        //do...
    })
</script>

3.通过DOM对象获取元素后设置事件函数

<button id="btn">按钮</button>
<button id="btn2">按钮</button>
<script>
	var btn = document.getElementById('btn')；
    btn.onclick=function(){
        //do...
    }
    
    var btn2 = document.getElementById('btn2')；
    btn2.onclick = btnClick;
        
    function btnClick(){
    	//do...    
    }    
</script>

事件流（事件冒泡和事件捕获）

事件流描述的是从页面中接受事件的顺序，但有意思的是，早期的微软（IE）和网景（Netscape）开发团队居然提出了两个截然相反的事件流概念，IE的事件流是事件冒泡流(event bubbling)，而Netscape的事件流是事件捕获流(event capturing)。

事件冒泡

事件冒泡会从当前触发的事件目标一级一级往上传递，依次触发，直到document为止；事件冒泡是一个由内向外触发的过程，当通过元素的addEventListener方法绑定事件时，默认使用不给第三个参数(默认值为false)时，此时事件为冒泡机制。

举例说明:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			#box1 {
				position: relative;
				top:0;
				left:0;
				width: 500px;
				height: 500px;
				background-color: #f00;
			}
			#box2 {
				position: absolute;
				left:100px;
				top:100px;
				width: 300px;
				height: 300px;
				background-color: #0f0;
			}
			#box3 {
				position:absolute;
				left:100px;
				top:100px;
				width: 100px;
				height: 100px;
				background-color: #00f;
			}
		</style>
	</head>
	<body>
		<div id="box1">box1
			<div id="box2">box2
				<div id="box3">box3</div>
			</div>
		</div>
		<script>
			var box1 = document.getElementById('box1');
			var box2 = document.getElementById('box2');
			var box3 = document.getElementById('box3');
			
			box1.addEventListener('click',function(e){
				console.log('box1 click')
			})
			box2.addEventListener('click',function(){
				console.log('box2 click')
			})
			box3.addEventListener('click',function(e){
				console.log('box3 click');
			})
		</script>
	</body>
</html>
————————————————
版权声明：本文为CSDN博主「努力耕作的牛阿！！！」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_40163017/article/details/100183526

事件捕获

事件捕获会从document开始触发，一级一级往下传递，依次触发，直到真正事件目标为止；事件捕获是一个由外向内的触发过程，当通过元素的addEventListener方法绑定事件时，如果将函数的第三个参数设置为true，则事件冒泡会转为事件捕获。

举例说明:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			/*略*/
		</style>
	</head>
	<body>
		<div id="box1">box1
			<div id="box2">box2
				<div id="box3">box3</div>
			</div>
		</div>
		<script>
			var box1 = document.getElementById('box1');
			var box2 = document.getElementById('box2');
			var box3 = document.getElementById('box3');
			
			box1.addEventListener('click',function(e){
				console.log('box1 click')
			},true)
			box2.addEventListener('click',function(){
				console.log('box2 click')
			},true)
			box3.addEventListener('click',function(e){
				console.log('box3 click');
			},true)
		</script>
	</body>
</html>

阻止事件冒泡

通过以上例子可以看出，事件冒泡和事件捕获都会导致事件的同时执行，如何避免事件的传播呢?因此我们可以使用以下方式实现：

event.cancelBubble = true
event.stopPropagation()

var box1 = document.getElementById('box1');
var box2 = document.getElementById('box2');
var box3 = document.getElementById('box3');

box1.addEventListener('click',function(e){
    console.log('box1 click')
})
box2.addEventListener('click',function(){
    console.log('box2 click')
})
box3.addEventListener('click',function(e){
    console.log('box3 click');
    //阻止事件传播1
    // e.stopPropagation();
    //阻止事件冒泡2
    // e.cancelBubble = true;
})

BOM对象

BOM(Browser Object Model)，浏览器对象模型，与所使用的浏览器直接相关的一些内置对象，目前浏览器的内核一般两个：（webkit，gecko）;BOM通常包含以下几个常见的内置对象

1.Window
Screen
Location
Navigator
History
Document

window对象

window对象提供的弹窗组件:

open：打开一个新窗口
alert：打开警告框
confirm：打开确认框
prompt：打开消息输入框

screen对象

screen表示屏幕信息，通过screen可以获取屏幕大小以及实际可用高宽（以像素为单位），常用属性有以下:

width：获取屏幕宽度
height：获取屏幕高度
availWidth：可用宽度(减去状态栏宽度(侧边))
availHeight：可用高度(减去状态栏高度(底部))
location对象
location对象表示当前页面的url地址信息，一个完整的URL地址如下:

http://www.example.com:8080/path/index.html?a=1&b=2#TOP

可以用 location.href 获取。要获得URL各个部分的值，可以这么写：

location.protocol; // 'http' 
location.host; // 'www.example.com' 
location.port; // '8080' 
location.pathname; // '/path/index.html' 
location.search; // '?a=1&b=2' 
location.hash; // 'TOP'

history对象

history 对象保存了浏览器的历史记录，JavaScript可以调用 history 对象的 back() 或 forward () ，相当于用

户点击了浏览器的“后退”或“前进”按钮。

这个对象属于历史遗留对象，对于现代Web页面来说，由于大量使用AJAX和页面交互，简单粗暴地调用

history.back() 可能会让用户感到非常愤怒。

新手开始设计Web页面时喜欢在登录页登录成功时调用 history.back() ，试图回到登录前的页面。这是一种错误
的方法。

任何情况，你都不应该使用 history 这个对象了。

深、蓝、

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS事件DOM&BOM

JavaScript-事件-BOM&DOM事件(Event)事件概述javascript是一门事件驱动型语言，通常服务于html页面中，对于html页面中的元素必然会存在一些动作，这些动作的触发，称之为事件驱动。事件分类浏览器窗体事件鼠标事件键盘事件表单事件事件使用方式1. 直接在元素上使用onXXX属性设置事件 <button onclick="btn...
复制链接

扫一扫