事件

最新推荐文章于 2025-02-26 15:05:44 发布

原创最新推荐文章于 2025-02-26 15:05:44 发布 · 96 阅读

CC 4.0 BY-SA版权

1 键盘回车事件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="jquery-1.12.4.min.js" ></script>
	</head>
	<body>
		<input type="text" />
		<h1>接收内容：</h1>
	</body>
	<script type="text/javascript">
		//键盘抬起事件。每按一下，就会触发一下
		$('input').keyup(function(e){
			//键盘的每个按键，都有一个键盘码
			///console.log(e.keyCode)   获取每个按键的键盘码
			if(e.keyCode == 13){   //13代表回车事件
				$('h1').html('接收内容：' + $(this).val())
			}
		})
	</script>
</html>

2 点击事件

<script type="text/javascript">

window.onload = function(){
    var oBtn = document.getElementById('btn1');

    oBtn.onclick = myalert;

    function myalert(){
        alert('ok!');
    }
}

</script>

3 鼠标移入移出事件

事件属性
元素上除了有样式，id等属性外，还有事件属性，常用的事件属性有鼠标点击事件属性(onclick)，鼠标移入事件属性(onmouseover),鼠标移出事件属性(onmouseout),将函数名称赋值给元素事件属性，可以将事件和函数关联起来。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			ul{
				/*list-style: none;*/
			}
			li{
				/*display: inline-block;*/
				float: left;
				width: 80px;
				height: 80px;
				background: #ccc;
				margin: 50px;
				line-height: 80px;
				text-align: center;
				cursor: pointer;
				list-style:none;
				
				
			}
			.jqlm{
				background: red;
			}
		</style>
		<script type="text/javascript" src="jquery-1.12.4.min.js">
			
		</script>
	</head>
	<body>
		<ul>
			<li>11</li>
			<li>22</li>
			<li>33</li>
			<li>44</li>
		
			<li>44</li>
			<li>44</li>
			<li>44</li>
	
		</ul>
	</body>
	<script type="text/javascript" >
		
		//			给当前类添加背景
		$('li').click(function(){
			$(this).addClass('jqlm')
			$(this).siblings().css({'background':'#ccc'})
//			$(this).siblings().removeClass('jqlm')
		})
		//		简化版
		//		$(this).addClass('jqlm').siblings().removeClass('jqlm')
	</script>
</html>

4 冒泡事件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.grandfather{
				width:500px;
				height:500px;
				background:pink;
			}
			
			.father{
				width:300px;
				height:300px;
				background:green;
			}
			
			.son{
				width:200px;
				height:200px;
				background:blue;
				position:absolute;
				left:0;
				top:520px;
			}
		</style>
		<script type="text/javascript" src="jquery-1.12.4.min.js" ></script>
	</head>
	<body>
		<div class="grandfather">
			<div class="father">
				<div class="son"></div>
			</div>
		</div>
	</body>
	<script type="text/javascript">
		//事件冒泡：子级写了事件，长辈也写了事件。你在触发子级的时候，同时也会触发到长辈的事件
		$('.grandfather').click(function(){
			alert('grandfather')
		})
		
		$('.father').click(function(){
			alert('father')
			//return false三个作用：1.阻止表单提交。2.阻止程序往下运行。3.阻止事件冒泡
			return false
		})
		
		$('.son').click(function(){
			alert('son')
			return false
		})
	</script>
</html>

5 事件委托

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="jquery-1.12.4.min.js" ></script>
	</head>
	<body>
		<input type="text" />
		<input type="button" value="按钮" />
		<ul>
			<li>我是默认的文字1</li>
			<li>我是默认的文字2</li>
			<li>我是默认的文字3</li>
		</ul>
	</body>
	<script type="text/javascript">
		$('input').eq(1).click(function(){
			var oLi = '<li>'+$('input').eq(0).val()+'</li>'
			//在ul的内部最后追加数据
			$('ul').append(oLi)
		})
		
		//动态添加的结构，是不能写事件
//		$('li').click(function(){
//			alert('123')
//		})

		//委托事件的写法：新添加的结构是不能获取事件，通过长辈帮我去完成事件
//		$('委托的那个长辈').delegate('触发的那个元素','什么事件',function(){
//			alert('1')
//		})

		//假如父级也是动态添加，那就要一层一层的网上找。建议直接写body就行了
		$('body').delegate('li','click',function(){
			alert('1')
		})
	</script>
</html>

6 层级菜单

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>层级菜单</title>	
	<style type="text/css">
		body{
			font-family:'Microsoft Yahei';
		}
		body,ul{
			margin:0px;
			padding:0px;
		}
		
		ul{list-style:none;}


		.menu{
			width:200px;
			margin:20px auto 0;
		}

		.menu .level1,.menu li ul a{
			display:block;
			width:200px;
			height:30px;
			line-height:30px;
			text-decoration:none;
			background-color:#3366cc;
			color:#fff;
			font-size:16px;
			text-indent:10px;			
		}

		.menu .level1{
			border-bottom:1px solid #afc6f6;
			
		}

		.menu li ul a{
			font-size:14px;
			text-indent:20px;
			background-color:#7aa1ef;
					
		}

		.menu li ul li{
			border-bottom:1px solid #afc6f6;
		}

		

		.menu li ul{
			display:none;
		}

		.menu li ul.current{
			display:block;
		}

		.menu li ul li a:hover{
			background-color:#f6b544;
		}


	</style>
	
	<script src="jquery-1.12.4.min.js"></script>
	<script type="text/javascript">
		$(function(){
//			$('.menu').children().children('a').click(function(){
//				alert('1')
//			})

			$('.level1').click(function(){
				$(this).next().stop().slideToggle(200).parent().siblings().children('ul').stop().slideUp(200)
				
			})
		})
	</script>
</head>
<body>
	<ul class="menu">
		<li>
			<!--点击的范围-->
			<a href="#" class="level1">手机</a>
			<!--显示隐藏的盒子-->
			<ul class="current">
				<li><a href="#">iPhone X 256G</a></li>
				<li><a href="#">红米4A 全网通</a></li>
				<li><a href="#">HUAWEI Mate10</a></li>
				<li><a href="#">vivo X20A 4GB</a></li>
			</ul>
		</li>
		<li>
			<a href="#" class="level1">笔记本</a>
			<ul>
				<li><a href="#">MacBook Pro</a></li>
				<li><a href="#">ThinkPad</a></li>
				<li><a href="#">外星人(Alienware)</a></li>
				<li><a href="#">惠普(HP)薄锐ENVY</a></li>
			</ul>
		</li>
		<li>
			<a href="#" class="level1">电视</a>
			<ul>
				<li><a href="#">海信(hisense)</a></li>
				<li><a href="#">长虹(CHANGHONG)</a></li>
				<li><a href="#">TCL彩电L65E5800A</a></li>				
			</ul>
		</li>
		<li>
			<a href="#" class="level1">鞋子</a>
			<ul>
				<li><a href="#">新百伦</a></li>
				<li><a href="#">adidas</a></li>
				<li><a href="#">特步</a></li>
				<li><a href="#">安踏</a></li>
			</ul>
		</li>
		<li>
			<a href="#" class="level1">玩具</a>
			<ul>
				<li><a href="#">乐高</a></li>
				<li><a href="#">费雪</a></li>
				<li><a href="#">铭塔</a></li>
				<li><a href="#">贝恩斯</a></li>
			</ul>
		</li>
		
	</ul>
</body>
</html>