JavaScript常见事件使用

最新推荐文章于 2025-01-05 07:00:00 发布

懦夫救星*

最新推荐文章于 2025-01-05 07:00:00 发布

阅读量329

点赞数

本文链接：https://blog.csdn.net/v790873/article/details/100167200

版权

<h1>helloworld</h1>
		<button>按钮</button>
		<script type="text/javascript">
			var btn = document.querySelector('button')
			//元素对象.on事件名称 = 函数对象
			btn.onclick = function(event){
				console.log(event)
				var h1 = document.querySelector('h1');
				h1.style.backgroundColor = "skyblue";
				
			}
			//元素对象.addEventListener('事件名称'，函数对象)
			function cba(){console.log('cba')}
			var abc = function(event){
				console.log(event)
				var h1 = document.querySelector('h1');
				h1.style.fontSize= "100px";
			}
			btn.addEventListener('click',cba)
			
			btn.addEventListener('click',function(e){
				console.log(e)
				var h1 = document.querySelector('h1');
				h1.style.border = '10px solid #ccc';
			})
		</script>
	</body>

使用常用事件画图

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#d1{
				width: 800px;
				height: 800px;
				background: skyblue;
				overflow: hidden;
				position: absolute;
				left: 0;
				top: 0;
			}
		</style>
	</head>
	<body>
		<div id="d1">
			
		</div>
		
		
		
		<script type="text/javascript">
			var d1 = document.querySelector('#d1')
			//鼠标进入事件
			d1.addEventListener('mouseenter',function(e){
				console.log(e)
				d1.style.backgroundColor = 'deeppink';
			})
			//鼠标离开事件
			d1.addEventListener('mouseleave',function(e){
				console.log(e)
				d1.style.backgroundColor = 'purple';
			})
			
			
			var isDraw = false;
			
			d1.addEventListener('mousemove',function(e){
				if(isDraw){
					var div = document.createElement('div')
					div.style.width = '10px';
					div.style.height = "10px";
					div.style.backgroundColor = 'yellow';
					div.style.borderRadius = "5px";
					div.style.position = 'absolute';
					div.style.left = e.pageX + 'px';
					div.style.top = e.pageY + 'px';
					d1.appendChild(div)
					//console.log(e)
				}
				
			})
			
			
			d1.addEventListener('click',function(){
				//点击开始写内容
				isDraw = true;
			})
			
			d1.addEventListener('dblclick',function(){
				//双击结束写内容
				isDraw = false;
			})
			
			
			
			
			
		</script>
	</body>
</html>

冒泡和捕获

<body>
		<div class="parent">
			<div class="child">
				<button>按钮</button>
			</div>
		</div>
		
		<script type="text/javascript">
			var parent = document.querySelector('.parent');
			var child = document.querySelector('.child')
			var btn = document.querySelector('button')
			//冒泡
			btn.addEventListener('click',function(e){
				console.log('btn')
			})
			child.addEventListener('click',function(e){
				console.log('child')
			})
			parent.addEventListener('click',function(e){
				console.log('parent')
			})
			
			//捕获
			btn.addEventListener('click',function(e){
				console.log('捕获：btn')
			},true)
			child.addEventListener('click',function(e){
				console.log('捕获：child')
			},true)
			parent.addEventListener('click',function(e){
				console.log('捕获：parent')
			},true)
		</script>
	</body>