2.属性篇(新增的一些属性）

# 2.属性篇

 

- 1. placeholder --实际应用中可用

    用于input的提示信息

```html

```

 

- 2. Calendar, date, time, email, color, range, url, search --实际应用中一般不使用，兼容性有问题

```html

    

     

    

    

    

 

     

    

    

    

    

    

    

```

 

- 3. contenteditable --实际应用中可用

    对元素中的文本节点可以编辑

 

    属性可以继承，父元素有此属性，子元素没有，子元素继承父元素此属性

```html

    hello

    world

```

 

- 4. draggable --实际应用中一般不使用，兼容性有问题

    使元素可拖拽

 

    拖拽的生命周期：

        拖拽开始，拖拽进行中，拖拽结束

    拖拽的组成：

        被拖拽的物体，目标区域（目标元素）

 

    被拖拽元素的事件：

        ondragstart:拖拽开始事件,按下物体的一瞬间是不会触发拖拽开始事件的

        ondrag:拖拽进行事件

        ondragend:拖拽结束事件

        通过开始事件中e.clientX和结束事件中e.clientX可以计算出元素横移的距离

    拖拽目标元素的事件：

        ondragenter:被拖拽元素上的鼠标进入目标区域才触发的，不是被拖拽元素图形进入目标元素就触发的。

        ondragover:被拖拽元素上的鼠标进入目标区域会不停的触发。

        ondragleave:被拖拽元素上的鼠标离开目标区域触发。

        ondrop:被拖拽元素上的鼠标在目标区域松开触发。只有在ondragover中阻止默认事件e.preventDefault()，才会触发ondrop事件

    所有的标签元素，当拖拽周期结束时，默认事件是回到原处

    事件是由行为触发的，但是一个行为可以不止触发一个事件

```html

 

baidu

 

```   

 

- 5. e.dataTransfer.effectAllowed 和 e.dataTransfer.dropEffect --实际应用中一般不使用，兼容性有问题

    e.dataTransfer.effectAllowed:写在ondragstart事件中，用来改变鼠标样式

    e.dataTransfer.dropEffect:写在ondrop事件中，用来改变鼠标样式

```html