如何为JS创建的元素设置SEO友好的onclick事件且不依赖事件监听器？

要给JS创建的元素设置HTML层面的onclick属性（而非DOM事件监听器），你需要用setAttribute方法直接操作元素属性，而不是赋值给element.onclick——后者是绑定DOM事件处理器，不会在HTML结构中生成可见的onclick属性。

具体实现步骤： #

1. 先定义一个全局可访问的点击处理函数（因为onclick属性中的代码会在全局作用域执行）：

function handleEntryClick(event, entryId) {
  event.preventDefault(); // 阻止a标签默认跳转行为
  // 这里写你的SPA路由逻辑，比如结合History API
  history.pushState({ id: entryId }, '', `/entry/${entryId}`);
  // 其他视图更新逻辑...
}

2. 在创建元素的函数中，用setAttribute设置onclick属性，把函数调用以字符串形式传入：

const setViewState = function(entry, parentRoot){
    const element = document.createElement("a")
    element.href = entry.href
    element.innerHTML = `${entry.id} - ${entry.content}`
    element.id = `entry${entry.id}`
    // 设置HTML onclick属性
    element.setAttribute('onclick', `handleEntryClick(event, ${entry.id})`);
    
    parentRoot.appendChild(element)
}

关键说明： #

element.onclick = function() {...}是通过DOM API绑定事件监听器，只会在内存中关联函数，不会修改元素的HTML属性，所以你在开发者工具的Elements面板里看不到onclick属性，这和视频里硬编码在HTML中的onclick属性不是同一机制。

而setAttribute('onclick', '函数调用字符串')是直接修改元素的HTML属性，会在Elements面板中显示出onclick属性，完全符合你参考的方案要求。

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