标签：NPU elb nod span listener 事件绑定 dom操作 上层 remove
创建与删除
1.创建元素：createElement
2.添加元素：div.appendChild（）
3.删除元素：grand.removeChild(parent)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>创建与删除</title>
</head>
<body>
<input type="file"/ ><button>添加</button>
</body>
<script>
var btn = document.getElementsByTagName(‘button‘)[0]
btn.onclick = function(){
//创建一个div
var div = document.createElement(‘div‘)
//创建一个input
var input = document.createElement(‘input‘)
input.type = ‘file‘
//将input添加到div中
div.appendChild(input)
//创建一个按钮
var button = document.createElement(‘button‘)
button.innerText = ‘删除‘
button.onclick = function(){
//找到父级元素
var parent = this.parentNode
//找到祖父级元素
var grand = parent.parentNode
//删除父级元素
grand.removeChild(parent)
}
//将按钮添加到div
div.appendChild(button)
//将div添加到文档中
btn.parentNode.appendChild(div)
}
</script>
</html>
事件冒泡
1.说明：当下层元素和上层元素支持同一事件，上层事件触发时，下层事件也触发，这就叫事件冒泡
2.取消事件冒泡：ev.cancelBubble = true
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>事件冒泡</title>
<style>
body{
background:red;
}
div{
width:300px;
height:200px;
background:blue;
}
</style>
</head>
<body onclick="bottomLevel();">
<div onclick="topLevel();"></div>
</body>
<script>
function bottomLevel(){
alert(‘我是来自社会最底层的呼声‘)
}
function topLevel(e){
//获取事件
var ev = e || event
//取消事件冒泡
ev.cancelBubble = true
alert(‘我是来自社会最高层的呼声‘)
}
</script>
</html>
事件绑定
1.说明：当同一个事件触发时，先要同时调用多个处理函数，直接设置后面的覆盖前面的，可以通过事件绑定解决
2.示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>事件绑定</title>
<style>
div{
width:200px;
height:200px;
background:red;
}
</style>
</head>
<body>
<div></div>
</body>
<script>
var div = document.getElementsByTagName(‘div‘)[0]
//传统方式不行（后面的设置会覆盖前面的）
//div.onclick =giveRed
//div.onclick =giveGreen
//添加事件绑定
//div.addEventListener(‘click‘,giveRed,false)
//div.addEventListener(‘click‘,giveGreen,false)
addBind(div,‘click‘,giveRed)
addBind(div,‘click‘,giveGreen)
//移除事件绑定
//div.removeEventListener(‘click‘,giveGreen,false)
delBind(div,‘click‘,giveRed)
function giveRed(){
alert(‘红色‘)
}
function giveGreen(){
alert(‘绿色‘)
}
//兼容绑定事件
function addBind(obj,ev,func){
if(obj.addEventListener){
//高级浏览器
obj.addEventListener(ev,func,false)
}else{
//低级浏览器
obj.attachEvent(‘on‘ + ev,func)
}
}
//兼容取消绑定
function delBind(obj,ev,func){
if(obj.removeEventListener){
//高级浏览器
obj.removeEventListener(ev,func,false)
}else{
//低级浏览器
obj.detachEvent(‘on‘ + ev,func)
}
}
</script>
</html>
标签：NPU elb nod span listener 事件绑定 dom操作 上层 remove
原文地址：https://www.cnblogs.com/542684416-qq/p/9835846.html
