【慕课网】前端零基础入门---步骤五:让页面动起来的JS基础部分---09-JS事件

09-JS事件

1 初识js事件

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

2 事件定义(上)

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

3 事件定义(下)

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

4 事件解绑

在这里插入图片描述
在这里插入图片描述

5 IE事件处理程序

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

6 跨浏览器事件处理程序

<!DOCTYPE html>
<html lang="en">
<head>
	<title>3</title>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
</head>
<body>
	<button id="mybtn">点击我</button>
	<script type="text/javascript">
		//兼容所有浏览器  addEventListener  attachEvent
		var EventUtil={
			addHandler:function(element,type,handler){
				//绑定事件
				//chrome、firefox、IE9等   addEventListener
				//IE8及IE8以下的浏览器等  attachEvent
				if (element.addEventListener) {
					element.addEventListener(type,handler,false);
				}else if(element.attachEvent){
					element.attachEvent("on"+type,handler);
				}else{
					element["on"+type]=null;
				}
			},
			removeHandler:function(element,type,handler){
				//移除事件
				//chrome、firefox、IE9等   removeEventListener
				//IE8及IE8以下的浏览器等  detachEvent
				if (element.removeEventListener) {
					element.removeEventListener(type,handler,false);
				}else if(element.detachEvent){
					element.detachEvent("on"+type,handler);
				}else{
					element["on"+type]=null;
				}
			},
		}
		var btn=document.getElementById("mybtn");
		var handler=function(){
			alert("clicked");
		}
		EventUtil.addHandler(btn,"click",handler);
		EventUtil.removeHandler(btn,"click",handler);
	</script>
</body>
</html>

7 事件委托与事件冒泡(难点,多看几遍,多练习)

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

8 Event对象属性与方法(难点,多看几遍,多练习)

<!DOCTYPE html>
<html lang="en">
<head>
	<title>3</title>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
	<style type="text/css">
		#gaodu{
			height: 2000px;
			background: lightgreen;
		}
	</style>
</head>
<body>
	<button id="mybtn">点击我</button>

	<div id="parent">
		<div id="child">点击我</div>
	</div>

	<a href="http://www.baidu.com" id="a">跳转链接</a>

	<div id="gaodu"></div>
	<script type="text/javascript">
		var btn=document.getElementById("mybtn");

		//event.type  事件类型
		var eventFun=function(event){
			if(event.type=="click"){
				alert("click事件被触发");
			}else if(event.type=="mouseout"){
				alert("mouseout事件被触发");
			}
		}
		mybtn.addEventListener("click",eventFun);
		mybtn.addEventListener("mouseout",eventFun);


		//target和currentTarget
		var parent=document.getElementById("parent");
		parent.addEventListener("click",function(event){
			//点击儿子,事件是在父亲上面
			//target   点击谁谁就是target,事件源
			//currentTarget  事件绑定在谁身上,就是指向谁
			console.log(event.target);
			console.log(event.currentTarget);
		});

		var child=document.getElementById("child");
		child.addEventListener("click",function(event){
			//点击儿子,事件是在父亲上面
			//target   点击谁谁就是target,事件源
			//currentTarget  事件绑定在谁身上,就是指向谁
			console.log(event.target);
			console.log(event.currentTarget);
		})

		// event.preventDefault  阻止默认行为
		var a=document.getElementById("a");
		a.addEventListener("click",function(event){
			event.preventDefault();
			alert(11);
		});

		//event.stopPropagation()  阻止事件冒泡或者捕获
		var parent=document.getElementById("parent");
		parent.addEventListener("click",function(){
			alert("parent");
		});
		child.addEventListener("click",function(){
			alert("child");
			event.stopPropagation();
		})

		// event.clientY、pageY、screenY
		// clientY 就是指浏览器顶部底边到鼠标位置,不计算滚动轴距离
		// pageY   就是指浏览器顶部底边到鼠标位置,但是它计算滚动轴的距离
		// screenY 屏幕顶部到鼠标位置
		var gaudu=document.getElementById("gaodu");
		gaodu.addEventListener("click",function(event){
			alert("clientY:"+event.clientY+";pageY:"+event.pageY+";screenY:"+event.screenY);
		});
	</script>
