JavaScript事件(Event)

最新推荐文章于 2022-04-27 00:19:05 发布

棉马咪

最新推荐文章于 2022-04-27 00:19:05 发布

阅读量130

点赞数

分类专栏： web前端文章标签： js javascript jquery css

本文链接：https://blog.csdn.net/mianmami/article/details/116780833

版权

web前端专栏收录该内容

15 篇文章 0 订阅

订阅专栏

阻止冒泡

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<style>
    #outer{
        position: absolute;
        width: 400px;
        height: 400px;
        top:0;
        left: 0;
        bottom:0;
        right: 0;
        margin: auto;
        background-color: deeppink;
    }
    #middle{
        position: absolute;
        width: 300px;
        height:300px;
        top:50%;
        left: 50%;
        margin-left: -150px;
        margin-top: -150px;
        background-color: deepskyblue;
    }
    #inner{
        position: absolute;
        width: 100px;
        height:100px;
        top:50%;
        left:50%;
        margin-left: -50px;
        margin-top: -50px;;
        background-color: darkgreen;
        text-align: center;
        line-height: 100px;
        color:white;
    }
    #outer,#middle,#inner{
        border-radius:100%;
    }
</style>
<body>
<div id="outer">
    <div id="middle">
        <div id="inner">
            click me!
        </div>
    </div>
</div>
<script>
    var innerCircle= document.getElementById("inner");
	var outerCircle= document.getElementById("outer");
	
	
	innerCircle.onclick = function(e){
		var evt = e || event;
		alert("click innerCircle");
		evt.cancelBubble = true;
	}//冒泡的顺序是从子节点-> 父节点，因此需要在这个地方添加。
	
	outerCircle.onclick = function(){
		
		alert("click outerCircle");
		
	}
	
    
</script>
</body>
</html>

事件代理

传统的写法：
在原来的一些节点上添加了事件，但是当新增加节点的时候，这些新增加的节点没有与旧节点同样的事件。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
		</style>
		
	</head>
	<body>
		<ul>
			<li>1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
			<li>5</li>
		</ul>
	</body>
	<script>
		var oul = document.getElementsByTagName("ul")[0];
		var oli = document.getElementsByTagName('li');
		for(var i=0; i<oli.length; ++i){
			oli[i].onclick = function(e){
				alert(this.innerHTML);
			}
		}
		//新增加的事件
		for(var i=0; i<5; ++i){
			var newOli = document.createElement("li");
			newOli.innerHTML = i;
			oul.appendChild(newOli);
		}
	
	</script>
</html>

事件代理写法：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
		</style>
		
	</head>
	<body>
		<ul>
			<li>1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
			<li>5</li>
		</ul>
	</body>
	<script>
		var oul = document.getElementsByTagName("ul")[0];
		var oli = document.getElementsByTagName('li');
		// for(var i=0; i<oli.length; ++i){
		// 	oli[i].onclick = function(e){
		// 		alert(this.innerHTML);
		// 	}
		// }
		//给父节点添加事件委托
		oul.onclick = function(e){
			var evt = e || event;
			var _target = evt.target || evt.srcElement; //target表示那个目标触发了事件，这里是一种兼容性的写法。
			if(_target.nodeName.toUpperCase() == 'LI'){
				alert(_target.innerHTML)
			}
		}
		
		
		for(var i=0; i<5; ++i){
			var newOli = document.createElement("li");
			newOli.innerHTML = i;
			oul.appendChild(newOli);
		}
	
	</script>
</html>

事件的默认行为
JavaScript本身具有一些属性：a标签的跳转，submit按钮的提交，鼠标右键出现菜单栏和文本框的输入。阻止这些默认方式的代码是：

event.preventDefault()
event.returnValue=false
return false

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
		</style>
		
	</head>
	<body>
		<a href="">test</a>
		<form action="" method="">
			<input type="text" value=""/>
			<input type="button" name="" id="" value="按钮" />
		</form>
	</body>
	<script>
		var oa = document.getElementsByTagName('a')[0];
		oa.onclick = function(e){
			console.log("aaaa");
			return false; //如果不加这一句，就会进行跳转，而不输出aaaa；
		}
		
		var oform = document.getElementsByTagName('form')[0];
		var oinput = document.getElementsByTagName('input');
		oform.onsubmit = function(){
			console.log("aaaa");
			// return false;
		}
		oinput[0].onkeydown = function(){
			return false;
		} // 不能输入新的东西
		
		document.oncontextmenu = function(){
			return false;
		}//不能显示右键的菜单
	</script>
</html>

事件监听器

添加事件监听器：addEventListener(事件名，处理函数，布尔值) ture为捕获，false为冒泡
移除事件监听器：removeEventListener(事件名，处理函数)
IE下的添加事件监听器：attachEvent(事件名，处理函数)
IE下的移除事件监听器：detachEvent(事件名，处理函数)
这里的事件名不带on即可；


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			html, body{
				margin: 0; padding: 0;
			}
			#box1{
				
				width: 200px; height: 200px; background-color: honeydew;
				position: relative;
			}
			div #box2{
				width: 100px; height: 100px; background-color: red; 
				position: absolute;
				left: 50%; top:50%;
				transform: translate(-50px, -50px);
			}
		</style>
		
	</head>
	<body>
		<div id="box1">
			<div id="box2">
				
			</div>
		</div>	
		
	</body>
	<script>
		var obox1 = document.getElementById('box1');
		var obox2 = document.getElementById('box2');
		// obox1.addEventListener("click", function(){
		// 	console.log("click_box1");
		// }, true);
		// obox2.addEventListener("click", function(){
		// 	console.log("click_box2");
		// }, true);
		
		//在IE下操作。需要将IE的版本调整到10，但是其他上一段代码在高版本的ID浏览器也是可以通用的。
		obox1.attachEvent("onclick", function(){
			console.log("click_box1");
		});
		obox2.attachEvent("onclick", function(){
			console.log("click_box2");
		});
	</script>
</html>

参考链接

棉马咪

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript事件(Event)

阻止冒泡<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title></head><style> #outer{ position: absolute; width: 400px; height: 400px; top:0;
复制链接

扫一扫