首页> 基础笔记 >JS/JQ基础学习 >事件事件

JavaScript-多个元素的事件绑定

作者：小萝卜 2023-03-22 【 javascript 】浏览 653

简介JavaScript-多个元素的事件绑定

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>多个元素的事件绑定</title>
	<style type="text/css">
		.item{width:150px;height:150px;background:#333;float:left;margin-right:20px;}
	</style>
</head>
<body>
	<div class="item"></div>
	<div class="item"></div>
	<div class="item"></div>
	<div class="item"></div>
	<div class="item"></div>
	<div class="item"></div>
	<div class="item"></div>
	
	<script type="text/javascript">
	//获取
	var divs = document.getElementsByTagName('div');
	//遍历
	for(var i=0;i<divs.length;i++){
		//事件绑定   事件在绑定的时候 不会直接执行
		divs[i].ondblclick = function(){//  on  dbl double双  school
			//样式操作
			this.style.background = "orange";//这里的this不能使用divs[i]来代替
			//文本操作
			this.innerHTML = "iloveyou";
			//属性操作
			this.setAttribute('love','iloveyou');
		}
	}

	</script>

</body>
</html>

很赞哦！ (0)

上一篇：JavaScript-鼠标移入和鼠标移出事件onmouseover、onmouseout

下一篇：JavaScript-双击事件ondblclick