Hugh Dai's Blog

曾经无数次因为头发过于浓密而苦恼


  • 首页

  • 分类

  • 关于

  • 归档

  • 标签

理解javascript中的this

发表于 2016-04-04 | 分类于 JS |

  在js函数中,除了定义函数时的形参,还有两个附加参数,即this和arguments,本篇就讲一下this关键字的用法以及this在不同场景下值。
初学时受启发得知this的指向取决于函数的调用方式,总结下来有以下几点:

阅读全文 »

事件模型

发表于 2016-04-03 | 分类于 JS |

事件触发过程

在前端开发中,经常会遇到事件监听,很多人对事件捕获及事件冒泡不置可否,以下是我对事件模型的一些看法,简单来说就是从外向内捕捉,然后到目标阶段后依次向上冒泡,详情请自行W3C。
图片引用自W3C

1、捕获阶段:在事件对象到达事件目标之前,事件对象必须从window经过目标的祖先节点传播到事件目标。 这个阶段被我们称之为捕获阶段。在这个阶段注册的事件监听器在事件到达其目标前必须先处理事件。
2、目标阶段:事件对象到达其事件目标。 这个阶段被我们称为目标阶段。一旦事件对象到达事件目标,该阶段的事件监听器就要对它进行处理。如果一个事件对象类型被标志为不能冒泡。那么对应的事件对象在到达此阶段时就会终止传播。
3、冒泡阶段:事件对象以一个与捕获阶段相反的方向从事件目标传播经过其祖先节点传播到window。这个阶段被称之为冒泡阶段。在此阶段注册的事件监听器会对相应的冒泡事件进行处理。

阅读全文 »

原生js拖拽实现

发表于 2016-03-30 | 分类于 JS |

实现分析

  最近为了应付面试,浏览了许多js知识点,试着用原生js实现拖拽效果,鼠标拖动效果很常见,像是百度首页的登录框就是经典案例,究其原因无非就是鼠标的三个事件:mousedown、mousemove和mouseup。

原理分析

  1. 鼠标按下时即mousedown,记录mousedown值为true,此时记录下当前鼠标的坐标以及要拖动元素的坐标
  2. 鼠标按下并移动即mousemove,记录下即时的鼠标新坐标,鼠标新旧坐标相减再加上第一步得到的元素坐标即为新的拖拽元素坐标,也就是拖拽坐标跟随鼠标移动。
  3. 鼠标松开时即mouseup,把鼠标状态mousedown设为false。
    阅读全文 »

css3 Clock

发表于 2015-01-16 | 分类于 CSS |

reference http://segmentfault.com/a/1190000003055672

See the Pen clock by Hugh Dai (@HughDai) on CodePen.


阅读全文 »

太极阴阳图

发表于 2015-01-16 | 分类于 CSS |

See the Pen XXXZeV by Hugh Dai (@HughDai) on CodePen.


阅读全文 »

my first blog

发表于 2015-01-15 |

I need to start learning Ruby

123
戴旭

戴旭

26 日志
5 分类
27 标签
GitHub Twitter 微博 CodePen
© 2015 — 2019 戴旭
由 Hexo 强力驱动
|
主题 — NexT.Muse v5.1.0