1.中止冒泡event.stopPropagation()
<style>
#box{
width: 300px;
height: 300px;
background-color: blue;
}
#big{
width: 900px;
height: 900px;
background-color:red;
}
</style>
<body id="body">
<div id="big">
<div id="box"></div>
</div>
</body>
<script>
//在这段加入语句加入e.stopPropagation()
var elbox=document.querySelector('#box')
elbox.addEventListener('click',function(e){
e.stopPropagation()
alert('box')
console.log('box')
},false)
var elbig=document.querySelector('#big')
elbig.addEventListener('click',function(){
alert('big')
},false)
var elbody=document.querySelector('#body')
elbody.addEventListener('click',function(e){
e.stopPropagation()
alert('body')
},false)
</script>
执行上述语句我们可以看到，我们在点击class为‘box’这个div的时候，只弹出了一个弹框，没有弹出多余的弹框。
同样，这条语句也是用true 的条件下。
2. 取消预设行为e.prentDefault
<a style="display: block;" href="http://www.baidu.com" id="baidu">百度</a>
<script>
elBaidu.addEventListener('click',function(e){
console.log(e);
e.preventDefault();
})
</script>
执行此代码你会发现，a链接没有跳转到百度页面，而且页面一直也没有动。同样使用a链接是空链接的时候。也适用于其他元素。
使用了e.preventDefault()取消浏览器的预设行为。
3.e.target 获取当前的事件是在那个元素上发生的
<div id="div1" style="background: red;"></div>
<script>
var elDiv1=document.querySelector('#div1')
elDiv1.addEventListener('click',function(e){
console.log(e.target);
alert('div1')
e.stopPropagation();
elDiv1.setAttribute('style','background-color:green')
},false)
</script>
执行上面的代码，在控制台中得到“<div id="div1" style="background-color:green"></div>”
<ul id="list" style="background-color: aqua; height: 300px;">
<li ><a href="#">hei</a></li>
<li>heihei</li>
<script>
var elLi=document.getElementById('list')
elLi.addEventListener('click',function(e){
console.log(e.target)
})
</script>
执行上面的代码，在浏览器尝试点击，就会更理解e.target的概念
关于鼠标的事件 blur
<input type="text" id="input1">
<script>
var el=document.querySelector('#input1')
function show(e){
if(e.target.value==''){
alert ('亲爱的，你没有输入任何值哦')
}
}
el.addEventListener('blur',show,false)
</script>
mosemove以及其网页坐标
https://blog.csdn.net/Calla_Lj/article/details/90291023
以上博文讲的十分详细
网页坐标 分三种client screen page
screen:鼠标在屏幕中的坐标
client:鼠标在窗口的坐标
page:整个网页的坐标，所以和client 的坐标相同
从父元素监听子元素的内容
<style>
#list{
width:100px;
height: 100px;
border:3px solid black
}
</style>
<ul id="list">
<li>1</li>
<li>2</li>
</ul>
<script>
var list =document.getElementById('list')
function show(e){
if(e.target.nodeName!=='LI')
{return}
else{console.log(e.target.textContent)}
}
list.addEventListener('click',show,false)
</script>
以上代码中，当我们运行的时候，点击li标签会出现li标签里边的内容，但是点击ul就不会出现任何东西。
return 可以返回一个值，也可以作为中断点
