<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>JavaScript</title>
<style>
.container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
/* font-size: 30px; */
}
.container>div {
width: 300px;
height: 300px;
border: 1px solid #fff000;
margin-left: 10px;
margin-top: 10px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
h1{
display: none;
}
h2{
text-align: center;
width: 180px;
border: 1px rebeccapurple solid;
}
#sixthDiv{
display: flex;
flex-direction: row;
}
#sixthDiv select{
width: 100px;
}
#seventhDiv{
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
}
#seventhDiv input{
margin: 0;
padding: 0;
height: 20px;;
}
#seventhDiv-ul{
list-style: none;
display: flex;
flex-direction: row;
flex-wrap: wrap;
margin: 0;
padding: 0;
}
#seventhDiv-ul li{
background-color: #4ca6ff;
color: #fff;
border-radius: 5px;
border: 1px solid #808CFF;
margin-top: 5px;
margin-left: 5px;
width: 90px;
height: 30px;;
display: flex;
justify-content: center;
align-items: center;
}
</style>
</head>
<body onload="come()" onunload="goOut()">
<div class="container">
<div id="firstDiv">
<h2>请点击</h2>
</div>
<div id="secendDiv" onmousemove="mouseMove(this)" onmousedown="mouseDown(this)">
<h1>mouserMove</h1>
<h1>mouseDown</h1>
<span></span>
</div>
<div id="thirdDiv" onmouseover="mouseOver(this)" onmouseout="mouseOut(this)">
<h2>mouseOver</h2>
<h2>mouseOut</h2>
</div>
<div id="fourthDiv" onmouseenter="mouseEnter(this)" onmouseleave="mouseLeave(this)">
<h2>mouseEnter</h2>
<h2>mouseLeave</h2>
</div>
<div id="fifthDiv" ondblclick="dulClick(this)">
<h2>请双击</h2>
</div>
<div id="sixthDiv">
<select name="country" id="countryId">
<option value="default" selected>--请选择--</option>
<option value="China">中国</option>
<option value="America">美国</option>
</select>
<select name="province" id="provinceId">
<option value="default" selected>--请选择--</option>
</select>
</div>
<div id="seventhDiv">
<input type="text" onblur="console.log(this.value)" placeholder="失去焦点触发"><br>
<input type="text" onfocus="this.style.backgroundColor = '#FF9999'" placeholder="点我就变色"><br>
<input type="text" id="keyUp" onkeyup="keyUp(this)" placeholder="键盘弹起触发|输入树">
<ul id="seventhDiv-ul">
</ul>
</div>
</div>
<script src="./event.js"></script>
</body>
</html>
/**
* 事件
*/
//onload进来是触发 onunload离开时触发 在body加载之前加载
function come() {
let isCookie = navigator.cookieEnabled ? "已启用 cookie" : "未启用 cookie";
console.log(isCookie);
};
function goOut() {
// 刷新时调用
window.open('http://www.baidu.com');
};
//鼠标事件
//单击事件
document.getElementById('firstDiv').onclick = function () {
document.getElementById('firstDiv').innerHTML = "this is onclick";
};
//鼠标在元素内部移到时不断触发。不能通过键盘触发。
function mouseMove(me) {
me.style.backgroundColor = `rgb(${event.offsetX},${event.offsetY},${event.offsetX})`;
document.querySelector('#secendDiv span').innerHTML = `${event.offsetX} , ${event.offsetY}`;
};
//鼠标按钮被按下(左键或者右键)时触发。不能通过键盘触发。
function mouseDown(me) {
console.log(me);
};
//鼠标移入目标元素上方。鼠标移到其后代元素上时会触发。
function mouseOver(me) {
console.log('mouseOver:', me);
};
//鼠标移出目标元素。鼠标移出其后代元素时会触发。
function mouseOut(me) {
console.log('mouseOut :', me);
};
//鼠标移入元素时触发,鼠标移入后代元素不会触发
function mouseEnter(me) {
console.log('mouseEnter :', me);
};
//鼠标移出元素时触发,鼠标移出后代元素不会触发
function mouseLeave(me) {
console.log('mouseLeave :', me);
};
//双击事件
function dulClick(me) {
me.innerHTML = "this is ondblclick";
}
//change 事件 当自身发生改变时,触发
document.getElementById('countryId').addEventListener('change', changeAddress);
function changeAddress() {
let provinces;
let country = document.getElementById('countryId').value;
if (country === 'China') {
provinces = `<option value="hubei" selected>湖北</option>
<option value="shenzhen">深圳</option>`;
} else if (country === 'America') {
provinces = `<option value="NewYork" >纽约</option>
<option value="Los Angeles" >洛杉矶</option>`;
} else {
provinces = `<option value="default" selected>--请选择--</option>`;
}
document.getElementById('provinceId').innerHTML = provinces;
}
//模拟数据 当键盘弹起后入ul中匹配li 并输出
const obj = ['图片', '风景图片', '星星图片', '海洋图片','柳树','杨树','槐树','杨柳树','无聊的周一','星期一','星期二','星期三','星期四','星期五','星期六','星期天'];
//键盘弹起就对输入的内容模拟匹配 过滤后返回 键盘弹起一次执行一次
function objFilter(data) {
let objData = obj.filter(function (val, index, self) {
return val.indexOf(data) !== -1;
});
return objData;
};
//键盘弹起事件
function keyUp(me) {
let val = me.value;
let result = "";
if (val !== "") {
let data = objFilter(val);
// console.log(data);
data.forEach((dataVal) => {
result += `<li onclick="editkeyUp(this)">${dataVal}</li>`;
});
}
document.getElementById('seventhDiv-ul').innerHTML = result;
};
//每一个li 都绑定了此事件 当点击后就将自身的text输出到input框 并清空ul中的li
function editkeyUp(me) {
let val = me.innerText;
document.getElementById('keyUp').value = val;
document.getElementById('seventhDiv-ul').innerHTML = "";
}