DOM鼠标事件、 表单事件、添加事件监听

鼠标事件

click:单机事件

dblclick：双击事件

mousedown:鼠标按下时触发

mouseup:鼠标抬起是触发

mouseenter:鼠标移入触发

mouseleave：鼠标离开触发

mousemove:鼠标移动

		<style type="text/css">
			.btn{
				width: 100px;
				height: 50px;
				border-radius:10px ;
				background: gray;
				line-height: 50px;
				cursor: pointer;
				color: #fff;
				text-align: center;
			}
			.test{
				width: 200px;
				height: 200px;
				background: skyblue;
				margin-top: 100px;
			}
			.one{
				width: 100px;
				height: 100px;
				background: pink;
			}
		</style>

			var btn = document.querySelector(".btn");
			btn.addEventListener("click",function(){
				console.log("我是单击事件");
			})
			
			btn.addEventListener("mousedown",function(){
				console.log("鼠标按下");
			})
			
			btn.addEventListener("mouseup",function(){
				console.log("鼠标抬起来的时候触发");
			})

mouseover,mouseout;事件冒泡过程

mouseenter,mouseleave；不遵循事件冒泡过程

			btn.addEventListener("mouseenter",function(){
				console.log("鼠标移入");
			})
			
			btn.addEventListener("mouseleave",function(){
				console.log("鼠标离开");
			})
			
			btn.addEventListener("mouseover",function(){
				console.log("mouseover鼠标移入");
			})
			
				btn.addEventListener("mouseout",function(){
				console.log("mouseout鼠标离开");
			})

事件冒泡(所以主流浏览器的默认事件触发过程，都为事件冒泡过程)

先触发子元素在触发父元素(事件会进行传递)

				var test=document.querySelector(".test");
				var one=document.querySelector(".one");
				test.addEventListener("click",function(){
					alert("我是父元素test");
				})
				one.addEventListener("click",function(){
					alert("我是子元素one");
				})
				
				btn.addEventListener("mousemove",function(){
					console.log("我是在btn按钮里面移动");
				})
				
				document.addEventListener("contextmenu",function(){
					console.log("按下鼠标右键");
				})

键盘事件

				document.addEventListener("keyup",function(){
					console.log("键盘被抬起了");
				})
				document.addEventListener("keydown",function(){
					console.log("键盘被按下了");
				})
				document.addEventListener("keypress",function(){
					console.log("键盘被按下后抬起了");
				})

浏览器默认的事件传递过程是事件冒泡过程

事件冒泡:当给两个父子元素同时添加一个点击事件时，当点击子元素的时候，同时会触发父元素的点击事件

触发过程是：先触发子元素的点击事件再触发父元素的点击事件，

这个触发过程叫，冒泡过程。

事件捕获：事件传递过程和事件冒泡相反，先触发父元素的事件再触发子元素的事件

事件对象：就是当用在对网页操作的时候发生的事情，比如点击事件。。。。。

事件对象会以回调函数的第一参数形式传入给我们

1、他是一个对象

2、在事件发生的过程产生

3、以回调函数的参数形式获取

		<style type="text/css">
			.web {
				width: 200px;
				height: 200px;
				background: skyblue;
			}
			
			.one {
				width: 100px;
				height: 100px;
				background: pink;
				position: relative;
				transition: all 1s;
			}
			
			.test{
				height: 1000px;
			}
		</style>

		<div class="web">
			<div class="one"></div>
			<input type="text" class="user" id="" value="" />
			<textarea name="" rows="" cols="" maxlength="140" ></textarea>
			<form action="" method="post">
				<input type="text" value="测试" />
				<input type="reset" value="重置"/>
			</form>
			<div class="test"></div>
		</div>

		var web = document.querySelector(".web");
			var one = document.querySelector(".one");
			web.addEventListener("mouseenter", function() {
				console.log("我是父元素");
			})
			one.addEventListener("mouseenter", function() {
				console.log("我是子元素");
			})

			document.addEventListener("keydown", function(e) {
				//				console.log("键盘按下了");
				//				console.log(event);
				if(e.key == "A") {
					console.log("你按下大写的A");
				}
				if(e.keyCode == 37) {
					console.log("你按下左键");
				}
				//				if(e.keyCode == 38){
				//					console.log("你按下上键");
				//				}
				if(e.keyCode == 39) {
					console.log("你按下右键");
				}
				if(e.keyCode == 40) {
					console.log("你按下下键");
				}
			})

