JavaScript Event

最新推荐文章于 2022-11-08 13:31:54 发布
最新推荐文章于 2022-11-08 13:31:54 发布
阅读量622 收藏
点赞数
JavaScript Event API：http://www.w3school.com.cn/jsref/dom_obj_event.asp

什么是事件驱动模型？

由事件的发生来触发程序的执行

都有哪些事件？

onclick       单击
ondblclick    双击
onmouseover   鼠标划入
onmouseout    鼠标划出
onfocus       获得焦点
onblur        失去焦点
onload        加载完成
onerror
ontimeout

onkeydown     键盘被按下
onkeypress    键盘按下并松开 , 不适用于组合键 如：ctrl 、alt
onkeyup       键盘松开
onscroll      窗口滚动
onresize      改变大小
onmousemove   鼠标的移动
onchange      内容被改变并失去焦点

Event对象是干嘛的？

有了Event，可以处理任何跟鼠标或键盘相关的信息
比如：  计算鼠标的位置，计算用户按下了哪个键？


怎么得到Event对象？

xxx.onclick = function(evt){
     //use evt ...........
}
xxx.onclick = function(){
argument[0]
}
在IE中event 是由window.event获取的
兼容
function(e){
var e = e || event;
}

button属性代表什么？

代表了事件发生时，鼠标哪个键被按下
button==0  左键
button==1  滚轮
button==2  右键

clientX和clientY

鼠标在 浏览器的可视区域  的坐标(即浏览器窗口)


计算鼠标的页面绝对位置

var e = e || event;
var x = e.clientX + document.body.scrollLeft||document.documentElement.scrollLeft;
var y = e.clientY + document.body.scrollTop||document.documentElement.scrollTop; //Google|火狐

此外也可用 e.pageX和e.pageY （由Google浏览器提出较晚） ，不兼容IE8及以下 

	onload = function(){
			document.onmousemove = function(e){
				
				var e = e || window.event;
				var x = e.clientX + (document.body.scrollLeft || document.documentElement.scrollLeft);
				var y = e.clientY + (document.body.scrollTop || document.documentElement.scrollTop);			
				document.title="X: "+x+" Y:"+y;
			}
		}

offsetX和offsetY

鼠标在 当前事件触发的元素上的坐标



和键盘相关的keyCode以及组合键

keyCode  键盘的ascii码 

兼容写法  which

keypress和 keydown的 区别

在google中组合键： Unicode（ctrl+enter）=10

在keypress中，对于设备控制键或组合键，例如capsLock、alt、ctrl  不会触发该事件
在keydown中，会对所有键都会触发事件，并有对应的虚拟码

在keypress中，对于alt和ctrl这样的组合键，需要通过
ctrlKey   altKey 的值来判断  

事件流是什么东西？

事件是可以流动的，它在触发时，默认情况下，会将事件向父元素进行传播，导致外层也被依次触发，直到页面的最顶层元素。 事件函数的执行顺序按照事件传播的顺序进行。
我们管这种现象叫做： 事件冒泡

当然，事件流能从子到父传播（冒泡）也能从父到子进行传播

什么叫冒泡

好处在哪？ (事件委托机制)
把元素触发事件时要执行的动作委托给父元素来执行，应用场景：
1、需要添加事件的子元素太多  2、子元素数量不固定


注： 通过event.target属性，我们可以找到事件触发的原始对象。

坏处在哪？

事件冒泡给父元素，会导致一些不该触发的事件被触发了

怎么阻止事件传播？

event.stopPropagation()  //常规浏览器，是一个方法
event.cancelBubble = true;  //  IE中设置，是一个boolean值默认为false
兼容性：


如何阻止右键菜单

document.oncontextmenu = function(e){
     e = e || event;
     e.preventDefault ? e.preventDefault() : e.returnValue = false;    //  常规浏览器 || IE
}

浏览器的默认行为有哪些？ 能阻止吗？

右键弹出菜单
超链接的页面跳转
按钮（button，type不一定是submit）在表单中的自动提交
e.preventDefault ? e.preventDefault() : e.returnValue = false;

拖拽原理

ele.onmousedown = function(){
     document.onmousemove = function(){
          //..........
     }
}
document.onmouseup = function(){
     document.onmousemove = null;
}

事件捕获又是什么东西？ 

