DOM-16【输入及状态改变事件-京东搜索框】

一、输入及状态改变事件

（1）oninput & onpropertychange

定义： 只要输入了值就会触发时间处理函数

不支持的浏览器：
1、oninput（IE9以下不支持）

2、onpropertychange（IE11不支持，IE11以下支持）

兼容性写法： 两个都写上就可以了

（2）onchange

特点：
1、失去焦点才会触发

2、聚焦的时候和失去焦点的时候值一样就不会触发

（3）onfocus & onblur

定义： 聚焦和失去焦点时触发时间处理函数

相当于： css的:focus选择器

（4）模拟placeholder

缺点： 样式很难改

写法一：

写法二：

二、京东搜索框

（1）模块化写京东搜索框

点击查看源码

（2）备注

1、CSS书写顺序：

2、过程化和面向对象什么时候写？
1、纯模块、不可复用的模块，可以直接用过程化的方式来写

2、比如轮播图、tab组件可复用的模块，就可以用面向对象来写

3、focus没有冒泡行为