前言
早期时，学校开展过js课程，那时候搞这玩意挺痛苦的。
前端页面那些东西，也不教flex之类的，搞得人一点兴趣也没有。
onclick
onclick是一个通用的属性，用于简便地绑定单击事件，不过还差存在一些比较坑的地方。
- 全局，onclick只能调用全局的函数。
因此，如果你在网上找一段代码，粘贴到vue项目中，他很可能提示某个方法不存在。
- 字符串，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)会发生什么，我干过很多次。
![P2375 [NOI2014] 动物园](https://cdn.luogu.com.cn/upload/image_hosting/foa3o5kv.png)