关于event的各种属性

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 可以返回一个值，也可以作为中断点

最后编辑于：2019.11.25 10:39:52