事件委托 e.target 主要用于控制新生成的元素
还可以通过行内事件控制新生成的元素 在生成了新的元素之后马上获取
多个子元素有相同的事件 给父元素绑定那个事件
通过判断点击的标签的文本类名nodeName 来进行下一步操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
width: 1000px;
height: 700px;
margin: auto;
border: 1px solid #d7d7d7;
}
.box .lyb {
color: sienna;
}
.box p {
line-height: 40px;
width: 900px;
margin: auto;
border-bottom: 1px solid gray;
margin-bottom: 30px;
}
.box .jiyu {
font-family: '楷体';
font-weight: bold;
color: sienna;
text-indent: 2em;
font-size: 18px;
}
.box p .bianji {
color: gray;
cursor: pointer;
font-size: 14px;
font-family: '楷体';
margin-left: 10px;
}
.box #content {
outline: none;
border: none;
border-top: 1px solid sienna;
border-bottom: 1px solid sienna;
}
#ol1 {
width: 900px;
margin: auto;
}
li {
width: 90%;
}
span:nth-child(1) {
float: left;
}
span:nth-child(2) {
float: right;
cursor: pointer;
}
</style>
</head>
<body>
<div class="box" id="d1">
<p class="lyb">留言板</p>
<p><strong>主人寄语</strong><span class="bianji">编辑您的主人寄语</span></p>
<p class="jiyu">
我难人亦难,不可为难;我易人亦易,不可大意。
</p>
<p><strong>留言</strong><strong class="count">(0)</strong></p>
<p class="p1">
<textarea name="" id="content" cols="120" rows="10" disabled></textarea><br>
<button>我要留言</button>
</p>
<ol id="ol1">
</ol>
</div>
<script>
var btn = document.querySelector("button")
var txt = document.querySelector("textarea")
var ol = document.querySelector("ol")
var p1 = document.getElementsByClassName("p1")[0]
var flag = true
var del = document.querySelectorAll("span")
var div = document.getElementById("d1")
console.log(del);
// txt.disabled = true //自带属性直接修改
//content.disabled=true//可以直接使用id操作
var sum = document.getElementsByClassName("count")[0]
var num = 0
div.onclick = function (e) {
var target = e.target
if (target.innerText == "我要留言") {
target.innerText = "发表"
txt.disabled = false
} else if (target.innerText == "发表") {
if (txt.value) {
//有时候+=比创建添加节点方便的多
ol.innerHTML += `<li><span>${txt.value}</span><span>删除</span></li>`
console.log(txt.value);
num++
sum.innerText = num
txt.value = ""
} else {
alert("内容不能为空")
}
}
if (target.innerText == "删除") {
if (confirm("你确定要删除吗?")) {
target.parentElement.parentElement.removeChild(target.parentElement)
num--
sum.innerText = num
if (num == "0") {
txt.disabled = true
btn.innerText = "我要留言"
}
}
}
}
</script>
</body>
</html>
事件冒泡 子元素有与父元素相似的事件就会被一起触发
<div>
<button>按钮</button>
</div>
<script>
var div = document.querySelector("div")
var btn = document.querySelector("button")
div.addEventListener("click", function () {
console.log("盒子");
},true)
btn.addEventListener("click", function () {
console.log("按钮1");
}, true)
btn.addEventListener("click", function () {
console.log("按钮2");
}, true)
// 默认为false
// false是冒泡阶段执行 从下到上 按钮2 按钮1 盒子
// true是捕获阶段执行 从上到下 盒子 按钮1 按钮2
</script>
阻止事件冒泡 : e.stopPropagation()
点击按钮的时候不能触发事件,只有点击盒子之后再点击按钮才可以触发事件
<div>
<button>按钮</button>
</div>
<script>
var div = document.querySelector("div")
var btn = document.querySelector("button")
var num = 0
// 变量方法
// btn.onclick = function (e) {
// console.log("按钮");
// e.stopPropagation()
// div.onclick = function (e) {
// e.stopPropagation()
// num=1
// // console.log(num);
// alert("你点到盒子了,触发了按钮功能")
// }
// if (num == 1) {
// alert("你点击了按钮")
// }
// }
//正规方法
div.onclick = function (e) {
e.stopPropagation()
var target = e.target
if (target.nodeName == "DIV") {
btn.onclick = function () {
alert("你点击了按钮")
}
}
}
</script>
阻止事件默认行为: e.preventDefault()
<form action="">
<input type="buton" value="按钮1">
<button>按钮2</button>
</form>
<script>
var btn1 = document.querySelector("input")
var btn2 = document.querySelector("button")
btn1.onclick = function () {
console.log("按钮1");
// 加了type=button就不会有默认提交行为
// 在form外面的提交按钮也不会触发提交行为
}
btn2.onclick = function (e) {
// 没有加type=button会执行默认提交行为/自动刷新页面
//在事件中加阻止事件默认行为
e = e || event
e.preventDefault()
console.log("按钮2");
}
</script>
事件监听 事件解绑 : btn.removeEventListener("click", fn)
<button>触发</button>
<button>清除触发</button>
<script>
var btn = document.getElementsByTagName("button")[0]
var btn1 = document.getElementsByTagName("button")[1]
// 普通事件解绑
// btn.onclick = function () {
// alert("触发了函数")
// }
// btn1.onclick = function () {
// // onclick 事件解绑直接设置为null
// // 没有用事件监听第二个会覆盖第一个
// btn.onclick = null
// }
function fn() {
alert("触发了函数")
}
btn.addEventListener("click", fn)
btn1.addEventListener("click", function () {
// 事件监听的解绑只能解绑全局函数
btn.removeEventListener("click", fn)
})
</script>
定时器
单次定时器
<button>清除定时器</button>
<script>
var timer = setTimeout(function () {
console.log("定时器");
}, 1000)//同步读秒异步打印
var btn = document.querySelector("button")
btn.onclick = function () {
//清除定时器
clearTimeout(timer)
}
//打印完了循环再打印定时器
// for (var i = 0; i < 3000; i++) {
// console.log("循环");
// }
</script>
循环定时器
<button>开启定时器</button>
<button>清除定时器</button>
<script>
var trim = null
// 在两个函数里面使用要用全局变量
var btn = document.getElementsByTagName("button")[0]
var btn1 = document.getElementsByTagName("button")[1]
btn.onclick = function () {
//clearInterval(trim)//防止叠加
// 开启赋值 重定义trim变量
trim = setInterval(function () {
console.log("循环定时器");
}, 1000)
this.disabled = true//防止点击暂停加速
}
btn1.onclick = function () {
// 清除定时器
clearInterval(trim)
btn.disabled = false
}
</script>