</body>
</html>

9 IE8中的Event对象属性与方法

<!DOCTYPE html>
<html lang="en">
<head>
	<title>3</title>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
</head>
<body>
	<button id="mybtn">点击我</button>
	<a href="http://www.baidu.com" id="a">跳转链接</a>
	<div id="parent">
		<div id="child">点击我</div>
	</div>
	<button id="target">target</button>

	<script type="text/javascript">
		//IE8及以下浏览器的Event对象属性与方法

		// attachEvent
		var mybtn=document.getElementById("mybtn");
		mybtn.attachEvent("onclick",function(event){
			// event.type 事件类型
			alert(event.type);
		});

		// event.returnValue=false;  阻止默认事件同preventDefault
		var a=document.getElementById("a");
		a.attachEvent("onclick",function(event){
			event.returnValue=false;
		});
		
		// event.cancelBubble=true;  取消事件冒泡同stopPropaga
		var parent=document.getElementById("parent");
		parent.attachEvent("onclick",function(event){
			alert("parent被触发了");
		});
		var child=document.getElementById("child");
		child.attachEvent("onclick",function(event){
			event.cancelBubble=true;
			alert("child被触发了");
		});

		// srcElement   同target
		var target=document.getElementById("target");
		target.attachEvent("onclick",function(event){
			console.log(event.srcElement);
		})
	</script>
</body>
</html>

10 Event对象跨浏览器兼容性写法

<!DOCTYPE html>
<html lang="en">
<head>
	<title>3</title>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
</head>
<body>
	<a href="http://www.baidu.com" id="a">跳转链接</a>
	<div id="parent">
		<div id="child">点击我</div>
	</div>

	<script type="text/javascript">
		// Event对象跨浏览器兼容写法
		// Event  addEventListener chrome fox IE9  event.target  preventDefault  stopPropagation
		// Event  attachEvent      IE8系列的    event.srcElement  returnValue  cancelBubble

		var EventUtil={
			//兼容所有浏览器  addEventListener  attachEvent
			addHandler:function(element,type,handler){
				//绑定事件
				//chrome、firefox、IE9等   addEventListener
				//IE8及IE8以下的浏览器等  attachEvent
				if (element.addEventListener) {
					element.addEventListener(type,handler,false);
				}else if(element.attachEvent){
					element.attachEvent("on"+type,handler);
				}else{
					element["on"+type]=null;
				}
			},
			removeHandler:function(element,type,handler){
				//移除事件
				//chrome、firefox、IE9等   removeEventListener
				//IE8及IE8以下的浏览器等  detachEvent
				if (element.removeEventListener) {
					element.removeEventListener(type,handler,false);
				}else if(element.detachEvent){
					element.detachEvent("on"+type,handler);
				}else{
					element["on"+type]=null;
				}
			},
			getTarget:function(event){
				return event.target||event.srcElement;
			},
			preventDefault:function(event){
				if(event.preventDefault){
					event.preventDefault();
				}else{
					event.returnValue=false;
				}
			},
			stopPropagation:function(event){
				if(event.stopPropagation){
					event.stopPropagation();
				}else{
					event.cancelBubble=true;
				}
			}
		}

		var parent=document.getElementById("parent");
		EventUtil.addHandler(parent,"click",function(event){
			alert("parent被触发了");
		})

		var child=document.getElementById("child");
		EventUtil.addHandler(child,"click",function(event){
			alert("child被触发了");
			var target=EventUtil.getTarget(event);
			console.log(target);
			EventUtil.stopPropagation(event);
		});

		var a=document.getElementById("a");
		EventUtil.addHandler(a,"click",function(event){
			EventUtil.preventDefault(event);
		});


	</script>
</body>
</html>

