6.JavaScript核心BOM操作学习（界面交互功能）——通过JavaScript完成各种事件（包括各种鼠标、键盘事件）

最新推荐文章于 2020-11-04 22:26:40 发布
最新推荐文章于 2020-11-04 22:26:40 发布
阅读量251 收藏
点赞数
分类专栏： 网页前端开发js,vue等知识 文章标签： javascript js html dom
尊重版权，转载需指明
本文链接：https://blog.csdn.net/getture/article/details/108002253
版权
②删除事件

1.传统注册事件
eventTarget.οnclick=null;
2.方法监听注册事件
eventTarget.removeEventListener(type,listener[,useCapture]);

<style>
	div{
		width:100px;
		height:100px;
		background-color:pink;
	}
</style>
<body>
	<div>
		1
	</div>
	<div>
		2
	</div>
	<div>
		3
	</div>
	<script>
		var div = document.querySelectorAll('div');
		//①传统方式注册和删除
		div[0].onclick=function(){
			alert('点击事件1');
			this.onclick=null;
		}
		//②监听方式的注册

		div[1].addEventListener('click',function(){
			alert('点击事件2');
		})
		
		//③监听方式的删除
		function fn(){
			alert('点击事件3');
			div[2].removeEventListener('click',fn);
		}
		div[2].addEventListener('click',fn)
		
	</script>
</body>
③DOM事件流

事件流描述的是从页面中接受事件的顺序
事件发生时会在元素节点之间按照特定的顺序传播，这个传播过程即DOM事件流

比如给div注册了点击事件
DOM事件流分为三个阶段
1.捕获阶段
2.当前目标阶段
3.冒泡阶段
来自黑马教育
事件发生时会在元素节点之间按照特定的顺序传播，这个传播过程即DOM事件流
注意：
1.JS代码中只能执行捕获或者冒泡其中的一个阶段
2.onclick和attachEvent只能得到冒泡阶段
3.捕获阶段，如果addEventListener 第三个参数是true，那么则处于捕获阶段
4.冒泡阶段，如果addEventListener 第三个参数是true，那么则处于冒泡阶段（更加关注）
5.有些事情是没有冒泡的，比如onblur，onfocus，onmouseenter，onmouseleave

<style>
	.father{
		margin:0px auto;
		width:200px;
		height:200px;
		background-color:pink;
		border:1px solid #fff;
	}
	.son{
		margin:auto;
		width:150px;
		height:150px;
		background-color:blue;
		margin-top:25px;
	}
</style>
<body>
	<div class="father">
		<div class="son">盒子</div>
	</div>
	<script>
	
		var son = document.querySelector('.son');
		var father = document.querySelector('.father');
		
		//捕获阶段 document->html->body->father->son
		son.addEventListener('click',function(){
			alert('son');
		},true);
		father.addEventListener('click',function(){
			alert('father');
		},true);
		//冒泡阶段 如果addEventListener第三个参数是false或者省略那么处于冒泡阶段
		son.addEventListener('click',function(){
			alert('son');
		},false);
		father.addEventListener('click',function(){
			alert('father');
		},false);
		
	</script>
</body>
④事件对象(重要)

官方解释：
event对象代表事件的状态，比如键盘按键的状态、鼠标的位置、鼠标按钮的状态
简单理解：
事件发生后，跟事件相关的一系列信息数据的集合都放到这个对象里面，这个对象就是事件对象event，他有很多属性和方法

<body>
<div style="width:100px; height:100px; background-color:pink">
	点击触发事件
</div>
<div style="width:100px; height:100px; background-color:pink">
	点击通过监听触发
</div>
<script>
	//事件对象
	var div = document.querySelectorAll('div');
	
	
	//1.event就是一个事件对象，写道我们侦听函数的小括号里面，当形参来看
	//2.事件对象只有有了事件才会存在，它是系统给我们自动创建的，不需要我们传递参数
	//3.事件对象是我们时间的一系列相关数据的集合 跟事件相关的 
		//比如鼠标点击里面就包含了鼠标的相关信息，比如鼠标坐标
		//如果是键盘事件里面就包含的键盘事件的信息，比如判断用户按下了哪个键
	//4.这个事件对象可以自己命名，比如event、evt、e
	//5.事件对象也有兼容性问题，ie678通过window.event
	
	//传统注册事件
	div[0].onclick=function(event){
		console.log(event);
		
		//兼容ie678 版本方法
		console.log(window.event);
		
		//解决兼容性问题
		e=e||window.event;
		console.log(e);
	}
	
	//监听注册事件
	div[1].addEventListener('click',function(event){
		console.log(event);
	})
</script>
</body>
⑤target和this的区别

e.target：返回的是触发事件的对象，
this：绑定哪个触发事件就返回哪一个

