JS红宝书学习记录(四)
js红宝书13-19
事件
事件处理程序
DOM0级事件处理程序:on+事件名,如onresize,onload等
DOM2级事件处理程序:
addHandler: (element, type, handler) => {if(element.addEventListener){element.addEventListener(type, handler, false);//false表示默认冒泡,true开启捕获。}else if(element.attachEvent) { //IEelement.attachEvent("on"+type, handler);} else {element["on"+type]=handler;}
}
removeHandler: (element, type, handler) => {if(element.removeEventListener){element.removeEventListener(type, handler, false);//false表示默认冒泡,true开启捕获。}else if(element.detachEvent) { //IEelement.detachEvent("on"+type, handler);} else {element["on"+type]=null;}
}
事件对象
三元式第三个参是IE的
getEvent: event => event ? event : window.event
getTarget: event => event.target ? event.target : event.srcElement ;
preventDefault: event => {if(event.preventDefault) {event.preventDefault();} else {event.retrunValue = false;}
}
stopPropagation: event => {if(event.stopPropagation) {event.stopPropagation();} else {event.cancelBubble = false;}
}
焦点从一个元素移动到另一个元素时,焦点事件focus触发顺序:focusout->focusin->blur->DOMFocusOut->focus->DOMFocusIn
Canvas绘图
getContext(“2d”)获取2d上下文对象
属性:
- fillStyle:填充样式
- strokeStyle:描边样式
矩形方法:
- fillRect(x,y,width,height)
- strokeRect(x,y,width,height)
- clearRect(x,y,width,height)
var drawing = document.getElementById("drawing");
if (drawing.getContext){var context = drawing.getContext("2d");context.fillStyle = "#ff0000";context.fillRect(10, 10, 50, 50);context.fillStyle = "rgba(0,0,255,0.2)";context.fillRect(30, 30, 50, 50);
}
效果图:
路径方法:
注意这种方法下,除了MoveTo方法,其他都会导致移动时有路径产生
beginpath()
方法启动;closePath()
方法关闭。
arc(x, y, radius, startAngle, endAngle, counterclockwise)绘制弧线,
counterclockwise
表示是否顺时针经典指定圆心半径画圆,当然后三个参数还指定了角度和方向。(游标会移动到该圆的起点处,该移动产生路径)
指定弧度画出来是半圆;
arcTo(x1, y1, x2, y2, radius)
其中,(x1,y1)和(x2,y2)分别代表两个点,radius代表圆的半径。该方法一指定半径绘制一条圆弧,此圆弧与当前点到(x1,y1)的连线相切,而且与(x1,y1) 和(x2,y2)的连线也相切。在假想的圆上会有两段圆弧,arcTo()方法取长度较短的那个。
书上的解释不好,参考了https://blog.csdn.net/ixygj197875/article/details/80043646
lineTo(x, y)画直线
moveTo(x, y)移动游标
rect(x, y, width, height):绘制矩形路径
quadraticCurveTo(cp1x, cp1y, x, y)
:绘制二次贝塞尔曲线,cp1x,cp1y为一个控制点,x,y为结束点。bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)
: 绘制三次贝塞尔曲线,cp1x,cp1y为控制点一,cp2x,cp2y为控制点二,x,y为结束点。
下边的图能够很好的描述两者的关系,二次贝塞尔曲线有一个开始点(蓝色)、一个结束点(蓝色)以及一个控制点(红色),而三次贝塞尔曲线有两个控制点。
参数x、y在这两个方法中都是结束点坐标。cp1x,cp1y为坐标中的第一个控制点,cp2x,cp2y为坐标中的第二个控制点。
贝塞尔曲线参考:https://zhuanlan.zhihu.com/p/81863157
路径渲染方式:
- fill():填充,fillStyle有效
- stroke():描边,strokeStyle有效
- clip():创建剪切区域
var drawing = document.getElementById("drawing");
if (drawing.getContext){var context = drawing.getContext("2d");context.strokeStyle = '#444444';var PI = Math.PI;context.beginPath();context.arc(100, 100, 100, 0, 2 * PI, false); // 主圆context.arc(200, 100, 100, 0, 2 * PI, false);context.arc(150, 100 - 50 * Math.sqrt(3), 100, 0, 2*PI, false);context.arc(50, 100 - 50 * Math.sqrt(3), 100, 0, 2*PI, true);context.arc(0, 100, 100, 0, 2 * PI, true);context.arc(50, 100 + 50 * Math.sqrt(3), 100, 0, 2*PI, false);context.arc(150, 100 + 50 * Math.sqrt(3), 100, 0, 2*PI, false);context.closePath();context.stroke();
}
粗略画了下,细节调起来发现根本不跟我心意走。
绘制文本
fillText(font, textAlign, textBaseLine [, 最大相似宽度])和strokeText(font, textAlign, textBaseLine [, 最大相似宽度])
变换
- rotate(angle):旋转图像angle弧度
- scale(scaleX, scaleY):缩放,x方向 * scaleX, y方向 * scaleY
- translate(x, y): 更换坐标原点
- transform(m1_1, m1_2, m2_1, m2_2, dx, dy):修改变换矩阵
- setTransform(m1_1, m1_2, m2_1, m2_2, dx, dy):重设默认,再修改变换矩阵
绘制图像
drawImage
阴影
类似CSS,context对象设置属性
- shadowColor
- shadowOffsetX
- shadowOffsetY
- shadowBlur:模糊像素数
渐变
createLinearGradient()创建,设置起点到终点四个坐标参数
addColorStop(index,color)
index是一个0-1的数字,对应index设置色标
createRadialGradient()创建径向渐变
HTML5脚本编程
跨文档消息提示(cross-document messaging,简称XDM)
iframe之间传值:postMessage()方法,解决跨域框架之间传递信息的问题
接受两个参数:
- 消息
- 表示消息接收方来自哪个域的字符串
var iframeWindow = document.getElementById("myframe").contentWindow;
iframeWindow.postMessage("A Secret", "http://www.goole.com");
内嵌框架页面收到XDM后会异步触发message
事件,event对象包含
- data:上面postMessage的第一个参数传递的字符串
- orign:发送消息的文档所在域
- source:发送消息的window对象代理
比如,我们可以监听message事件,在回调函数中判断event.orign
域名是否是可信任的,是的话处理接收到的event.data
数据,同时可以使用event.source.postMessage
往发送消息的文档传递信息。
原生拖放
事件
对拖动元素而言
- dragstart
- drag
- dragend
拖到一个有效的放置目标时,对放置目标而言
- dragenter
- dragover
- 元素被放置:drop (拖动元素离开当前目标:dragleave)
定义可放置目标
preventDefault()(IE下是returnvalue)方法阻止dragenter和dragover的默认行为;
dataTransfer对象
方法:
setData()
getData(),数据只能在drop事件读取处理
在dragenter时进行设置,属性:
dropEffect:被拖动元素能够执行哪种放置行为
- “none”:不能放,除文本框外,其他元素的默认值
- “move”:剪切到这里
- “copy”:复制到这里
- “link”:放置目标打开链接
effectAllowed:不能,剪切,复制,链接及其组合值
历史状态管理
历史记录栈
history.pushState()
三个参数:
- 状态参数{}
- title(大多数浏览器忽略该参数的实现)
- [, url]替换地址栏的地址字符串(域名后的),但是此时通过location.href查询到的还是原来的地址
后退按钮触发window的popState事件,事件有一个state属性,保存着push的时候传递的第一个参数
history.replaceState()
更新状态
XML DOM
document.implementation.createDocument("","root",null)
创建新的指向文档元素为< root >的XML文档
XML->DOM
DOMParser类型:
创建实例后调用实例的parseFromString(XML字符串, "text/xml")
DOM->XML
XMLSerializer类型:
创建实例后调用实例的serializeToString(dom节点)
E4X
已废弃
状态
XML DOM
document.implementation.createDocument("","root",null)
创建新的指向文档元素为< root >的XML文档
XML->DOM
DOMParser类型:
创建实例后调用实例的parseFromString(XML字符串, "text/xml")
DOM->XML
XMLSerializer类型:
创建实例后调用实例的serializeToString(dom节点)
E4X
已废弃
JS红宝书学习记录(四)相关推荐
- 【JS红宝书学习】9客户端检测
因为浏览器间存在大大小小的差异以及怪癖(quirk),开发人员应当优先采取一种更通用的方法,然后在使用特定于浏览器的技术增强该方案.当然这是红宝书的观点,是一种渐进增强的观点,还有与之相对的优雅降级思 ...
- js 红宝书学习笔记精简版 第一至三章
注: 本文js代码均已在本地实现过,如有异常问题,请在评论区留言.ctrl+f 可搜索有效内容, 加粗为重点 蓝色字体 为重中之重 (一) 什么是js 1995 年,JavaScript 问世. 完整 ...
- JavaScript 红宝书学习记录
函数 什么是函数? function,也叫 方法(method)或过程procedure.是一段 预定义 好的,并且可以被 反复执行的 代码块: 预定义:提前声明好,不是马上使用. 反复执行:可以被循 ...
- JS红宝书·读书笔记
JavaScript高级程序设计 花了半个多月的时间,终于又把"JS红宝书"又撸了一遍. 第一次读"JS红宝书"还是2015年初学JS的时候,那时候只是把语法部 ...
- 《JavaScript高级程序设计(第四版)》红宝书学习笔记(1)
个人对第四版红宝书的学习笔记.不适合小白阅读.这是part1,包含原书第二章(HTML中的Javascript)和第三章(语言基础).持续更新,其他章节笔记看我主页. (记 * 的表示是ES6新增的知 ...
- 《JavaScript高级程序设计(第四版)》红宝书学习笔记(2)(第四章:变量、作用域与内存)
个人对第四版红宝书的学习笔记.不适合小白阅读.这是part2.持续更新,其他章节笔记看我主页. (记 * 的表示是ES6新增的知识点,记 ` 表示包含新知识点) 第四章:变量.作用域与内存 4.1 原 ...
- OpenGL红宝书学习(1、概述)
OpenGL简介 OpenGL 全称Open Graphics Library,一种用于渲染2D.3D矢量图形的跨语言.跨平台的应用程序编程接口(API).由1992年成立的OpenGL架构评审委员会 ...
- 《JavaScript高级程序设计(第四版)》红宝书学习笔记(第五章:基本引用类型,原始值包装类型,单例内置对象)
第五章:基本引用类型 引用值(或者对象)是某个特定引用类型的实例.新对象通过使用new操作符后跟一个构造函数(constructor)来创建. 5.1 Date 这里不对Date进行详细深入,仅基于书 ...
- 男友布置的任务之-JS红宝书每日一讲
文章目录 第一章什么是JavaScript 1.1.JavaScript历史回顾 1.2.什么是JavaScript? 1.3.JavaScript与ECMAScript的关系? 1.4.JavaSc ...
最新文章
- Image Filters for IOS
- 两个各四只青蛙过河java_趣味算法——青蛙过河(JAVA)
- python实现人脸识别复杂么_人脸识别没有那么复杂,Python一行代码就可以办到
- 计算机网络拓扑结构说课稿,计算机网络应用基础说课稿修稿稿
- 安装java环境_(一)环境安装之Java
- Java生产环境下性能监控与调优详解 第3章 基于JVisualVM的可视化监控
- python项目计划_2017年vn.py项目计划
- clickhouse原理解析与应用实践 pdf_阿里专家分享内部绝密RocketMQ核心原理与最佳实践PDF...
- Java String常用的两个方法
- 【路径规划】基于matlab帝国企鹅算法求解机器人栅格地图避障路径规划问题【含Matlab源码 784期】
- 一道经典的C++题,关于分钱的问题,适合新手阅读(黑客X档案论坛题目)
- 【华为认证考试扫盲】超详细的华为认证入门基础知识,考证必看。
- LSUN数据集读取和解压,mdb格式转换为jpg格式(保姆教程)
- 假设你毕业后有两个选择:一个是在某处找工作,另一个是自己创业。你要做决定。写一篇文章解释你的决定的理由
- ads1115与树莓派
- 天下一品茗介绍:小户赛茶叶的特点是什么
- Spring Boot配置log4j记录日志
- javaSE 笔记全!
- 大数据面试题--最真实面试总结!!BAT等一线大厂,学长们实测!!
- 2.1.3 毫米波雷达