webAPI10_10 api-CSDN博客

本文链接：https://blog.csdn.net/weixin_44748332/article/details/91883452

1.事件的阶段
<style>
#dv1{
width: 300px;
height: 300px;
background-color: pink;
}
#dv2{
width: 150px;
height: 150px;
background-color: cyan;
}
#dv3{
width: 70px;
height: 70px;
background-color: green;
}

</style>
</head>
<body>
<div id="dv1">
<div id="dv2">
<div id="dv3"></div>
</div>
</div>
<script src="common.js"></script>
<script>
/*
* 三个事件阶段:
* 1 事件捕获阶段 : 从外向内触发
* 2.事件目标阶段: 最开始选择的那个
* 3.事件冒泡阶段: 从里向外触发
* */
//同时给三个div注册点击事件
var arr = [my$("dv3"), my$("dv2"), my$("dv1")];
arr.forEach(function (ele, i) {
//给每一个绑定点击事件
ele.addEventListener("click", function (e) {
console.log(e)
//e.eventPhase 判断是什么事件阶段
console.log(this.id+"===="+e.eventPhase)
}, true)
// 为false 是冒泡事件, 为true是捕获事件
})

</script>

2.为同一个元素绑定不同的事件
<style>
#dv{
width: 300px;
height: 300px;
border: 1px solid;
}
</style>
</head>
<body>
<div id="dv">
</div>
<script src="common.js"></script>
<script>
// 给同一个元素绑定不同的事件
function f1(e) {
switch(e.type){
case "click":
alert("好帅啊");
break;
case "mouseover":
this.style.backgroundColor = "pink";
break;
case "mouseout":
this.style.backgroundColor = "cyan";
break;
}
}

my$("dv").onclick = f1;
my$("dv").onmouseover = f1;
my$("dv").onmouseout = f1;

</script>

3.模拟淘宝搜索框
<style>
.box{
width: 400px;
height: 100px;
margin: 100px auto;
position: relative;
}
</style>
</head>
<body>
<div class="box" id="box">
<input type="text" id="txt">
<input type="button" id="btn" value="搜索">
</div>

//模拟后台的数据
var keyWords = ["一马当先", "一箭双雕","一丝不苟","一心二用","吃鸡","吃鸡蛋","吃火锅","吃鸡腿"]
//给文本框注册键盘松开事件
my$("txt").onkeyup = function () {
// 优化: 每一个键盘抬起都要判断这个div中有没有这个div
if( my$("newBox")){
//有这个div会删除
my$("box").removeChild(my$("newBox"))
}

//console.log(this.value)
//获取文本框输入的内容
var text = this.value;
//创建空数组---> 存放对应的数据
var newArr = [];
//遍历的对比数组中的数据
for(var i = 0 ; i < keyWords.length; i++){
// indexOf(字符) 返回值是当前字符所有的位置
if(keyWords[i].indexOf(text) == 0){
//添加到新数组的末尾
newArr.push(keyWords[i])
}

}
//console.log(newArr)
// //优化: 判断文本框是空的,不需要创建div 数组为空也不需要创建
if(this.value.length == 0 || newArr.length == 0){
//判断页面上有这个div, 则删除
if(my$("newBox")){
my$("box").removeChild(my$("newBox"))
}
return;
}
//创建div,
var newBox = document.createElement("div")
//添加
my$("box").appendChild(newBox);
newBox.id = "newBox";
newBox.style.border = "1px solid green";
//循环的添加到新的盒子里
for(var j = 0 ; j < newArr.length; j++){
//创建p标签
var pp = document.createElement("p")
newBox.appendChild(pp);
pp.innerHTML = newArr[j];
pp.style.cursor = "pointer";
//鼠标进入
pp.onmouseover = function () {
this.style.backgroundColor = "yellow";
//点击将选中的内容复制给文本框
this.onclick = function(){
console.log(this.innerText)
my$("txt").value = this.innerText;
my$("box").removeChild(my$("newBox"))