JavaScript常见事件使用

忘是亡心i 2024-04-17 19:58 63阅读 0赞

<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>