javascript相关,javascript相关书籍

学javascript需要什么基础

Javasctipt简称Js，学习Js之前建议你先学习一下HTML+CSS，因为Javascript的基本操作是控制html的标签以及css的属性，实现各式各样的动态功能。千锋教育就有线上免费JavaScript线上公开课。

创新互联建站成都网站建设定制网站开发，是成都网站设计公司,为木制凉亭提供网站建设服务,有成熟的网站定制合作流程，提供网站定制设计服务：原型图制作、网站创意设计、前端HTML5制作、后台程序开发等。成都网站维护热线：18982081108

JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML网页上使用，用来给HTML网页增加动态功能。学习Javascript给大家推荐几本书，入门书籍《Javascript dom编程艺术》和内容全面点的有《Javascript高级程序设计》。看完这些，你的Js基础就学的差不多了再就是学习Js框架，例如vue.Js，react，angular.Js等。如果想了解Javascript更多相关知识，建议到千锋教育了解一下。千锋教育目前在18个城市拥有22个校区，年培养优质人才20000余人，与国内20000余家企业建立人才输送合作关系，院校合作超600所。

汇总js事件相关及事件处理模型

js事件是为了实现用户交互，比如当用户鼠标点击或者键盘输入时，浏览器会监听截获并且通知js做出反馈执行相应的函数，实现交互。

js的事件类型有很多，我们先来大概总结一下常用的JS事件

click点击事件、mousedown鼠标按下事件、mousemove鼠标移动事件、mouseup鼠标抬起事件

contextmenu右键出菜单事件、mouseenter/mouseover鼠标进入事件、mouserleave/mouseout鼠标离开事件

可通过事件对象的button属性来区分是左键\滚轮\右键，分别对应值 0 / 1 / 2

DOM3规定：click事件只能监听左键；只能通过mousedown和mouseup来判断鼠标键

keydown某键被按下时、keyup被松开时、keypress按下并且松开时

触发顺序：先 keydown，然后keypress，最后keyup

keydown和keypress的区别：

input：文本变化时触发

change：聚焦或失去焦点时判断状态是否改变，发生改变是触发change事件

focus：聚焦时触发

blur：失去焦点时触发

利用focus和blur可模拟placeholder

scroll：滚动条滚动时

load：页面加载完触发

abort：图像的加载失败

dblclick：双击事件

error：当加载图像和文档时发生错误

resize：窗口或者框架被重新调整大小

select：文本被选中时

reset：点击重置按钮时

submit：点击提交按钮时

接着看如何给DOM元素绑定事件处理函数

兼容性很好

但是根据js的特点，这种赋值的方式肯定会被后面的值覆盖。因此这种方式绑定事件处理函数规则是：同一个元素同一个事件只能绑定一个处理函数。等同于第一种写在行间。

IE8及以下不兼容

通过addEventListener绑定的方式，同个元素的同一个事件可以绑定多个处理函数，不会被覆盖。

attachEvent跟addEventListener 基本一致，也是同一个元素的同一个事件可以绑定多个处理函数，不会被覆盖。不同的是attachEvent可以绑定的函数是可以重复的，即即使绑定同一个函数都不会不覆盖。

以上几种事件绑定方式里面的this指向有点区别：

也比较好理解，IE独有的特殊一点指向window，其他都指向dom元素本身

封装一个兼容性的方法，用于绑定事件：

有的时候我们希望解除事件处理函数，那怎么办呢？

其实解除事件处理函数也对应有办法方法：

1. ele.onxxx = false / ' ' / null

2. ele.removeEventListener(type,fnName,false)

3. ele.attachEvent('on' + type,fnName)

值得注意的是：若干绑定的事件处理函数是匿名函数，则无法解除绑定！

不知道有没有发现，在上面绑定事件处理函数的时候，处理函数有个参数e或者叫event，其实是一个事件对象

事件对象就是处理函数里面的一个参数，说白了就是浏览器打包好的一个对象自动传入到处理函数的第一个参数中。

为了兼容IE一般这么写： e = e || window.event

事件对象会有个属性target，这个target叫事件源对象，记录可事件具体在谁身上触发的那个源头

同样IE上事件源对象是e.srcElement，谷歌两个都有

所以为了兼容IE一般获取事件源对象是这么来写：

当浏览器发展到第四代时(IE4及Netscape4)，浏览器开发团队遇到了一个很有意思的问题：页面的哪一部分会拥有某个特定的事件？想象画在一张纸上的一组同心圆。如果把手指放在圆心上，那么手指指向的不是一个圆，而是纸上的所有圆

两家公司的浏览器开发团队在看待浏览器事件方面还是一致的。如果单击了某个按钮，他们都认为单击事件不仅仅发生在按钮上，甚至也单击了整个页面

