将实现hover时修改div border-radius的jQuery代码转换为原生JS

完整替换代码（直接写入SampleJavaScript.js即可生效） #

// 对应jQuery的$(document).ready()，等待DOM完全加载后执行代码
document.addEventListener('DOMContentLoaded', function() {
  // 选中页面所有div元素，对应jQuery的$('div')选择器
  const allDivs = document.querySelectorAll('div');

  // 遍历每个div分别绑定事件
  allDivs.forEach(div => {
    // 鼠标移入事件：对应hover方法的第一个回调
    div.addEventListener('mouseenter', function() {
      this.style.borderRadius = '0%';
    });
    // 鼠标移出事件：对应hover方法的第二个回调
    div.addEventListener('mouseleave', function() {
      this.style.borderRadius = '200px 200px 200px 200px';
    });
  });
});

功能等价说明 #

• 原生DOMContentLoaded事件和jQuery$(document).ready()的触发逻辑完全一致，避免DOM未加载完成时找不到元素的问题
• jQuery的hover()方法本质就是同时绑定mouseenter+mouseleave两个事件，原生分开绑定即可实现完全相同的交互效果
• 原生修改样式用元素的style属性，CSS短横线命名的属性需要转成小驼峰，比如border-radius对应borderRadius

内容的提问来源于stack exchange，提问作者helpme7