11 事件类型(一)

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
	<title>3</title>
	<style type="text/css">
		body{
			height: 1000px;
		}
		input{
			width: 300px;
			height: 50px;
		}
		div{
			padding: 20px 0;
			background-color: #666;
		}
		#mydiv{
			width: 500px;
			height: 500px;
			background:lightgreen;
		}
	</style>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
</head>
<body>
	<input id="input" type="text" name="">
	<div id="div">
		<button id="mybtn">点击我</button>
	</div>
	<div id="mydiv"></div>
	<script type="text/javascript">
		var EventUtil={
			//兼容所有浏览器  addEventListener  attachEvent
			addHandler:function(element,type,handler){
				//绑定事件
				//chrome、firefox、IE9等   addEventListener
				//IE8及IE8以下的浏览器等  attachEvent
				if (element.addEventListener) {
					element.addEventListener(type,handler,false);
				}else if(element.attachEvent){
					element.attachEvent("on"+type,handler);
				}else{
					element["on"+type]=null;
				}
			},
			removeHandler:function(element,type,handler){
				//移除事件
				//chrome、firefox、IE9等   removeEventListener
				//IE8及IE8以下的浏览器等  detachEvent
				if (element.removeEventListener) {
					element.removeEventListener(type,handler,false);
				}else if(element.detachEvent){
					element.detachEvent("on"+type,handler);
				}else{
					element["on"+type]=null;
				}
			},
			getTarget:function(event){
				return event.target||event.srcElement;
			},
			preventDefault:function(event){
				if(event.preventDefault){
					event.preventDefault();
				}else{
					event.returnValue=false;
				}
			},
			stopPropagation:function(event){
				if(event.stopPropagation){
					event.stopPropagation();
				}else{
					event.cancelBubble=true;
				}
			}
		}

		// UI事件
		//当页面完全加载后在window上面触发
		EventUtil.addHandler(window,"load",function(e){
			alert("Loaded!");
		});

		// img标签加载完毕
		var image=document.createElement("img");
		EventUtil.addHandler(image,"load",function(e){
			alert("图片加载完毕")
		})
		image.src="效果图.png";

		// 图片预加载
		var image= new Image();
		EventUtil.addHandler(image,"load",function(event){
			alert("Image loaded!");
		});
		image.src="效果图.png";

		// js动态加载完毕
		var script=document.createElement("script");
		EventUtil.addHandler(script,"load",function(event){
			alert("js Loaded");
		});
		script.src="jquery.js";
		document.body.appendChild(script);

		// css动态加载完毕
		var link=document.createElement("link");
		link.type="text/css";
		link.rel="stylesheet";
		EventUtil.addHandler(link,"load",function(event){
			alert("css Loaded");
		});
		link.href="example.css";
		document.getElementByTagName("head")[0].appendChild(link);

		//用户从一个页面切换到另一个页面
		EventUtil.addHandler(window,"unload",function(event){
			alert("unloaded");
		});

		//窗口大小发生变化时触发
		EventUtil.addHandler(window,"resize",function(event){
			alert("resized");
		});

		// 
		EventUtil.addHandler(window,"scroll",function(event){
			alert(111);
		});

		// 焦点事件
		//1.blur
		var input=document.getElementById("input");
		EventUtil.addHandler(input,"blur",function(event){
			alert("元素失去焦点的时候触发");
		});

		// 2.focus 不支持冒泡
		EventUtil.addHandler(input,"focus",function(event){
			console.log("元素获取焦点的时候触发");
		});

		// 3.同focus一样
		EventUtil.addHandler(input,"focusin",function(event){
			console.log("元素获取焦点的时候触发,支持事件浏览器是IE5.5+,Safari5.1+,chrom等");
		});

		// 4.focusout 同blur
		EventUtil.addHandler(input,"focusout",function(event){
			console.log("元素获取焦点的时候触发,支持事件浏览器是IE5.5+,Safari5.1+,chrom等")
		});

		//鼠标事件
		EventUtil.addHandler(mybtn,"click",function(event){

		});

		//双击事件
		EventUtil.addHandler(mybtn,"dblclick",function(event){
			console.log(111111);
		});

		//鼠标按下时候触发的事件
		EventUtil.addHandler(mybtn,"mousedown",function(event){
			console.log("mousedown");
			console.log(event.button);
			// event.button==0  鼠标左键
			// event.button==1  鼠标中键
			// event.button==2  鼠标右键

			//IE8派系
			// event.button==0  没有按下按钮
			// event.button==1  按下主鼠标按钮
			// event.button==2  按下次鼠标按钮
			// event.button==3  同时按下主、次鼠标按钮
			// event.button==4  按下中间鼠标按钮
		});

		//鼠标松开时候触发的事件
		EventUtil.addHandler(mybtn,"mouseup",function(event){
			console.log("mouseup");
		});

		// mousedown + mouseup= click

		EventUtil.addHandler(mybtn,"mousemove",function(event){
			console.log("mousemove");
		});

		var div=document.getElementById("div");
		//离开目标元素或者子元素时候执行
		EventUtil.addHandler(mybtn,"mouseout",function(event){
			console.log("mouseout");
		});

		//进入目标元素或者子元素时候执行
		EventUtil.addHandler(mybtn,"mouseover",function(event){
			console.log("mouseover");
		});

		//只能进入目标元素时候才去触发
		EventUtil.addHandler(mybtn,"mouseenter",function(event){
			console.log("mouseenter");
		});

		//只能离开目标元素时候才去触发
		EventUtil.addHandler(mybtn,"mouseleave",function(event){
			console.log("mouseleave");
		});

		var div=document.getElementById("mydiv");
		EventUtil.addHandler(div,"click",function(event){
			var keys=new Array();
			if(event.shiftKey){
				keys.push("shift");
			}
			if(event.ctrlKey){
				keys.push("ctrl");
			}
			if(event.altKey){
				keys.push("alt");
			}
			if(event.metaKey){
				keys.push("meta");
			}
			console.log("keys:"+keys.join(","));
		});
	</script>
