传统onclick的一些坑

前言

早期时，学校开展过js课程，那时候搞这玩意挺痛苦的。
前端页面那些东西，也不教flex之类的，搞得人一点兴趣也没有。

onclick

onclick是一个通用的属性，用于简便地绑定单击事件，不过还差存在一些比较坑的地方。

  1. 全局，onclick只能调用全局的函数。

因此，如果你在网上找一段代码，粘贴到vue项目中，他很可能提示某个方法不存在。

  1. 字符串，onclick的属性是字符串，你不能直接传入js对象进去。
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <button onclick="handleClick()">按钮</button>
  <script>
    function handleClick(){
      alert('测试')
    }
  </script>
</body>
</html>

当你点击按钮时，他的行为类似于如下代码：

eval('handleClick()');

传入对象

如果你想要传入对象，应该写成下面这样。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script>
    const obj = {
      name: '测试名称',
      value: '测试值'
    }
  </script>
  <button id="btn" onclick="handleClick(JSON.stringify(obj))">按钮</button>
  <script>
    function handleClick(obj){
      alert(obj)
    }
  </script>
</body>
</html>

你可以试试改成handleClick(obj)会发生什么，我干过很多次。

调试

onclick的字符串特性很容易导致我们不知道他调用了哪个函数（或者说传统前端都这样）

posted @ 2025-02-26 18:31  魂祈梦  阅读(42)  评论(0)    收藏  举报