为何将event变量作为参数传入函数时会被JS编辑器划掉？

为什么编辑器会划掉event？ #

你看到的划掉提示，是因为内联事件中直接使用event属于历史遗留的非标准写法——它依赖浏览器提供的全局event变量，而非JS规范中推荐的「通过函数参数显式接收事件对象」的方式。现代编辑器、ESLint等代码检查工具会标记这种写法为不推荐，因为它在严格模式、部分小众浏览器中可能存在兼容性问题，也不符合现代JS的编码最佳实践。

是否需要修改？ #

现有代码能正常运行，但如果是开发正式应用，强烈建议修改。依赖全局变量的写法不够健壮，后续代码维护、扩展时容易出现隐蔽问题，也不利于团队协作时的代码统一规范。

两种修改方案 #

方案1：修正内联事件的参数传递（最小改动）

把内联事件中的event换成任意合法变量名（比如e），即可规避工具的警告，逻辑和原代码完全一致：

<div id="div1" ondrop="drop(e)" ondragover="allowDrop(e)">
  <img id="drag1" src="https://cdn.pixabay.com/photo/2020/12/02/01/06/chipmunk-5795916__340.jpg" draggable="true" ondragstart="drag(e)" width="336" height="69">
</div>
<div id="div2" ondrop="drop(e)" ondragover="allowDrop(e)"></div>

JS部分无需改动，函数里的ev参数会正常接收事件对象。

方案2：改用addEventListener绑定事件（推荐，正式应用首选）

完全移除HTML中的内联事件，通过JS代码动态绑定事件，这是现代前端开发的标准写法，代码更清晰、可维护性更强：

完整修改后的代码：

<!DOCTYPE HTML>
<html>
<head>
    <style>
        #div1, #div2 {
            float: left;
            width: 100px;
            height: 35px;
            margin: 10px;
            padding: 10px;
            border: 1px solid black;
        }
    </style>
    <script>
        window.addEventListener('DOMContentLoaded', function() {
            const div1 = document.getElementById('div1');
            const div2 = document.getElementById('div2');
            const drag1 = document.getElementById('drag1');

            // 允许放置事件逻辑
            function allowDrop(ev) {
                ev.preventDefault();
            }
            div1.addEventListener('dragover', allowDrop);
            div2.addEventListener('dragover', allowDrop);

            // 拖拽开始事件逻辑
            function drag(ev) {
                ev.dataTransfer.setData("text", ev.target.id);
            }
            drag1.addEventListener('dragstart', drag);

            // 放置事件逻辑
            function drop(ev) {
                ev.preventDefault();
                var data = ev.dataTransfer.getData("text");
                ev.target.appendChild(document.getElementById(data));
            }
            div1.addEventListener('drop', drop);
            div2.addEventListener('drop', drop);
        });
    </script>
</head>
<body>
<h2>Drag and Drop</h2>
<p>Drag the image back and forth between the two div elements.</p>
<div id="div1">
    <img id="drag1" src="https://cdn.pixabay.com/photo/2020/12/02/01/06/chipmunk-5795916__340.jpg" draggable="true" width="336" height="69">
</div>
<div id="div2"></div>
</body>
</html>

这种写法彻底摆脱了全局event的依赖，代码结构更清晰，也便于后续扩展拖拽逻辑。

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