</body>
</html>

12 事件类型(二)

<!DOCTYPE html>
<html lang="en">
<head>
	<title>3</title>
	<style type="text/css">
		body{
			height: 1000px;
		}
		input{
			width: 300px;
			height: 50px;
		}
		div{
			padding: 20px 0;
			background-color: #666;
		}
		#mydiv{
			width: 500px;
			height: 500px;
			background:lightgreen;
		}
	</style>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
</head>
<body>
	<input type="text" id="mytext">
	<ul id="mylist">
		<li>Item 1</li>
		<li>Item 2</li>
		<li>Item 3</li>
	</ul>
	<script type="text/javascript">
		var EventUtil={
			//兼容所有浏览器  addEventListener  attachEvent
			addHandler:function(element,type,handler){
				//绑定事件
				//chrome、firefox、IE9等   addEventListener
				//IE8及IE8以下的浏览器等  attachEvent
				if (element.addEventListener) {
					element.addEventListener(type,handler,false);
				}else if(element.attachEvent){
					element.attachEvent("on"+type,handler);
				}else{
					element["on"+type]=null;
				}
			},
			getCharCode:function(event){
				if(typeof event.charCode=="number"){
					return event.charCode;
				}else{
					return event.keyCode;
				}
			},
			removeHandler:function(element,type,handler){
				//移除事件
				//chrome、firefox、IE9等   removeEventListener
				//IE8及IE8以下的浏览器等  detachEvent
				if (element.removeEventListener) {
					element.removeEventListener(type,handler,false);
				}else if(element.detachEvent){
					element.detachEvent("on"+type,handler);
				}else{
					element["on"+type]=null;
				}
			},
			getTarget:function(event){
				return event.target||event.srcElement;
			},
			preventDefault:function(event){
				if(event.preventDefault){
					event.preventDefault();
				}else{
					event.returnValue=false;
				}
			},
			stopPropagation:function(event){
				if(event.stopPropagation){
					event.stopPropagation();
				}else{
					event.cancelBubble=true;
				}
			}
		}
		var mytext=document.getElementById("mytext");
		//键码,按任意键触发
		EventUtil.addHandler(mytext,"keydown",function(event){
			console.log(event.keyCode);
		});

		//释放某键时候触发,支持keyCode
		EventUtil.addHandler(mytext,"keyup",function(event){
			console.log(event.keyCode);
		});

		//ASCII码,字符键触发
		EventUtil.addHandler(mytext,"keypress",function(event){
			console.log("event.charCode:"+event.charCode);
		});

		EventUtil.addHandler(mytext,"textInput",function(event){
			console.log(event.data);
		});

		//document中任意元素被删除就会触发
		EventUtil.addHandler(document,"DOMNodeRemoved",function(event){
			console.log(1111111);
		});

		//document结构中发生任何变化都会触发
		EventUtil.addHandler(document,"DOMSubtreeModified",function(event){
			console.log(1111111);
		});

		//从文档中移除之前被触发
		EventUtil.addHandler(document,"DOMNodeRemovedFromDocument",function(event){
			console.log(1111111);
		});
		document.body.removeChild(mytext);

		var mylist=document.getElementById("mylist");
		var item=document.createElement("li");
		//document中任意元素被添加就会触发
		EventUtil.addHandler(document,"DOMNodeInserted",function(event){
			console.log(1111111);
		});

		//DOM结构中发生任何变化都会触发
		EventUtil.addHandler(mylist,"DOMSubtreeModified",function(event){
			console.log(111111);
		});

		//从文档中添加之前被触发
		EventUtil.addHandler(item,"DOMNodeInsertedIntoDocument",function(event){
			console.log(111111);
		});
		mylist.appendChild(item);

		//在DOM树之后就会触发,不理会图像、javascript文件、css文件或其他资源是否已经下载
		//DOMContentLoaded    load
		EventUtil.addHandler(document,"DOMContentLoaded",function(event){
			console.log("DOMContentLoaded速度一定快于load事件")
		})

		readystatechange 支持IE、firfox、opera,提供文档或者元素加载过程,但是很难预料与load事件一起使用时候
		1、document.readyState==uninitialized  尚未初始化
		2、loading  对象正在加载数据
		3、interactive  可以操作对象,但还没有完全加载
		4、对象已经加载完毕
		EventUtil.addHandler(document,"readystatechange",function(event){
			//情绪化,限制IE,很难预料
		})

		//hashchange事件  一定给window添加,#号后面的值变化
		EventUtil.addHandler(window,"hashchange",function(event){
			console.log(event.oldURL+";"+event.newURL);
		});
	</script>
