DOM 触发事件 JS的两种写法

注意:个人理解,仅做参考.

一.在外部引入JS文件时的执行顺序

1.onload外内加载顺序

window.onload = function () {}的执行顺序非常靠后(类似于Vue的生命周期钩子onMounted).加载时是外部的先加载(编译),然后在加载window.onload内部的代码.

2.onload内外作用域

window.onload内可以引用在其外部定义的变量,方法.即外部的作用域更大.

二.HTML元素触发事件的JS写法

1.写在DOM元素上的触发事件

<!-- 内层小盒子 -->
<div class="small-box small-box-1-1" onmouseenter="showModal(0)"onmouseleave="closeModal(0)">
  <!-- 小盒子内:hover事件:灰色幕布出现,并且出现预览/下载按钮 -->
  <div class="little-modal" style="display: none">
    <div class="modal-content">
      <p class="pre-view" onclick="openBigModal('detail-1-1.png')" href=""> <img src="../public/warehouse/Vector.png" alt="预览图标"> 预览</p>
      <button>下载</button>
    </div>
  </div>
</div>

在html的标签上写触发事件:

οnmοuseenter="showModal(0)"

οnmοuseleave="closeModal(0)"

此时JS的写法

//定义: 元素-小幕布-用于展示预览与下载按钮
let littleModal = document.getElementsByClassName('little-modal');
/* 方法: 显示幕布 */
function showModal(object) {
  littleModal[object].style.display = 'block';
}
/* 方法: 关闭小幕布 */
function closeModal(object) {
  littleModal[object].style.display = 'none';
}

注意:此时的JS内的代码是直接写在JS文件里的,是最外层定义域.没有被其它函数包裹.

总结:

1.当DOM元素的标签上写了触发JS事件的接口时,此时的JS的代码必须直接写在最外层,以确保在JS文件加载时能够直接找到这些内容.否则控制台将会报错'****不存在'.

2.这种直接写在DOM元素标签上的触发JS事件的写法更适合于带有参数的函数,当需要HTML传参给JS时,往往使用这种写法.

2.只写在JS内的触发事件

一般情况下,如果是某个DOM元素需要触发一些事件(而且不携带参数时,例如点击更换元素颜色等...),
此时HTML的DOM标签不需要写触发事件, 而JS则写在window.onload = function () {}内.
例如:

<!-- 身体-模块1-导航 -->
<div class="content-box">
  <div class="box1-header">
    <div class="box1-header-box">
      <h4 id="h4-base">基础资源</h4>
    </div>
    <div class="box1-header-box">
      <h4 id="h4-detail">设计素材</h4>
    </div>
  </div>
</div>

window.onload = function () {
  //定义:元素-基础资源
  let h4Base = document.getElementById('h4-base');
  //定义:元素-设计素材
  let h4Detail = document.getElementById('h4-detail');
  /* 事件: 基础资源-鼠标点击 */
  h4Base.onclick = function () {
    h4Base.style.color = '#007CFF';
    h4Detail.style.color = '#999999';
    h4Base.style.borderBottom = '3px solid #007CFF';
    h4Detail.style.borderBottom = '0';
  };
  /* 事件: 设计素材-鼠标点击 */
  h4Detail.onclick = function () {
    h4Base.style.color = '#999999';
    h4Detail.style.color = '#007CFF';
    h4Detail.style.borderBottom = '3px solid #007CFF';
    h4Base.style.borderBottom = '0';
  };
};

方法的作用是是当鼠标点击的时候,会更改DOM元素的样式.

因此这些DOM元素不需要传递参数给JS,它们只需要等着被触发事件(此案例为鼠标点击事件;onclick)就好.

所以,此时优先将方法写在window.onload = function () {}内.
此案例的 两个定义

 //定义:元素-基础资源
  let h4Base = document.getElementById('h4-base');
  //定义:元素-设计素材
  let h4Detail = document.getElementById('h4-detail');

因为是只在window.onload = function () {}内被用到了,所以此时写在了window.onload = function () {}内,

如果window.onload = function () {}外也需要使用这些元素的话,

也可以直接将它们的定义放在window.onload = function () {}的外部.

因为外部的作用域比内部的大,所以定义在外部仍然能够被内部的引用.

三.JS执行顺序

1.从前到后，一行一行执行

示例:执行顺序

console.log("最先执行的内容-1");

window.onload = function () {
  console.log("最后执行的内容-3");
}

console.log("其次执行的内容-2");

此时在控制台会发现:

其中:

"Live reload enabled."之前为装载完成前,执行的是window.onload = function () {}除function () {}内,从上到下的内容.
"Live reload enabled."之后为装载完成.执行的是window.onload = function () {}的function () {}内的代码内容.

2.如果有一行执行报错，就会停止下面代码的执行

3.先执行同步代码，后执行异步