今天吃饭，和后台谈论了一下他的面试问题，感觉几个问题都直击重点，这里菜鸟就总结一下！

1、disabled和readonly

两者的字面意义先介绍一下：

1. readonly表示 “只读” ，一般表示对于文字内容只读，即不可更改内容，对于非文字的表单根本没有readonly属性

2. disabled表示 “使残废，使无效” ，管你有没有文字内容，都无法使用，可以作用于全部表单元素

联系

先说说两者的联系：

两个属性都可以作用于input等表单元素上，都使得元素成为 无法编辑 的状态

区别

案例

readonly 属性规定输入字段为只读

只读字段是不能修改的。不过，用户仍然可以使用 tab 键切换到该字段，还可以选中或拷贝其文本。

readonly 属性可以防止用户对值进行修改，直到满足某些条件为止（比如选中了一个复选框）。然后，需要使用 JavaScript 消除 readonly 值，将输入字段切换到可编辑状态。

注释：readonly 属性可与 < input type=“text”> 或 < input type=“password”> 配合使用。

disabled 属性规定应该禁用 input 元素

被禁用的 input 元素既不可用，也不可点击。可以设置 disabled 属性，直到满足某些其他的条件为止（比如选择了一个复选框等等）。然后，就需要通过 JavaScript 来删除 disabled 值，将 input 元素的值切换为可用。

注释：disabled 属性无法与 < input type=“hidden”> 一起使用。

说到这里，其实有引出了两个问题

1. 什么属性可以阻止选中或者拷贝文本呢？
2. hidden 属性是什么？

什么属性可以阻止选中或者拷贝文本呢？

具体见我的博客：重学前端 重要且实用的HTML5新语义元素（mark标记文本/progress任务进度/meter度量衡/是否可编辑内容/details补充/已移除）（第七天）

hidden 属性是什么？

详情见我的博客：重学前端 详解表单 / 详解input / 浏览器私有前缀的作用（第六天）

那么hidden为什么不能和disabled一起使用呢？

其实不应该说不能一起用，而应该说一起用没什么意义，毕竟hidden的作用就是隐藏字段，并在提交的时候一并提交了，但是disabled直接就不提交，那么又不显示又不提交，这个表单元素本身就没有什么实际意义，所以不需要！

2、disabled之后，上面的事件还在吗？

<form action=""><input type="text" readonly onclick="console.log(111)" onfocus="console.log(1111)" onblur="console.log(11111)" value="111111"><input type="text" disabled onclick="console.log(222)" onfocus="console.log(2222)" onblur="console.log(22222)" value="111111"><input type="text" onclick="console.log(333)" onfocus="console.log(3333)" onblur="console.log(33333)" value="111111"><input type="hidden" disabled value="2222"><button disabled onclick="alert('aaa')">disabled按钮</button><button onclick="alert('bbb')">disabled按钮</button>
</form>

运行结果表明，disabled之后上面的事件是不复存在的。

注意：

这里之所以不用alert是因为，onblur 和 onfocus会因为弹窗要点击确认而不停的循环！

3、焦点是什么？

菜鸟理解的焦点是：每次点击鼠标，鼠标都会将点击到的元素作为焦点，但是并不是所有元素都有获取焦点的能力，只有有用户交互的元素才是真的有焦点，所以焦点的onfocus 常用于 input、select、button、 a ，其他元素没有，需要自己通过 tabIndex 属性设置！

参考：深入理解javascript中的焦点管理

这里又引出来一个问题

1. DOM0级事件、DOM2级事件是啥？

DOM0级事件、DOM2级事件是啥？

其实就是一种标准/规范！

参考：DOM0、DOM1、DOM2级事件