与事件冒泡的执行顺序相反的事件特性
从最顶层父元素依次向子元素

另外一种绑定事件的方法？

addEventListener(eventtype, func,  isCapture) //IE8及以下无这个方法
参数1 ：  事件的类型，注意 不加 on
参数2 ：  事件需要绑定的函数
参数3 ：  是否支持捕获，默认为false，即冒泡

//结果只有small03

//会弹出01 02 03 ，三个都会生效
可以给同一个元素绑定多个事件函数!!，一般多人开发的时候选用的就是以addEventListener
方式添加事件，避免覆盖别人的事件


参数三的使用：

// window   document  small01  big
多个事件的执行顺序和事件绑定的顺序一致
   

删除操作如下：



  // window  document small01 big  （先捕获再冒泡）


先捕获（网景对抗IE）再冒泡（IE）

small.attachEvent("onclick",function(){}) //IE8及以下
 //兼容IE8及以下，无第三个参数，虽然也能重复添加同一事件，但执行顺序与添加顺序是相反的

捕获的过程（定义函数如：onclick）不会向下传播

兼容封装1：//对象，事件名，方法，是否捕获 ，缺点每次使用都要判断

兼容封装2：只在加载时做一次判断（函数自运行），这也叫作：函数的柯里化


鼠标跟随示例： 

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title>Document</title>  
	<style>
		div{height:10px;width:10px;position:absolute;background:#000;}
		
	</style>
</head>  
<body id="_body">  
	 
	<div style="left: 341px; top: 172px;"></div>
	<div style="top: 172px; left: 341px;"></div>
	<div style="top: 69px; left: 272px;"></div>

</body>  
<script>
	var _div=Array.from(document.getElementsByTagName('div'));// ES6中伪数组转为数组
	
	document.οnmοusemοve=function(e){
		var e = e || event;
		var _last=_div.pop();
		_last.style.top = e.clientY+"px";
		_last.style.left = e.clientX+"px";
		_div.unshift(_last);

	}
</script>


</html>

冒泡示例 
<!DOCTYPE html>
<html>
	
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>DOM操作</title>	
	</head>
	<style>
		
	</style>
	<script src="js/common.js"></script>
	<body>
		<div id="big" style="position:absolute; width:400px; height:400px; background: #cdf">
			<div id="small" style="position:absolute; left:500px; top:300px; width:200px; height:200px; background: blue"></div>
		</div>
		
		<script>
			window.onclick = function(){
				alert("window");
			}
			big.onclick = function() {
				alert("big");
			}
			document.documentElement.onclick = function() {
				alert("html");
			}
			document.body.onclick = function() {
				alert("body");
			}
			small.onclick = function() {
				alert("small");
			}
			
		</script>
	</body>
	
</html>
假设有1000人，每人手里有200块钱，从此刻开始，每过一分钟，每个人都从自己手里拿出一块钱，随机发给别人。
（1、允许负债，2、当你的钱数为0时，从队伍中消失）
以下实现条件2 
<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title>Document</title>  
	<style>
		div{height:20px;width:40px;float:left;background:#000;color:#fff;line-height:20px;margin:10px;text-align:center;}	
	</style>
	<script>
	οnlοad=function(){
			(function _init(){ //初始化
				var frag = document.createDocumentFragment();
				for(var i = 0;i <1000;i++ ){	//初始为有1000人
					var tmp = document.createElement('div');
					tmp.innerText="200"; //初始时每人200块钱
					tmp.style.background="rgb("+parseInt(Math.random()*255)+","+parseInt(Math.random()*255)+","+parseInt(Math.random()*255)+")";
					frag.appendChild(tmp);
				}
				document.body.appendChild(frag);
			
			})();
			
			(function _play(){
				
				
				var t = setInterval(function(){//定时器，每隔一秒运行一次
					var div_list = Array.from(document.body.children);
					if(div_list.length<=2) clearInterval(t);//当数组人数小于等于2时停止定时器
					div_list.forEach(function(item,index,arr){ //遍历数组
					
						if(parseInt(arr[index].innerText)-1<0){//轮到当前这人，分钱后=0则踢出
							arr[index].remove();
							console.log("数组原来长度："+div_list.length);
							div_list.splice(index,1);
							console.log("数组长度："+div_list.length);
						}else{
							arr[index].innerText = parseInt(arr[index].innerText)-1;// 否则钱数减一
						}

							var index_tmp=0;
							while(1){ //将钱随机分给某个人（不能是本人）
								var index_tmp = parseInt(Math.random()*div_list.length);
								if(index_tmp!=index)break;
							}
							arr[index_tmp].innerText = parseInt(arr[index_tmp].innerText)+1; //获得一块
					});
				
				},1000);
			
			})();
		
	}
	
</script>
</head>  
<body>  
</body>  
</html>

拖拽示例： 
<!DOCTYPE html>
<html lang="zh">

	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<meta http-equiv="X-UA-Compatible" content="ie=edge" />
		<title>Document</title>
		<style type="text/css">
			div {
				width: 100px;
				height: 100px;
				background: #CCCCCC;
				position: absolute;
				left: 0px;
				top: 0px;
			}
		</style>
		<script type="text/javascript">
			window.onload = function() {

				function Drag(obj) {
					this.obj = obj;
					this.trail = new Array();
					onmousedown = function(e) {
							e = e || event;
							trail = new Array(0);
							trail.push({
								x: obj.style.left,
								y: obj.style.top
							});
							var offsetMouse = {
								X: e.offsetX,
								Y: e.offsetY
							}
							document.onmousemove = function(e) {
								e = e || event;
								obj.style.left = Math.min(window.innerWidth - obj.offsetWidth, Math.max(0, e.clientX - offsetMouse.X)) + "px";
								obj.style.top = Math.min(window.innerHeight - obj.offsetHeight, Math.max(0, e.clientY - offsetMouse.Y)) + 'px';
								trail.push({
									x: obj.style.left,
									y: obj.style.top
								});
							}
						},
						onmouseup = function() {
							document.onmousemove = "";
							this.fllowTrail();
						},
						fllowTrail = function() { //回到原点
							var t = setInterval(function() {
								if(trail.length == 0) {
									clearInterval(t);
									return;
								}
								var item = trail.pop();
								obj.style.left = item.x;
								obj.style.top = item.y;

							}, 50);
						}

				}

				var _div = Array.prototype.slice.call(document.body.children)[0];
				var drag = new Drag(_div);
				console.log(drag.trail);

			}
		</script>
	</head>

	<body>
		<div>

		</div>

	</body>

</html>


fanlinqiang
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js-event(事件对象)详解
顺其自然~专栏
04-25 1万+
1、事件对象 Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。 什么时候会产生Event 对象呢? 例如：当用户单击某个元素的时候，我们给这个元素注册的事件就会触发，该事件的本质就是一个函数，而该函数的形参接收一个event对象。 事件通常与函数结合使用，函数不会在事件发生前被执行！ 使用场景即： var oDIv = document.getElementById('box'); oDiv.onclick = function(...
JS 之 事件Event对象详解（属性、方法、自定义事件）
最新发布
weixin_45092437的博客
06-10 9552
​ 事件event对象是指在浏览器中触发事件时，浏览器会自动创建一个event对象，其中存储了本次事件相关的信息，包括事件类型、事件目标、触发元素等等。浏览器创建完event对象之后，会自动将该对象作为参数传递给绑定的事件处理函数，我们可以在事件处理函数中通过访问event对象的属性和方法，来获取事件的相关信息，并做出后续的逻辑处理。
javascript event 事件解析
weixin_33885676的博客
06-10 67
描述event代表事件的状态，例如触发event对象的元素、鼠标的位置及状态、按下的键等等。event对象只在事件发生的过程中才有效。 event的某些属性只对特定的事件有意义。比如，fromElement和toElement属性只对onmouseover和 onmouseout事件有意义。例子下面的例子检查鼠标是否在链接上单击，并且，如果shift键被按下，就取...
JavaScript中的Event（事件）详解
时间静止
03-29 9664
Event 对象 Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。 事件通常与函数结合使用，函数不会在事件发生前被执行！ 事件句柄　(Event Handlers) HTML 4.0 的新特性之一是能够使 HTML 事件触发浏览器中的行为，比如当用户点击某个 HTML 元素时启动一段 JavaScript。下面是一个属性列表，可将之插入 ...
JavaScriptEvents-键盘事件
hrbsfdxzhq01的博客
01-24 664
1、该三个事件的执行顺序如下：onkeydown -&gt; onkeypress -&gt;onkeyup onkeydown：某个键盘的键被按下； onkeypress：某个键盘的键被按下或按住； onkeyup：某个键盘的键被松开 键盘事件的event对象中包含一个keyCode属性，IE中只有这一个属性，当为keydown和keyup 事件是，keycode属性表示你具体按下的键(...
JavaScript Event Loop相关原理解析
10-15
JavaScript Event Loop是JavaScript执行模型的核心部分，它解决了单线程环境下的并发问题，使得JavaScript能够高效地处理异步操作。JavaScript引擎，如V8，设计为单线程，这意味着它一次只能执行一个任务，但背后...
javascript event
12-08
关于javascript event的总结
javascript Event对象详解及使用示例
10-26
Event代表事件状态，如事件发生的元素，键盘状态，鼠标位置和鼠标按钮状态，event对象只在事件发生的过程中才有效，本文整理了一些，喜欢的朋友可以学习下
JavaScript Event事件学习第一章 Event介绍
10-29
Events是每一个JavaScript程序核心。什么是事件处理，它有什么问题和怎样写出跨浏览器的代码，我将在这一章做一个概述。我也会提供一些有精彩的关于事件处理程序的细节的文章。
OnKeyPress事件和Javascript检测键盘输入
weixin_30552811的博客
11-02 306
对于有些时候，我们需要检测用户键盘输入的键盘信息，来处理一些相应的事件。 这里田子建议使用OnKeyPress=“”事件来处理。相类似的还有OnKeyUp和OnKeyDown事件，这些田子个人认为都不是特别的理想化。 假如，我们预定义一个方法function EventCommand(oEvent){ document.write(oEvent.keyCode); }，这个方法用来显...
JavaScript中的event讲解及一些常见案例
a1611107035的博客
11-08 1694
JavaScript中的event就是发生在dom元素上的事件，你也许已经使用过不少dom事件，但是event对象在js中有很多强大并且常用的功能。本文将讲解部分常用event的属性方法。
JS--事件(Event)--机制/原理
IT利刃出鞘的博客
01-02 1878
​ 说明 本文介绍JavaScript中的事件的机制。包括：事件的捕获与冒泡，事件的流程。 官网 事件大全：事件参考 | MDN JavaScript事件介绍 事件 是某事发生的信号。所有的 DOM 节点都生成这样的信号（但事件不仅限于 DOM）。 我们也可以自定义事件。
js的event详解
qq_39207066的博客
08-01 644
js的event详解 event代表事件的状态，例如触发event对象的元素、鼠标的位置及状态、按下的键等等。 event对象只在事件发生的过程中才有效。 event的某些属性只对特定的事件有意义。比如，fromElement 和 toElement 属性只对 onmouseover 和 onmouseout 事件有意义。 例子 下面的例子检查鼠标是否在链接上单击，并且，如果shift键被按下...
jsevent(js event对象)
计算机毕业论文源码，学生个人网页制作html源码。贴近用户做网络推广和互联网优化。
12-10 421
javascript event对象的具体功能是什么 event对象只在事件发生的过程中才有效(比如鼠标点击，键盘按下等)。 event对象用以表示事件的状态， 触发event对象的元素(event.srcElement)、 鼠标的位置(event.clientX、event.clientY)、 按下的键(eve...
JS Event对象详解
好女绪的博客
02-11 6795
JS Event对象详解 参考资料: js添加事件和移除事件:addEventListener()与removeEventListener() Event 对象 Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。一旦事件发生,便会生成Event对象，如单击一个按钮，浏览器的内存中就产生相应的 event对象。 事件通常与函数结合使...
js中Event-事件详解
chenminglvming的博客
04-13 3267
今天梦想创业俱乐部的陈明吕老师跟大家分享的是js当中event事件的详解1。大家应该都知道，想要处理某个事件的时候，我们都会赋值一函数给其事件去触发。目前我们的写法是：元素.onclick = function(){........};那还有没有其他的事件触发方式的写法呢？现在就一起来跟着陈明吕老师一起去看看另一种的写法吧。
JS Event 事件捕获 & 事件冒泡
weixin_58362183的博客
07-04 522
Event 相关的 event.target，event.eventPhase，event.currentTarget，事件捕获，事件冒泡，addEventListener, onclick...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值