DOM相关事件记录

e.target与e.currentTarget区别

currentTarget是监听事件者,而target是事件的真正发出者。

 <body>
  <div id="A">
      <div id="B"></div>
  </div>
 </body>
 <script>
const a = document.getElementById('A'),
b = document.getElementById('B');    
function handler (e) {
  console.log(e.target);
  console.log(e.currentTarget);
}
a.addEventListener('click', handler, false);
 </script>

当点击A时输出:A、A
当点击B时输出:B、A

mouseenter与mouseover当区别

mouseenter:不支持冒泡,所以鼠标进出子元素不会触发该事件 mouseover:元素进出子元素和父元素都会触发此事件

tagName和nodeName的区别

tagName只包含元素标签,而nodeName可以在所有节点上使用,因此nodeName比tagName具有更大的使用范围

获取元素的最终background-color

  • canvas截图 + js获取图片某点的颜色
  • 参考open in new window;通过dom.style[backgroundColor]获取style的颜色,如果没有则用getComputedStyle(dom,null)获取css文件里的,但是这些需要在以下条件成立的情况下(包括当前元素的父级级祖级):
    • backgroundColor不是transparent&rgba(0, 0, 0, 0)
    • options不是0
    • visibility不是hidden
    • display不是none
小红包免费领
小礼物走一走
Last Updated:
Contributors: slbyml
部分内容来源于网络,如有侵权,请留言或联系994917123@qq.com;访问量:waiting;访客数:waiting