Javascript(四十一)Event事件监听器

事件监听器:addEventListener()方法用于向指定元素添加事件监听,IE8以下不支持,火狐和谷歌支持。
普通的事件绑定:

元素节点.on+事件类型=匿名函数

缺点:1.重复事件会被覆盖
Javascript(四十一)Event事件监听器_第1张图片
缺点2:事件移除使用简单粗暴的null代替事件处理函数
Javascript(四十一)Event事件监听器_第2张图片
addEventListener事件绑定:

target.addEventlistener(‘事件类型’,匿名函数/执行函数名,false/true)
注:匿名函数名没有双引号

第三个参数是否使用捕获(捉)(反向冒泡),默认为false,为冒泡

好处:可以绑定多个同事件类型或不同事件类型的事件函数在一个对象上,执行顺序按照绑定的顺序来,并且不会覆盖。
Javascript(四十一)Event事件监听器_第3张图片
removeEventListener事件移除:

好处:可以精确的删除某一个函数

target.addEventlistener(‘事件类型’,需要移除函数名,false/true)

第二个参数:表示只移除需要的移出的事件处理函数,原有的或者还有其他的处理函数不会被移除
Javascript(四十一)Event事件监听器_第4张图片
addEventListener和removeEventListener在低版本的IE浏览器不兼容:

IE有类似实现方法attachEvent()和detachEvent()(只在IE8及以下可以执行,其他浏览器和其他IE版本不可以用)

格式:target.attachEvent(‘on’+事件类型,匿名函数)

​ target.detachEvent(‘on’+事件类型,匿名函数)

IE下的addEventListener:
Javascript(四十一)Event事件监听器_第5张图片
跨浏览器兼容:

function  event(node,type,fn){
				if(node.addEventListener){
					node.addEventListener(type,fn,false)
				}else{
					node.attachEvent('on'+type,fn)
				}
			}

Javascript(四十一)Event事件监听器_第6张图片
Javascript(四十一)Event事件监听器_第7张图片

事件冒泡:点击box3,引起事件冒泡,box2,box跟着发生点击事件

从外到里

事件发生顺序:box3->box2->box
Javascript(四十一)Event事件监听器_第8张图片
事件捕获:点击box3,引起事件冒泡,box2,box跟着发生点击事件

事件发生顺序:box->box2->box3 (从里到外)
Javascript(四十一)Event事件监听器_第9张图片
当事件捕获和冒泡事件同时出现时,先捕获后冒泡⭐最里的元素节点是先冒泡后捕获。

案例:动态生成表格
Javascript(四十一)Event事件监听器_第10张图片
注:不能在一开始就定义一个新节点,然后后每次循环就只是给追加同一个新节点,那么会被覆盖,因为检测到父元素有同样的节点,因此就会出现永远添加的只有一个的。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			tr{
				line-height: 100%;
				text-align: center;
			}
		</style>
	</head>
	<body>
		<input type="text" placeholder="行" value="2"/>
		<input type="text" placeholder="列" value="2"/>
		<button type="button" id="btn">生成表格</button>
		<div id="main">
			
		</div>
		
		<script type="text/javascript">
			var obtn=document.getElementById('btn')
			var oIn=document.getElementsByTagName('input')
			var newNode=document.createElement('table')
			var oMain=document.getElementById('main')
			obtn.addEventListener('click',function(){
				
				if(!oIn[0].value||!oIn){
					alert('请输入行、列')
					return
				}
				for(var i=0;i<oIn[0].value;i++){
					var row=document.createElement('tr')
					if(i%2==0){
						row.style.backgroundColor='pink'
					}
					else{
						row.style.backgroundColor='gold'
					}
					newNode.appendChild(row)
					row.style.height='50px'
				}
				for(var x=0;x<newNode.children.length;x++){
					/* 判断元素节点是否是tr */
					if(newNode.children[x].nodeName.toLowerCase()=='tr'){
						/* 获取到行数,并给每个tr标签添加指定的行 */
						for(var j=0;j<oIn[1].value;j++){
							var col=document.createElement('td');
							if(oIn[1].value-1==j){
								var newBut=document.createElement('button')
								newBut.innerText='删除'
								col.appendChild(newBut)
							}
							col.style.width='50px'
							newNode.children[x].appendChild(col)
							
						}
					}
				}
				// document.body.lastChild=newNode
				
				oMain.appendChild(newNode)
			})
			oMain.onclick=function(ev){
				var e=ev||window.event
				var target=e.target||e.srcElement
				if(target.nodeName.toLowerCase()=='button'){
					newNode.removeChild(target.parentNode.parentNode)
				}
			}
		</script>
	</body>
</html>

案例:放大镜
Javascript(四十一)Event事件监听器_第11张图片

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			#big{
				position: relative;
				margin-left: 100px;
				margin-top: 100px;
				display: inline-block;
				height: 100%;
				overflow: hidden;
			}
			#opcity0{
				width: 200px;
				height: 200px;
				background-color: rgba(235, 235, 235, 0.5);
				position: absolute;
				top: 0;
				left: 0;
				display: none;
				
			}
			#bigg{
				width: 400px;
				height: 400px;
				overflow: hidden;
				display: inline-block;
				margin-top: 100px;
				vertical-align: top;
			}
			#small{
				width: 200px;
				height: 200px;
				background: url(../精灵移动/2700.gif_wh860.gif) no-repeat;
				/*	让子元素放大两倍 父元素溢出隐藏 */
				transform: scale(2);
			}
		</style>
	</head>
	<body>
		<div id="big">
			<img src="../精灵移动/2700.gif_wh860.gif" >
			<div id="opcity0"></div>
		</div>
		<div id="bigg">
			<div id="small"></div>
		</div>
		
		<script type="text/javascript">
			var oOp=document.getElementById('opcity0')
			var obig=document.getElementById('big')
			var small=document.getElementById('small')
			obig.onmouseenter=function(){
				oOp.style.display='block'
			}
			obig.onmouseleave=function(){
				oOp.style.display='none'
			}
			oOp.onmousedown=function(ev){
				var e=ev|| window.event;
				// 鼠标初始拖拽位置
				var startX=e.clientX-oOp.offsetLeft;
				var startY=e.clientY-oOp.offsetTop;
				obig.onmousemove=function(ev){
					var e=ev|| window.event;
					// 元素跟随鼠标位置
					oOp.style.left=e.clientX-startX+'px';
					oOp.style.top=e.clientY-startY+'px';
					//获取图片宽高
					var obigW=obig.offsetWidth;
					var obigH=obig.offsetHeight;
					/* 放大镜越界处理 */
					if(oOp.offsetLeft<=0){
						oOp.style.left='0px'
					}
					else if((oOp.offsetLeft+oOp.offsetWidth)>=obigW){
						oOp.style.left=obigW-oOp.offsetWidth+'px'
					}
					if(oOp.offsetTop<=0){
						oOp.style.top='0px'
					}
					else if((oOp.offsetTop+oOp.offsetHeight)>=obigH){
						oOp.style.top=obigH-oOp.offsetHeight+'px'
					}
					//放大显示  移动的位置还是一样,只不过子元素放大两倍而已
					small.style.backgroundPosition=(-oOp.offsetLeft)+'px '+(-oOp.offsetTop)+'px'
					// console.log((-oOp.offsetLeft)+'px '+(-oOp.offsetTop)+'px')
				}
			}
			obig.onmouseup=function(){
				obig.onmousemove=''
			}
			
		</script>
	</body>
</html>

你可能感兴趣的:(Javascript)