<body>
	<div style="width:100px;height:100px;background-color:pink;">
		这是一个盒子
	</div>
	<ul>
		<li>1</li>
		<li>2</li>
		<li>3</li>
		<li>4</li>
	</ul>
	<script>
		var div=document.querySelector('div');
		var ul = document.querySelector('ul');
		div.addEventListener('click',function(e){
			console.log(e.target);
			console.log(this);
		})
		
		ul.addEventListener('click',function(e){
			console.log(e.target);
			console.log(this);
		})
	</script>
</body>

常见的事件对象属性方法
在这里插入图片描述

⑥阻止事件冒泡

事件冒泡：开始时由最具体的元素接收，然后逐级向上传播到DOM最顶层节点
stopPropagation()

<style>
	.father{
		margin:0px auto;
		width:200px;
		height:200px;
		background-color:pink;
		border:1px solid #fff;
	}
	.son{
		margin:auto;
		width:150px;
		height:150px;
		background-color:blue;
		margin-top:25px;
	}
</style>
<body>
	<div class="father">
		<div class="son">盒子</div>
	</div>
	<script>
	
		var son = document.querySelector('.son');
		var father = document.querySelector('.father');
		
		//捕获阶段 document->html->body->father->son
		son.addEventListener('click',function(){
			alert('son');
		},true);
		father.addEventListener('click',function(){
			alert('father');
		},true);
		//冒泡阶段 如果addEventListener第三个参数是false或者省略那么处于冒泡阶段
		son.addEventListener('click',function(e){
			alert('son');
			<!----------------阻止冒泡------------------------>
			e.stopPropagation();
		},false);
		father.addEventListener('click',function(){
			alert('father');
		},false);
		
	</script>
</body>
⑦事件委托（代理、委派）

事件委托也称为时间代理，在jQuery里面称为事件委派
事件委托原理
不是给每个子节点单独设置事件监听器，而是事件监听器设置在其父结点上，然后利用冒泡原理影响设置每个子节点
案例
例如：给ul注册点击事件，然后利用事件对象的target来找到当前点击的li，因为点击li，事件会冒泡到ul上，ul有注册事件，就会触发事件监听器

<body>
	<ul>
		<li>1</li>
		<li>2</li>
		<li>4</li>
		<li>3</li>
		<li>5</li>
	</ul>
	<script>
		var ul = document.querySelector('ul');
		ul.addEventListener('click',function(e){
			alert('quququuquq');
			e.target.style.backgroundColor='pink';
		})
	</script>
</body>
⑧常用鼠标键盘事件

onclick：鼠标点击左键触发
onmouseover：鼠标经过触发
onmouseout：鼠标离开出发
onfocus：获得鼠标焦点出发
onblur：失去鼠标焦点触发
onmousemove：鼠标移动触发
onmouseup：鼠标弹起触发
onmousedown：鼠标按下触发

1.禁止鼠标右键菜单

contextmenu主要控制应该何时显示上下文，主要用于程序员取消默认的上下文的菜单

document.addEventListener('contextmenu',function(e){
	e.preventDefault();
})

2.禁止鼠标选中

selectstart开始选中

document.addEventListener('selectstart',function(e){
	e.preventDefault();
})

3.鼠标和键盘事件对象
event对象代表事件的状态，跟事件相关的一系列信息的集合，现阶段主要用
鼠标事件对象： MouseEvent

         e.clientX
         e.clientY
clint鼠标相对于浏览器可视区的x和y坐标
         e.pageX
         e.pageY
page鼠标相对于文档页面的x和y坐标（IE9+支持）
         e.screenX
         e.screenY
screen鼠标相对于电脑屏幕的x和y坐标
可以回顾一下本文章的④事件对象

<body>
<div style="width:100px; height:100px; background-color:pink">
	点击触发事件
</div>
<div style="width:100px; height:100px; background-color:pink">
	点击通过监听触发
</div>
<script>
	//事件对象
	var div = document.querySelectorAll('div');
	
	//传统注册事件
	div[0].onclick=function(event){
		console.log(event.clientX);
		console.log(event.clientY);
	}
	
	//监听注册事件
	div[1].addEventListener('click',function(event){
		console.log(event.clientX);
		console.log(event.clientY);
	})
</script>
</body>

键盘事件对象： keyboardEvent
         onkeyup：某个键盘按键被松开时触发
         onkeydown：某个键盘按键被按下时触发（识别功能键）
         onkeypress：某个键盘按键被按下时触发（不识别功能键：ctrl shift等）

执行顺序：keydown->keypress->keyup

<body>
	<script>
		document.addEventListener('keyup',function(){
			console.log('我弹起了');
		})
		document.addEventListener('keydown',function(){
			console.log('我按下了down');
		})
		document.addEventListener('keypress',function(){	
			console.log('我按下了press');
		})</script>
