前端

Beautyfish
83 阅读4分钟

跟着coderwhy 学前端

1. document load 和 document ready 的区别

页面加载完成两种事件

  1. load 是当页面所有资源全部加载完成后（包括 DOM 文档树，css 文件，js 文件，图片资源等），执行一个函数 问题：如果图片资源较多，加载时间较长，onload 后等待执行的函数需要等待较长时间，所以一些效果可能受到影响 2. $(document).ready()是当 DOM 文档树加载完成后执行一个函数 （不包含图片，css 等）所以会比 load 较快执行在原生的 js 中不包括 ready()这个方法，只有 load 方法也就是 onload 事件。

7.事件委托是什么？

利用事件冒泡的原理，让自己的所触发的事件，让他的父元素代替执行。

  1. 那什么样的事件可以用事件委托，什么样的事件不可以用呢？
  • 适合用事件委托的事件: click，mousedown,mouseup,keydown，keyup，keypress。
  • 值得注意的是，mouseover 和 mouseout 虽然也有事件冒泡，但是处理它们的时候需要特别的注意，因为需要经常计算它们的位置，处理起来不太容易。
  • 不适合的就有很多了，举个例子，mousemove，每次都要计算它的位置，非常不好把控，在不如说 focus， blur 之类的，本身就没用冒泡的特性，自然就不用事件委托了。
  1. 为什么要事件委托？
  • 提高性能
html
复制代码
<ul>
    <li>苹果</li>
    <li>香蕉</li>
    <li>凤梨</li>
</ul>

<script>
    //good
   document.querySelector('ul').onclick = e => {
       let target = e.target
       if (target.nodeName === 'li') {
           console.log(target.innerHTML)
       }
   }
   
   //bad
    document.querySelectorAll('li').forEach(e => {
        e.onclick = function () {
            console.log(this.innerHTML)
        }
    })
</script>

新添加的元素还会有之前的事件。

  1. 事件冒泡与事件委托的对比
  • 事件冒泡：box 内部无论是什么元素，点击后都会触发 box 的点击事件事件委托：可以对 box 内部的元素进行筛选
  1. 事件委托怎么取索引？
html
复制代码
<ul id="ul">
    <li> aaaaaaaa </li>
    <li> 事件委托了 点击当前， 如何获取 这个点击的下标 </li>
    <li> cccccccc </li>
</ul>

<script>
    var oUl = document.getElementById("ul");
    var aLi = oUl.getElementsByTagName("li");
    oUl.onclick = function(ev) {
        var ev = ev || window.event;
        var target = ev.target || ev.srcElement;
        if (target.nodeName.toLowerCase() === "li") {
            var that = target;
            var index;
            for (var i = 0; i < aLi.length; i++)
                if (aLi[i] === target) index = i;
            if (index >= 0) alert('我的下标是第' + index + '个');
            target.style.background = "red";
        }
    }
</script>

扩展：

  • 键盘事件：keydown keypress keyup
  • 鼠标事件：mousedown mouseup mousemove mouseout mouseover

7.1事件冒泡是什么？？

JavaScript中的事件冒泡是指在触发一个元素上的事件时，该事件会向父元素逐级传递，直到达到文档根节点为止。换句话说，如果一个元素上发生了一个事件，那么该事件会先在该元素上触发，然后逐级向上冒泡，直到传递到文档根节点。

例如，当一个按钮被点击时，该按钮会首先触发点击事件，然后该事件会向上冒泡到该按钮的父元素，再到父元素的父元素，一直到文档根节点。

事件冒泡机制使得我们可以通过在父元素上绑定事件来处理子元素上的事件，从而简化代码，提高代码复用性。同时，事件冒泡机制也使得事件处理变得更加灵活，可以根据需要选择在子元素、父元素或文档根节点上处理事件。

在事件处理函数中，可以使用event.stopPropagation()方法来阻止事件冒泡，即在事件到达当前元素后，阻止事件继续向上冒泡传递，从而避免父元素上的事件处理函数被触发。

H5新特性

在 HTML5 中，元素被分为两种基本类型：行内元素和块级元素。它们的主要区别在于其默认的显示方式和盒模型属性。

  1. 行内元素（inline elements）：
  • 默认宽度为它包含的内容的宽度，不能设置宽度、高度；
  • 只能容纳文本或其他行内元素；
  • 行内元素不会导致文本换行，相邻的行内元素会排列在同一行上；
  • 可以设置垂直对齐方式（vertical-align），但是无法设置上下边距（margin）和下边框（border-bottom）。

常见的行内元素有：a、span、strong、em、img、input等。

  1. 块级元素（block-level elements）：
  • 默认宽度为其父元素的宽度，可以设置宽度、高度；
  • 可以容纳文本、其他块级元素以及行内元素；
  • 块级元素会导致文本换行，每个块级元素会单独占据一行；
  • 可以设置上下边距（margin）和边框（border）。

常见的块级元素有：div、h1-h6、p、ul、ol、li、form、table等。

需要注意的是，HTML5中还有一种元素叫做“行内块元素”（inline-block elements），它具有行内元素的特性，可以容纳文本和其他行内元素，但同时又具有块级元素的特性，可以设置宽度、高度、上下边距和边框等。常见的行内块元素有：img、input、button等。

以上是HTML5中行内元素和块级元素的主要区别。需要注意的是，这些元素的默认特性可以通过CSS样式进行修改。

作者：MINT
链接：juejin.cn/post/706227…
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

avatar
文章
阅读
粉丝