事件

最新推荐文章于 2024-06-17 07:15:00 发布

铭铭铭铭天

最新推荐文章于 2024-06-17 07:15:00 发布

阅读量97

点赞数 1

文章标签：鼠标事件键盘事件表单事件全选-全不选-反选选项卡

本文链接：https://blog.csdn.net/weixin_45542045/article/details/102614018

版权

鼠标事件–onclick

格式：
box.事件关键词=function() {
事件发生之后要执行的代码
}

鼠标点击事件

var box = document.getElementById('box');
var flag = 0;
box.onclick = function () {
    if (flag==0) {
        box.style.backgroundColor = 'red';
        flag = 1;
    }
    else {
        box.style.backgroundColor = 'green';
        flag = 0;
    }
};

鼠标移入事件–onmouseover

box.onmouseover = function () {
    console.log('鼠标移入了box标签内')
}

鼠标移出事件–onmouseout

box.onmouseout = function () {
    console.log('鼠标移出了box标签内--------')
}

鼠标移动事件–onmousemove

 box.onmousemove = function () {
     console.log('检测到鼠标移动了，=====')
 }

鼠标按下事件–onmousedown

 box.onmousedown = function () {
     console.log('鼠标按下了，------------')
 }

鼠标抬起事件–onmouseup

box.onmouseup = function () {
    console.log('鼠标抬起了，------------')
}

键盘事件

格式：
window.事件关键字 = function() {
事件发生之后要执行的代码
}

键盘按下事件–onkeydown

window.onkeydown = function () {
    console.log('键盘按下了，------')
}

键盘抬起事件–onkeyup

 window.onkeyup = function () {
     console.log('键盘抬起了，------')
 }

表单事件

格式：
form.表单对象.事件关键词 = function() {
要执行的代码
}
ps：onchange中的 this 指向的是调用这个方法谁

获取表单对象

var form = document.getElementById('form');

获取焦点–onfocus

form.username.onfocus = function () {
    console.log('鼠标获取到了焦点');
}

失去焦点–onblur

form.username.onblur = function () {
    console.log('鼠标失去了焦点');
}

value值发生改变–onchange

form.address.onchange = function () {
    // 谁调用了this，this指向谁，
    // 这里this是指username输入框
    console.log(this.value)
}

提交表单–afert

form.onsubmit = function () {
    alert('如果有后端，则把form中的数据提交到了后端');
}

案例练习–全选-全不选-反选

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
</head>
<body>
	<input type="checkbox" name="">  汽车 <br>
	<input type="checkbox" name="" checked>  口红  <br>
	<input type="checkbox" name="">  短裙  <br>
	<input type="checkbox" name="">  连衣裙  <br>
	<button onclick="checkall()">全选</button>
	<button onclick="checkno()">全不选</button>
	<button onclick="fcheck()">反选</button>
	<script type="text/javascript">
		// 1.获取元素对象
		var inps = document.getElementsByTagName('input');
		// 2.全选
		function checkall(){
			// 将所有input设置为选中状态
			for(var i=0;i<inps.length;i++){
				inps[i].checked=true;
			}
		}
		// 2.全不选
		function checkno(){
			console.log('11');
			// 将所有input设置为不选中状态
			for(var i=0;i<inps.length;i++){
				inps[i].checked=false;
			}
		}
		// 3.反选
		function fcheck(){
			for(var i=0;i<inps.length;i++){
				// if(inps[i].checked==true){
				// 	inps[i].checked=false;
				// }else{
				// 	inps[i].checked=true;
				// }
				inps[i].checked= !inps[i].checked
			}
		}
	</script>
</body>
</html>

案例练习–选项卡

分析：

HTML结构
获取元素对象
给每个标题的 li 添加移入事件（循环）
初始化操作
给当前触发事件的元素对象添加 class 属性
标题和内容关联，标题和内容一一对应，索引值相同，获取当前触发事件的元素的索引，通过次索引去获取对应的内部元素对象
初始化操作
设置 class 属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>------</title>
	<style>
		*{margin: 0; padding: 0; list-style: none}
		.wrap{
			width: 400px;
			height: 300px;
			border: 1px solid red;
		}
		#title{
			overflow: hidden;
		}
		#title li{
			float: left;
			height: 50px;
			width: 100px;
			border: 1px solid blue;
			box-sizing: border-box;
			text-align: center;
			line-height: 50px;
		}
		#title .active1{
			background: red;
		}
		#content li{
			height: 250px;
			border: 1px solid yellow;
			/*设置隐藏*/
			display: none;
		}
		#content .active2{
			/*触发事件的时候显示隐藏*/
			display: block;
		}
	</style>
</head>
<body>
	<div class="wrap">
		<ul id="title">
			<li class="active1">话费</li>
			<li>机票</li>
			<li>酒店</li>
			<li>游戏</li>
		</ul>
		<ul id="content">
			<li class="active2">充话费</li>
			<li>订机票</li>
			<li>订酒店</li>
			<li>打游戏</li>
		</ul>
	</div>
	<script>
		// 获取标题元素对象
		var tits = document.getElementById('title').getElementsByTagName('li');
		var cons = document.getElementById('content').getElementsByTagName('li');
		// 遍历标题，给每个标题添加移入事件
		for(var i=0;i<tits.length;i++){
			// 给每个元素添加一个index属性
			tits[i].index=i;
			// console.log(i);
			// 添加事件，移入谁给谁添加事件active1
			tits[i].onmouseover=function () {
				// 在添加事件之前把所有li的active1 清除掉
				for(var j=0;j<tits.length;j++){
					// console.log('-----------------')
					tits[j].removeAttribute('class');
					cons[j].removeAttribute('class');
				}
				this.setAttribute('class','active1');
				// 初始化内容class
				for(var x=0;x<cons.length;x++){
					cons[x].removeAttribute('class');
				}
				// 将标题和内容进行关联，标题和内容的li的索引一样
				cons[this.index].setAttribute('class','active2');
			}
		}
	</script>
</body>
</html>

铭铭铭铭天

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
事件

鼠标事件–onclick格式：box.事件关键词=function() {事件发生之后要执行的代码}鼠标点击事件var box = document.getElementById('box');var flag = 0;box.onclick = function () { if (flag==0) { box.style.backgroundColor...
复制链接

扫一扫