DOM事件 书写在HTML中 还是书写在JavaScript好呢？

Question

以一个点击事件为例：

<div onclick="fn()"></div>

$().click(fn())

我觉得这两种方式的效果是一样的，所以这只是一个讨论，希望大家都能提出自己的看法。

Answer 1

当然是写在 js 的好

1. HTML一个元素+事件对只能绑定一个事件处理器
2. 写在HTML会产生依赖全局的函数名
3. 写在HTML过于紧密耦合，我们要低耦合

还有楼上说的js写在DOM中影响dom树加载

Answer 2

写在js中好；
结构层（html），表现层（css），行为层（js）都分开写，不要写在一起；

Answer 3

答：写在js里面好。
原因：
1、符合w3c的三层分离原则，即HTML，css，js三者分离；
2、更有利于维护，也就是说可维护性更强；
3、不影响dom的加载。

Answer 4

dom树要干净，css和js是最好不能污染到html元素最好

Answer 5

写在js里面好,和样式写在css文件里 而不写在 style="xxx:xx"里

1.html负责页面结构,js负责逻辑行为 各司其职,应该是分离的
2.js写在DOM中影响dom树加载
3.外部js利于维护和产品迭代开发

Answer 6

函数写在JS里面好，结构层（html），表现层（css），行为层（js）最好分开写，并且css，js都说由外部引进，这样有住浏览器自动缓存，但是这个点击的事件的触发，如果要说性能的话，我觉得 onclick（）会比较好，毕竟不需要用JQ来遍历一下dom

Answer 7

最好写在js里面，html里面没有必要就不要过多加入一些有的没的，目前前端开发一般是html,css,js三个文件，早期的网页都是会在html里面写，太乱了，最好分开，分开容易后期维护，如果要改变样式就在css里面，要改变dom就在js里面。

Answer 8

最后写在js文件中通过script标签引入最好，适合大项目；小项目可以写在页面的script标签中，最差的就是html和js混写在一起。
符合w3c的三层分离原则，即HTML，css，js三者分离；更有利于维护，也就是说可维护性更强；

Answer 9

这就要看结构与事件分不分离了，还是得看功能需求

Answer 10

纯原生写建议写在js中，用框架写就用框架推荐的写法，如react就是写在标签中，不过那是jsx语法，严格上说并不是html标签，vue的话要在标签中绑定处理函数

Answer 11

就原生来说(包含库不包含框架)

1. onclick="fn()" dom0级事件绑定。无法做其他的配置。像优化相关的addEventListener中第三个参数这些。

2. 回调函数在非全局作用域声明(一般都会不在全局声明太多东西)时,无法找到，会报is not define(也可能是undefiend is not a function记不清了)的错。

3. 你说一样，其实只是使用jquery的$().click是一样的。但是就jquery来说还有别的写法$().on('click',xx,xx)，这个就看个人需求了。

4. 从书写风格和规范来说，还是分开的好。

就框架来讲

当然是别人规定的怎么写你就怎么写了。虽然你会在html中声明事件。但是框架会帮你在js中进行处理的。