(十二)Javaweb(jQury事件、事件冒泡、事件对象)

1.jquery要先于js的页面加载
(十二)Javaweb(jQury事件、事件冒泡、事件对象)_第1张图片
2.(十二)Javaweb(jQury事件、事件冒泡、事件对象)_第2张图片

(十二)Javaweb(jQury事件、事件冒泡、事件对象)_第3张图片

(十二)Javaweb(jQury事件、事件冒泡、事件对象)_第4张图片
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

移除一个
在这里插入图片描述
移除多个
在这里插入图片描述
在这里插入图片描述
(十二)Javaweb(jQury事件、事件冒泡、事件对象)_第5张图片
(十二)Javaweb(jQury事件、事件冒泡、事件对象)_第6张图片

(十二)Javaweb(jQury事件、事件冒泡、事件对象)_第7张图片

在这里插入图片描述
(十二)Javaweb(jQury事件、事件冒泡、事件对象)_第8张图片
(十二)Javaweb(jQury事件、事件冒泡、事件对象)_第9张图片
js获取事件对象
(十二)Javaweb(jQury事件、事件冒泡、事件对象)_第10张图片
jQuery获取事件对象
(十二)Javaweb(jQury事件、事件冒泡、事件对象)_第11张图片
事件对象的作用

可以查看事假类型

(十二)Javaweb(jQury事件、事件冒泡、事件对象)_第12张图片

(十二)Javaweb(jQury事件、事件冒泡、事件对象)_第13张图片
通过事件判断不同的类型进而做出不同的行为
(十二)Javaweb(jQury事件、事件冒泡、事件对象)_第14张图片

DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>title>
		<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js" type="text/javascript" charset="utf-8">script>
		<style type="text/css">
			#samll{
       
				position:absolute;
				margin:auto;
				top: 200px;
				bottom 200px;
				left:0px;
				right: 0px;
				width:200px;
				height: 200Px;
			}
			#big{
       
				width:600px;
				height: 600Px;
			}
			.big{
       
				display: none;
			}
		style>
		<script type="text/javascript">
			$(function(){
       
				$("#samll").bind("mouseover mouseout mousemove",function(event){
       
					if(event.type=="mouseover"){
       
						// 当是鼠标进入事件时,大图展示
						$("#div").show();
					}else if(event.type=="mouseout"){
       
						// 当是鼠标离开事件时,大图隐藏
						$("#div").hide();
					}else{
       
						$("div").offset({
       
							top: event.pageY+10,
							left:event.pageX+10
						});
					}
				});
			});
		script>
	head>
	
	 <body>
		 <img id="samll" src="明星.jpeg" >
		 
		 <div id="div">
		 	<img id="big" class="" src="明星.jpeg" >
		 div>
    body>
html>

你可能感兴趣的:(javaweb)