</body>

4.案例：跟随鼠标移动

<style>
	img{
		position:absolute;
		width:10px;
		height:10px;
	}
</style>
<body>
	<img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1934942912,2600722552&fm=26&gp=0.jpg" alt>
	<script>
		var img=document.querySelector('img');
		document.addEventListener('mousemove',function(e){
			var x=e.pageX;
			var y = e.pageY;
			//不要忘记
			img.style.left=x+'px';
			img.style.top=y+'px';
		});
	</script>
</body>

5.案例：判断用户按下哪个键

<body>
	<script>
		document.addEventListener('keyup',function(e){
			console.log('Up'+e.keyCode);
			//弹起键盘的ASCII值
			//1.keyup呵keydown事件不区分大小写，a和A得到的都是65
			//1.keypress事件区分字母大小写
		})
		document.addEventListener('keypress',function(e){
			console.log('Press:'+e.keyCode);
			//弹起键盘的ASCII值
			//1.keyup呵keydown事件不区分大小写，a和A得到的都是65
			//1.keypress事件区分字母大小写
		})
	</script>
</body>

今天学完了，之前落下的太多，七天肯定学不完了
可能完了我会把标题改了，看看一个正常人无JavaScript基础，有C语言和HTML基础能多久学的很踏实

愿时间能学会宽恕
关注
专栏目录
Javascript高级编程学习笔记27——BOM1window对象1.docx
07-05
JavaScript高级编程的学习中，BOM（Browser Object Model）占据着重要的地位，因为它使得JavaScript能够与浏览器进行交互。在浏览器环境中，JavaScript的核心语法是ECMAScript，但BOM提供了与浏览器功能交互的一系列...
效率提升：使用AppleScript模拟鼠标键盘操作制作自动化工具
weixin_43884484的博客
11-30 3955
文档镇楼：AppleScript Language Guide 前言 笔者学习AppleScript的起因，是因为本人键盘修饰键的使用习惯和其他同事不同，笔者习惯于将&amp;quot;大小写修饰键&amp;quot;和&amp;quot;Ctrl键&amp;quot;互调位置，以至于习惯默认修饰键配置的同事在我的电脑上进行调试，总是忍不住感叹一声： “这TM是人用的吗？” 相信了解iOS开发的小伙伴们都知道，Ctrl + Command + 上下，可以切换.h和
7.JavaScript核心BOM操作学习（界面交互功能）——BOM操作的学习、通过JavaScript进行定时器的实现
getture的博客
08-16 285
6.案例：通过键盘事件改变光标位置 按任意键，将光标聚焦到输入框 <body> <input type="text"></input> <script> var search=document.querySelector('input'); document.addEventListener('keyup',function(e){ if(e.keyCode>0){ console.log('yes'); search
5.JavaScript核心BOM操作学习（界面交互功能）——DOM操作的总结，通过JavaScript动态生成表格
getture的博客
08-14 419
案例：动态生成表格 <style> td{ border-width:1px; border-style:solid; width:50px; height:20px; background-color:pink; } tr{ background-color:pink; } table{ border-collapse:collapse; margin:0px auto; text-align:center; font-size:10px;
JS监听鼠标事件，鼠标移动到对象上，展示div
热门推荐
咸鱼的星空
08-28 2万+
监听鼠标的相应事件： //常用的鼠标事件监听 if (document.addEventListener) { //FireFox,Chrome,Opera…          oBtn.addEventListener('click', onMouseClick, false); //单击事件是在同一元素上发生了鼠标按下事件之后又发生了鼠标放开事件时才发生的。
1.JavaScript核心BOM操作学习（界面交互功能）——JavaScript初始入门介绍，以及通过JavaScript完成简单功能的实现
getture的博客
08-10 361
注：本人少量掌握HTML CSS 以及JavaScript基础语法 也有一个自己做的网站 BOOKSAM 课程学习：bilibili上的黑马pink的课程（点击此处直接跳跃） https://www.bilibili.com/video/BV1k4411w7sV?from=search&seid=243946891004868535 第一天 A[JavaScript]–>B[ads] ...
Javascript基础知识（一）核心基础语法与事件模型
10-25
总的来说，JavaScript的基础语法和事件模型是理解其工作原理的关键，掌握这些知识能够帮助开发者构建功能丰富的交互式网页应用。无论是新手还是经验丰富的开发者，对这些基础知识的深入理解和熟练运用都是必不可少的...
JavaScript基础&BOM，学习Java第42天
07-31
BOM是浏览器特有的特性，它允许开发者访问和操作浏览器窗口，包括创建、移动、关闭窗口以及处理cookies等。BOM提供了如window对象，用于获取浏览器窗口信息，navigator对象，用于获取浏览器信息，以及screen对象，...
深入学习JavaScript中的bom
10-16
在JavaScript中，BOM（Browser Object Model）即浏览器对象模型，它提供了一组用于与浏览器窗口交互的对象和方法。BOM的核心是`window`对象，它是所有全局变量和函数的容器，也是BOM的主要入口点。下面我们将深入...
JavaScript_通过编写小程序来学习WebAssembly.zip
最新发布
05-20
JavaScript的核心概念包括变量、数据类型、控制结构（如条件语句和循环）、函数、对象和事件处理。它是一种解释型、弱类型、基于原型的语言，拥有丰富的内置对象和库，如DOM（文档对象模型）和BOM（浏览器对象模型）...
jq监听鼠标移入移出元素(标签)
weixin_45062076的博客
11-04 1456
$(".class1").hover(function (e) { $("[id$='div1']").show(); }, function () { $("[id$='div1']").hide(); }); //第一个func 获得焦点 第二个func失去焦点 //获取鼠标坐标e.pageX; e.pageY ...
bom几个获取位置的api
William526的博客
01-09 490
offset： 基本用法：找到对象后，使用 offset大致包括offsetTop、offsetLeft、offsetWidth、offsetHeight、offsetParent五个部分，直白的翻译过来分别是上偏移、左偏移、偏移宽度、偏移高度、偏移父级。翻译虽不够恰当，但仍可体现出其大致意义。 offsetTop: 元素相对父元素上方的偏移。 offsetLeft： 元素相对父元素左边框的...
Javascript 创建对象的6种方法
GeorgeWang
06-15 474
在Javascript开发过程中经常会遇见创建对象的时候；下面我总结了6种常用创建对象的方法： 构造函数法 原型法 构造函数＋原型法 动态原型法 JSON法 create法 1.构造函数法其主要就是利用构造函数function来创建对象.具体例子：function Person(name, age, sex, phone) { //prototy this.name = name;
JavaScript中的open（）方法
暖暖2333的专栏
08-02 1万+
open（）方法用于导航到一个特定的URL或者打开一个新的浏览器窗口。它接收4个参数：要加载的URL，窗口名称，特性字符串和一个布尔值。 参数一：要加载的URL（ 可选）          当该参数为空时，打开一个空白网页；若不为空，则导航到改URL所指的网页或者打开一个新的浏览器窗口显示该URL所指网页 参数二：窗口名称（可选）      指被打开窗口的名称 参数三：特性字符串（可
8.JavaScript核心BOM操作学习（界面交互功能）——location对象、navigator对象、history对象
getture的博客
08-17 177
⑤location对象 window对象给我们提供了一个location属性用于获取或设置窗口的URL，并且可以用于解析URL。因为这个属性返回的是一个对象，所以我们将这个属性也成为location对象 Ⅰ.组成 protocol://host[:port]/path/[?query]#fragment (http://www.itcast.cn/index.html?name=andy&age=18#link)       protoco
JavaScript DOM事件流事件捕获事件冒泡
lixiaosenlin的专栏
09-08 7693
事件 在讲事件流之前，我们先来了解一下事件。 JavaScript与HTML之间的交互是通过事件来实现的。事件：就是文档或浏览器窗口中发生的一些特定的交互瞬间。我们可以使用侦听器（或事件处理程序）来预订事件，以便事件发生时执行相应的代码。说白了，就是当我们对页面上的某些元素进行某些操作（比如鼠标单击）时产生一些特定的行为。比如鼠标单击一个按钮然后弹出一个对话框。这里就涉及到了按钮的click事件，产生的行为就是弹出了一个对话框。 事件最早是在IE3和Netscape Navigator2 中出现的，当
(day04)java web之dom编程+js创建对象+js的事件处理(键盘和鼠标)+json
jinqizhe的博客
08-04 162
2019.08.03(day04) dom编程: 查询: -通过id查询 -通过name查询 -通过标签名查询 -通过表单名查询 根据id查询 document.getElementById(""); 通过id查询返回元素节点, 在整个html文档中搜索id 只找到第一个id,返回元素 如果id错误,返回null 根据层次查询节点: -pare...
javascript中利用BOM来实现页面跳转
u010658676的博客
08-08 1352
编写body <p><span id="time" >5</span>秒后页面自动跳转至主页...</p> 编写script <script> //定义开始的秒数 var second = 5; //利用getElementById的方法得到span对象 var time = document.get...
深入理解JavaScript的DOM与BOM：浏览器交互与内容操作关键
相比之下，BOM则是浏览器厂商根据DOM提供的额外浏览器特定功能的接口，主要用于处理浏览器窗口、框架、用户界面操作，如弹窗、窗口移动和调整大小，获取浏览器信息和屏幕分辨率，以及对cookie的支持。在IE浏览器中，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值