但有意思的是，IE和Netscape开发团队居然提出了差不多是完全相反的事件流的概念。IE的事件流是事件冒泡流，而Netscape的事件流是事件捕获流。事件冒泡和事件捕获称为两种事件处理模型

IE的事件流叫做事件冒泡(event bubbling)， 事件冒泡是结构上（非视觉上）嵌套的函数存在事件冒泡功能，即同一事件自子元素冒泡向父元素（自底向上）

[注意]所有现代浏览器都支持事件冒泡

但在具体实现在还是有一些差别。IE9、Firefox、Chrome、Safari将事件一直冒泡到window对象

而事件捕获的思想是不太具体的节点应该更早接收到事件，而最具体的节点应该最后接收到事件。事件捕获的用意在于在事件到达预定目标之前就捕获它

即事件捕获是指： 结构上（非视觉上）嵌套的元素存在事件捕获功能，即同一事件自父元素冒泡向子元素（自顶向下）

注意IE上没有事件捕获，Chrome和新版本的Firefox等都实现了

一个dom元素的一个事件类型绑定的一个处理函数只能存在一种事件模型，要么事件冒泡要么事件捕获。正常的通过addEventListener(type,fn,false)绑定事件时，最后一个参数默认是false表示的是，事件冒泡模型。如果改成true，立即变成事件捕获模型

如果一个dom元素的一个事件类型绑定了两个处理函数，两个函数的事件处理模型一个是事件冒泡一个是事件捕获，触发顺序是先捕获，后冒泡。

focus、blur、change、submit、reset、select等事件类型不冒泡

可以 利用事件冒泡和事件源对象可以叫事件委托给父元素

利用事件冒泡和事件源对象进行处理

优点：

性能好，不需要循环所有元素一个个绑定事件

灵活，当有其他新的子元素时，不需要重新绑定事件。

有的时候，我们不希望有冒泡功能，那我们怎么取消事件冒泡呢？

封装一个都好使的取消冒泡函数

有的时候我们需要阻止一些浏览器默认的事件

比如：表单提交、a链接跳转、右键菜单等

有几种方式：

参考资料：

DOM事件流的三个阶段

深入理解DOM事件机制系列第一篇——事件流

JS事件汇总

JS事件模型

事件1（上）

事件1（下）

DOM级别与DOM事件

DOM事件机制解惑

事件模型

JavaScript 事件委托详解

JavaScript 事件的学与记：stopPropagation 和 stopImmediatePropagation

event.target和event.currentTarget的区别

js怎么区分出点击的是鼠标左键还是右键？

关于JavaScript 的好书有哪些

1. JavaScript DOM 编程艺术

这本书作为被大家推荐的最多的前端入门书籍是有道理的。

他能真正让大家了解dom脚本编程，或是说前端编程技术背后的思路和原则。

对于初学者来说，这本书没有任何门槛，按部就班跟着书籍实例编写代码即可。

我们会知晓如何对浏览器元素操作和掌控，会学会如何实现简单的页面效果。

这种简单易得的成就感是一个编程语言入门时最难能可贵的体验。

阅读建议：

这本书虽然简单，但是能让人快速对前端产生兴趣和成就感。

不过后续学习jquery的时候可能会产生挫败感。原生js dom操作的成就感会被jquery便捷的API所彻底打败。所以一定要恰当的调整心态，转换思维方式，正确认识到jquery和原生js分别的优劣之处。

在熟练使用jquery后还能想起来翻看这本书，找到之前未曾发现的闪光点，就是入门成功了。

2. JavsScript高级程序设计（第三版）

无论何时，这都是学习js最好的书。

如果说其他的书都是在合适的阶段会有不一般的体验。

这本书就是无论什么阶段，都够你感悟一番的。

当你看完了市场上js相关（不包括框架类库的最佳实践类）的所有书籍。你再回去看这本书，也会发现其实95%的内容早就写在这本书里了，只不过你当时等级不够，根本没有意识到。

这本书排版舒服，翻译得体，内容丰富，语言流畅。涵盖了js语法（面向对象，闭包作用域等），js使用（dom，bom，html5API），编程实践（高阶函数，编码规范）等程序员使用javascript时会遇到的大部分问题。

（今天在上海面试了一天。大部分很顺利，只是有几个比较偏的问题没回答好。晚上回去之后一翻高程三，果然在里面都写得明明白白的。不得不服。）

阅读建议：

人们喜欢把他和犀牛书拿一起推荐，不过就我看来，他们完全不是一个可读性上的。

一个是课本一个是字典。而且还是佶屈聱牙的字典。