键盘事件不能够监听到某个具体元素

			var isclick = true;
			var conut = 0;
			var w = 100;
			//不能够通过style方法获取元素的属性值
			//console.log(one.style.width);
			
			var div = document.createElement("div");
			one.appendChild(div);
			div.style="width:30px;height:13px;border-radius:5px;background:pink;transition:2s;position:absolute;right:0;";
			//通过获取元素one，在对元素进行移动的效果
			one.addEventListener("click", function() {
					document.addEventListener("keydown", function(e) {
						if(e.keyCode == 37) {
							//transform能够通过+=来叠加位置，因为他可以传入多个参数
							//one.style.transform += "translateX(-30px)";
							//conut++;
							//width不能够通过加等于来叠加宽度，因为width只能有一个参数
							//one.style.width +="20px";
							w+=10;
							one.style.width=w+"px";
						}
						if(e.keyCode == 38) {
							one.style.transform += "translateY(-30px)";
							
						}
						if(e.keyCode == 39) {
							one.style.transform += "translateX(30px)";
							
						}
						if(e.keyCode == 40) {
							one.style.transform += "translateY(30px)";
							
						}
						if(e.keyCode==13){
							div.style.right="-500px";
							div.style.opacity="0";
						}
					})
			})

对象事件

			window.addEventListener("resize",function(){
				console.log("浏览器窗口大小改变叫了");
			})
			
			window.addEventListener("scroll",function(){
				console.log(window.pageYOffset);
			})
			document.body.addEventListener("unload",function(){
				localStorage.setItem("页面关闭");
			})

表单事件

blur:失去焦点时候触发

focus：获取焦点时触发

change:当表单元素内容改变的时（回车或失去焦点时）触发的

input:当表单元素内容发生时触发

select:选中文本时触发

			var inp=document.querySelector(".user");
			inp.addEventListener("blur",function(){
						var res= confirm("填写完成了吗？");
						if(res==false){
						setTimeout(function(){
								inp.focus();
						
					},1000)
					}else{
						inp.blur();
				}
			})
			
			inp.addEventListener("focus",function(){
				console.log("获取焦点");
			})
			
			inp.addEventListener("change",function(){
				console.log(inp.value);
			})
			
			
			inp.addEventListener("input",function(){
				console.log(inp.value);
			})

reset:当用户点击重置按钮时触发

注意：我们需要监听form

		var btn = document.querySelector("form");
			btn.addEventListener("reset",function(){
				console.log(123);
			})
			
			inp.addEventListener("select",function(){
				console.log("你选中了文本");
			})

#剪贴板事件

copy：当用户复制内容的时候触发

cut:当用户剪切内容的时候触发

paste：当用户粘贴内容的时候触发

		inp.addEventListener("copy",function(){
				alert("请不要复制");
			})

				var Click = true;
				one.addEventListener("click",function(){
					if(Click){
						one.style.transform+="translateX(20px)";
						Click=false;
					}
					one.addEventListener("transitionend",function(){
						Click = true;
					})
				})

添加事件监听

1、addEventListener()

可以注册多个事件监听

可以传入第三个参数，用来设置事件的传递方法，值为true，则为捕获；为false（默认值），则为冒泡过程

2、on~比如单击onclick

只能注册一个相同类型的事件监听

后面的点击事件监听会覆盖掉前面的点击事件监听

		<style type="text/css">
			div{
				width: 100px;
				height: 100px;
				background: skyblue;
			}
			.test2{
				background: pink;
			}
			.one{
				width: 50px;
				height: 50px;
				background: skyblue;
			}
			.test1 .one{
				background: pink;
			}
		</style>

		<div class="test1">
			<div class="one"></div>
		</div>
		<div class="test2">
			<div class="one"></div>
		</div>

		var test1 = document.querySelector(".test1");
			var test2 = document.querySelector(".test2");
			var one1 = test1.querySelector(".one");
			var one2 = test2.querySelector(".one");
			test1.onclick=function(){
				console.log("我是通过onclick来点击的");
			}
			test1.onclick=function(e){
				console.log(e)
				console.log("我是通过onclick来第二次点击的");
			}
			one1.onclick=function(e){
				//阻止事件冒泡
				e.stopPropagation();
				console.log("我是test1的儿子");
			}
			test2.addEventListener("click",function(e){
				console.log(e)
				console.log("我是通过addEventListener来点击的");
			},true)
			test2.addEventListener("click",function(){
				console.log("我是通过addEventListener来第二次点击的");
			},true)
			one2.addEventListener("click",function(e){
				//阻止事件冒泡
				e.stopPropagation();
				console.log("我是test2的儿子");
			},true)
			
			document.addEventListener("contextmenu",function(e){
				//阻止默认事件
				e.preventDefault()
				console.log(123);
			})