</body>
</html>

13 事件类型(三)

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
	<title>3</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width,initial-scale=1.0">
</head>
<body>
	<button id="mybtn">点击我</button>
	<script type="text/javascript">
		var EventUtil={
			//兼容所有浏览器  addEventListener  attachEvent
			addHandler:function(element,type,handler){
				//绑定事件
				//chrome、firefox、IE9等   addEventListener
				//IE8及IE8以下的浏览器等  attachEvent
				if (element.addEventListener) {
					element.addEventListener(type,handler,false);
				}else if(element.attachEvent){
					element.attachEvent("on"+type,handler);
				}else{
					element["on"+type]=null;
				}
			},
			getCharCode:function(event){
				if(typeof event.charCode=="number"){
					return event.charCode;
				}else{
					return event.keyCode;
				}
			},
			removeHandler:function(element,type,handler){
				//移除事件
				//chrome、firefox、IE9等   removeEventListener
				//IE8及IE8以下的浏览器等  detachEvent
				if (element.removeEventListener) {
					element.removeEventListener(type,handler,false);
				}else if(element.detachEvent){
					element.detachEvent("on"+type,handler);
				}else{
					element["on"+type]=null;
				}
			},
			getTarget:function(event){
				return event.target||event.srcElement;
			},
			preventDefault:function(event){
				if(event.preventDefault){
					event.preventDefault();
				}else{
					event.returnValue=false;
				}
			},
			stopPropagation:function(event){
				if(event.stopPropagation){
					event.stopPropagation();
				}else{
					event.cancelBubble=true;
				}
			}
		}

		//touch

		var mybtn=document.getElementById("mybtn");
		//手指触摸屏幕时触发
		EventUtil.addHandler(mybtn,"touchstart",function(event){
			console.log("当前触摸屏幕的触摸点数组:"+event.touches);
			console.log("数组中只包含引起事件的触摸点信息:"+event.changeTouches);
			console.log("只包含放在元素上的触摸信息:"+event.targertTouches);
		});

		//手指在屏幕上滑动时触发
		EventUtil.addHandler(mybtn,"touchmove",function(event){
			console.log(111111);
		});

		//手指在屏幕上移开时触发
		EventUtil.addHandler(mybtn,"touchend",function(event){
			console.log(111111);
		});

		//touchcancel 当系统停止跟踪触摸时触发
	</script>