所以无论何时我都会把高程三排在js推荐书籍的第一位。

3. 锋利的jQuery

图忘了拍了，就不补了。

这本书如果紧接着dom编程看，会如我我说的那样瞬间摧毁你的小小的成就感。

因为这本工具书级别的书简单暴力到不给你思考什么“平稳退化”，“js动画计时器”这些dom编程中提及的问题，就直接就甩出一大片简单有效的jqueryAPI颠覆你的世界观。

这本书是如此的易懂以至于看完之后瞬间就觉得自己能把web玩出一片花来了。

作为工具书级别的书，或是说学习jqueryAPI的书，这是首选。

阅读建议：

熟悉jquery是每个前端必须要会的事。

只是不要被Jquery的便捷迷惑，而抛离原生js，把原生js贬得一文不值，否则后面会付出昂贵的代价。

4. 学习Javascript数据结构与算法

这本书相对是一本冷门书。

为什么我会推荐他，是因为他能解决每个半路出家的js程序员都曾思考过的一些问题：

1. 我们的数组Array这么强大，要栈Stack，队列Queue这些功能少，半半拉拉的东西干什么呢？

2. 我们学的数据结构搞来搞去好像也就那些玩意，为什么被大家这么推崇，还要分门别类讨论呢？

所以这本书只是为何告诉你上面这些问题的答案：

1. 栈和队列本来就没有Array功能强。没有Stack和Queue类只是因为ES5不去实现它而已。作为一种相互之间存在一种或多种特定关系的数据集合，其存在意义是不应该被其功能强大与否来决定的。

2. 数据结构和编程语言无关。语言死了，他们会在下一门语言里重生。哪怕计算机死了，他们都会在下一个概念体里重生。

阅读建议：

跟着书本把这里面的结构全部敲一遍，快的话一天就能搞定。

从此你便再不怕惧怕js相关的简单数据结构问题。

但是，遇上高级的树，图等问题该跪还是要跪。因为这本书虎头蛇尾，后面的高级点的数据结构介绍的不够深。

适合经常反思“它从哪里来，要到哪里去？”的js程序员，或后悔以前数据结构没好好学的前端同学。

5. JavaScript设计模式与开发实践

我认为腾讯AlloyTeam的这本书对我帮助媲美高程三。

那时候我恰好换公司，从原来的开发方式切换成另一种完全不同的开发方式，让我很不适应。

这本书及时的蹦出来，他拿实际的应用场景举例，告诉你不同js项目里如何共通设计模式，还极其详细的介绍了函数的高级用法，能让你对js高阶函数的认知上升一个台阶。

难能可贵的是他还拿java作为静态语言的类比。从语言统一高度来给你分析这些问题。

和上本介绍数据结构的书一样，这本书有的放矢，能完美的解决对js设计模式有疑问的同学的实际问题。

他比上本书更深刻，更易读，也更贴近实践。

阅读建议：

这是本适合反复阅读的书籍。

如果你的思路能根据应用场景自动切换到最适合的设计模式，说明你已吃透这本书了。

6. 高性能JavaScript

作为Orelly唯一一本我确实认可的javascript相关的书。作为Orelly唯一一本我确实认可的javascript相关的书。

他摒弃了Orelly系列所有我不喜欢的特点：

老外的聊天说教式阅读体验，样例不够丰富，排版单一，破事水等。

他的优点如下：

1. 情景丰富，基本涉及所有js性能优化的场景。还会给出不同场景的实际测试数据，真实可信。我们在阅读这些场景实例的同时也丰富了自己js的使用经验。

2. 给出了很多看似"旁门左道"的解决方案，而这些冷门的解决方案恰恰是有些人死活百度不到的真正能解决问题的最优解。

3. 在说问题的同时说原理，深入浅出，游刃有余。所以这本书不仅仅是一本介绍js性能相关的书，而是一本涉及浏览器原理，js解析原理，用户体验等知识的javascript最佳注解。

阅读建议：

建议和高程三一起看，可以算是高程三阅读的最佳伴侣。

高程三告诉你“他叫什么，他什么样”，

这本书就告诉你“他为什么”，“他该怎样”。

所以，当别人还在为某些问题绞尽脑汁的时候，你已经从起点上干翻他们了。

7. 你不知道的JavaScript（YOU DONT KNOW JAVASCRIPT）

大名鼎鼎的Github开源的书籍。大名鼎鼎的Github开源的书籍。

为了他的名气我也得买一本实体书来拜读下。

这本是上卷，只涉及作用域和闭包，this和对象原型两部分。

不过其深入程度是其他js书籍难以企及的。

可以说，这已经是大部分前端程序员对js语法可以深入了解的最底层了，再往下就直面编译原理了。