事件流、简单创建、删除操作
<style>
#one {
width: 200px;
height: 200px;
background-color: #ccc;
}
#two {
width: 100px;
height: 100px;
background-color: red;
}
#three {
width: 50px;
height: 50px;
background-color: blue;
}
</style>
</head>
<body>
帐号：<input type="text" id="txt">
<div id="one" >
<div id="two" >
<div id="three" >
</div>
</div>
</div>
<a id="aa" href="http://www.baidu.com">百度</a>
<button onclick="delMe(this)"> 把自己删了</button>
<button onclick="addImg()"> 添加一张图片</button>
<img src="" alt="">
<script>
//监听键盘
// 事件流
window.onload = function(){
var one = document.getElementById('one'),
two = document.getElementById('two'),
three = document.getElementById('three'),
aa = document.getElementById('aa');
txt = document.getElementById('txt');
addEvent();
}
function addEvent(){
txt.onkeyup = function(evt){
var evnt = evt ? evt : window.event;
if (evnt.keyCode == 13) {
alert(this.value);
}
}
one.onclick = function(evt){
var evnt = evt ? evt : window.event;
event.stopPropagation();
console.log('one');
}
two.onclick = function(evt){
var evnt = evt ? evt : window.event;
event.stopPropagation();
console.log('two');
}
three.onclick = function(evt){
var evnt = evt ? evt : window.event;
event.stopPropagation();
console.log('three');
}
aa.onclick = function(evt){
var evnt = evt ? evt : window.event;
event.preventDefault();
// console.log('one');
}
}
// 删除
function delMe(obj) {
obj.remove();
}
function addImg(){
var imgObj = document.createElement('img');
imgObj.src = '../20190322/image/J1.png';
console.log(imgObj);
var dbObj = document.getElementsByTagName('body')[0];
dbObj.append(imgObj);
// dbObj.style.color = 'red';
}
</script>
