《HTML5实战》Lesson10

Week11  2016/11/23上午1-4节

一、复习

对应的html

二、execCommand实现富文本编辑控件

1、execCommand

document.execCommand - Web API 接口

Javascript中document.execCommand()的用法 - 千里之外 - 博客频道 - CSDN.NET

JavaScript中的execCommand()命令详解及实例展示 - yiluoAK_47的专栏 - 博客频道 - CSDN.NET

2、3-7代码解析

（0）对应的html文档

（1）获取到工具条

（2）单击工具条上的button要执行的方法

1）e.target=event.target

target 事件属性可返回事件的目标节点（触发该事件的节点），如生成事件的元素、文档或窗口。

event.target.nodeName  　　//获取事件触发元素标签name（li,p...）

e.target与事件委托简例_JavaScript_第七城市

W3School在线测试工具 V2

2）条件运算符，语法为：条件表达式？表达式1：表达式2。

说明：问号前面的位置是判断的条件，判断结果为bool型，为true时调用表达式1，为false时调用表达式2。

其逻辑为：“如果为真执行第一个，否则执行第二个。”

==， 两边值类型不同的时候，要先进行类型转换，再比较。

===，不做类型转换，类型不同的一定不等。

JavaScript 中2个等号与3个等号的区别 - - ITeye技术网站

3）dataset：获取以data-后面的字符串为属性名的属性值

HTML5自定义属性对象Dataset简介 « 张鑫旭-鑫空间-鑫生活

4)execCommand

bool= document.execCommand(aCommandName,aShowDefaultUI,aValueArgument)

返回值

一个Boolean，如果是false则表示操作不被支持或未被启用。

参数

aCommandName

一个DOMString，命令的名称。可用命令列表请参阅命令。

aShowDefaultUI

一个Boolean是否展示用户界面，一般为 false。Mozilla 没有实现。

aValueArgument

一些命令需要一些额外的参数值（如insertimage需要提供这个image的url）。默认为null。

5)prompt

W3School在线测试工具 V2

prompt() 方法用于与用户交互，提示用户输入信息的对话框。

prompt(str1,str2);此方法包含两个属性；

str1:用于提示用户输入的信息。

str2:用于用户输入文本信息。

该方法返回值：返回用户输入的文本信息。

javascript 巧用prompt()函数_百度经验

（3）给工具条添加click事件

addEventListener 有三个参数：第一个参数表示事件名称（不含 on，如 "click"）；第二个参数表示要接收事件处理的函数；第三个参数为 useCapture:

true 的触发顺序总是在 false 之前；

如果多个均为 true，则外层的触发先于内层；

如果多个均为 false，则内层的触发先于外层。

addEventListener 的三个参数 - BryanYang - 开源中国社区