</body>
</html>

14 小项目

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
	<title>3</title>
	<meta charset="utf-8">
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
			list-style: none;
		}
		#canvas{
			height: 300px;
		}
		li{
			float: left;
			width: 100px;
			height: 30px;
			border-radius: 10px;
			background: #333;
			text-align: center;
			line-height: 30px;
			color: #fff;
		}
		ul li:nth-child(1){
			background: red;
		}
		ul li:nth-child(2){
			background: black;
		}
		ul li:nth-child(3){
			background: blue;
		}
		ul li:nth-child(4){
			background: yellow;
		}
		ul li:nth-child(5){
			background: green;
		}
	</style>
</head>
<body>
	<div id="canvas"></div>
	<ul id="ul">
		<li>红色</li>
		<li>黑色</li>
		<li>蓝色</li>
		<li>黄色</li>
		<li>绿色</li>
	</ul>
	<script type="text/javascript">
		var EventUtil={
			//兼容所有浏览器  addEventListener  attachEvent
			addHandler:function(element,type,handler){
				//绑定事件
				//chrome、firefox、IE9等   addEventListener
				//IE8及IE8以下的浏览器等  attachEvent
				if (element.addEventListener) {
					element.addEventListener(type,handler,false);
				}else if(element.attachEvent){
					element.attachEvent("on"+type,handler);
				}else{
					element["on"+type]=null;
				}
			},
			getCharCode:function(event){
				if(typeof event.charCode=="number"){
					return event.charCode;
				}else{
					return event.keyCode;
				}
			},
			removeHandler:function(element,type,handler){
				//移除事件
				//chrome、firefox、IE9等   removeEventListener
				//IE8及IE8以下的浏览器等  detachEvent
				if (element.removeEventListener) {
					element.removeEventListener(type,handler,false);
				}else if(element.detachEvent){
					element.detachEvent("on"+type,handler);
				}else{
					element["on"+type]=null;
				}
			},
			getTarget:function(event){
				return event.target||event.srcElement;
			},
			preventDefault:function(event){
				if(event.preventDefault){
					event.preventDefault();
				}else{
					event.returnValue=false;
				}
			},
			stopPropagation:function(event){
				if(event.stopPropagation){
					event.stopPropagation();
				}else{
					event.cancelBubble=true;
				}
			}
		}
		var ul=document.getElementById('ul');
		var canvas=document.getElementById('canvas');
		EventUtil.addHandler(ul,"click",function(event){
			var that=event.target;
			if(that.innerHTML=="红色"){
				canvas.style.background="red";
			}else if(that.innerHTML=="黑色"){
				canvas.style.background="black";
			}else if(that.innerHTML=="蓝色"){
				canvas.style.background="blue";
			}else if(that.innerHTML=="黄色"){
				canvas.style.background="yellow";
			}else if(that.innerHTML=="绿色"){
				canvas.style.background="green";
			}
		})
	</script>
</body>
</html>

发布了26 篇原创文章 · 获赞 10 · 访问量 1485

猜你喜欢

转载自blog.csdn.net/qq_43405634/article/details/104524477