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_第七城市
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
prompt() 方法用于与用户交互,提示用户输入信息的对话框。
prompt(str1,str2);此方法包含两个属性;
str1:用于提示用户输入的信息。
str2:用于用户输入文本信息。
该方法返回值:返回用户输入的文本信息。
(3)给工具条添加click事件
addEventListener 有三个参数:第一个参数表示事件名称(不含 on,如 "click");第二个参数表示要接收事件处理的函数;第三个参数为 useCapture:
true 的触发顺序总是在 false 之前;
如果多个均为 true,则外层的触发先于内层;
如果多个均为 false,则内层的触发先于外层。