本篇为《JavaScript&jQuery交互式Web前端开发》第六章阅读笔记
事件是js中看似很重要的概念，看似简单，也经常会遇到，但是对其一些实际的概念，还是很有辨析清楚的必要。
第六章讲的是事件，记录的都是比较基础概念的内容。
1、不同事件类型：UI事件、键盘事件、鼠标事件焦点事件、表单事件、变动事件（脚本修改了DOM结构之后发生）
2、将事件绑定到元素的三种方法：1)HTML事件处理程序，即在HTML中添加事件（不要使用） 2)传统的DOM事件处理（优势是将js代码从html中分离出来，主要劣势是只能在一个事件上添加一个函数。绑定事件有“on”，调用的函数名不带小括号，因而无法调用有参数的函数） 3)第2级DOM监听器（允许一个事件触发多个方法）
3、this关键字在IE8或者更早版本的IE中，会被指向window对象。（因而在事件的函数中，也不常用this来标识事件对象，而是用引入一个e参数（后面会提到））
4、事件监听器将事件绑定到元素的语法，指定了当事件发生时应该执行哪个函数（在使用函数时注意要去掉后面的小括号，因为小括号表示函数会在页面加载到这里时运行，而不是事件发生时运行）。同时，和传统HTML和DOM事件处理程序不同，当指定需要监听的事件名称时，不需要在事件名称前加上“on”
5、p246 当解析器看到函数调用后面的小括号（针对命名函数而言）时，就会直接执行函数代码而不是在事件触发时才执行。因而需要将这些“带参数的命名函数”封装在“匿名函数”中（虽然匿名函数也有小括号，但是其只会在事件触发时运行），这样的话，使用参数的命名函数就只会在匿名函数被调用时执行，也就是在事件触发时才执行而不是看到函数就执行。 · 注意，上面是由于使用的命名需要传入参数，才会出现这样的情况；如果使用的命名参数不需要传入参数，那么直接写函数名称就可以了，不要再在后面添加“()”
6、IE5~IE8拥有不同的时间模型，它们不支持addEventListener()方法，可以用attchEvent()替代（attchEvent之能用于IE）。因而写代码时可以先用if...else...检测是否有addEventListener方法，如果没有的话，就使用attchEvent，注意在attchEvent使用时，事件名称需要加上“on” 7、事件流：事件发生的顺序叫做事件流（HTML元素都位于另一些元素中，如果鼠标移到一个链接上，同样也会把鼠标移到其父元素上）。有事件冒泡（从具体节点向外传播）和事件捕获（从最宽泛节点向内传播）两种。addEventListener()方法的最后一个参数允许选择事件触发的方法，true为捕获方式/false为冒泡方式（通常使用false作为默认选择，因为IE8和更早版本的IE不支持捕获模式）。
8、事件对象：事件对象告诉你关于这个事件的信息，以及它发生在哪个元素上（应用于函数需要对事件的对象做处理时）。p253针对无参数的事件监听器和有参数的事件监听器两种情况。（在IE5~IE8的事件对象不会自动传递给事件处理函数，而是作为window对象的一个子属性存在。因而也应使用if...语句进行判断。）（这里使用e，e为事件对象被传递给函数时其传入的参数名）（获取事件对象，firefox中使用e.target，IE中使用e.srcElement，chrome中两个都有）
9、事件委托：用户与界面中大量元素交互时，如果为大量元素创建事件监听器会造成页面速度下降，不过事件流允许你在父元素上监听事件。也就是在父元素上监听事件，而不是在每个子元素上分别响应其事件。eg:在ul元素上添加事件监听而不是li元素，这样的话只需要一个事件监听，而且事件的发生不会受到列表添加或者删除列表项的影响。
10、改变默认行为：preventDefault()（阻止点击链接或者提交表单时，把用户导向到另一个页面）（IE5~IE8下使用另一个方法替代）； stopPropagation()（处理完某个事件后，阻止事件向其祖先元素继续冒泡）（IE5~IE8下使用另一个方法替代）； 同时使用前面两个，使用return false（该方法不足点就是，解释器遇到return false后，就会停止处理这个函数中剩下的代码而继续执行调用这个函数的代码后的内容，所以还是常用preventDefault()）
11、p260关于能否使用this的解释，很重要（函数不传递参数时可以使用this，函数传递参数时不能使用this（向函数传递参数时，this关键字会失效，因为这个函数的所有者不再是事件监听器所绑定的元素，而是那个匿名函数））
12、load的事件监听器需要附加在window对象上（而不是document对象，因为这可能会带来跨浏览器兼容问题）
13、鼠标事件中，把mousedown和mouseup分开，通常被用于实现拖放功能，或用在游戏控件的开发中
14、用户在点击一个表单元素时候最好使用focus事件而不是click事件，因为用户可能通过键盘的tab键访问这个表单元素
15、screenX和screenY是从整个屏幕（而不是浏览器）的左上角开始计算的/pageX和pageY属性表示鼠标指针在整个页面中的位置/clientX和clientY表示鼠标指针在浏览器可视区域中的位置。
16、得到按下了哪个键 String.fromCharCode(event.keyCode) （keyCode代表按当前用户下了哪个键，为ASCII码）
17、表单事件：1)submit：这个事件通常用于在将表单数据发送到服务器之前，检查用户的输入值； 2)change：当某些表单元素的状态发生变化时触发（建议用change事件取代某些click事件，因为用户不一定只通过单击鼠标来和表单元素交互）； 3)input：该事件常被用于input和textarea元素
18、变动事件和变动观察者 p275（注意DOMNodeInserted和DOMNodeInsertedIntoDocument的区别http://help.dottoro.com/ljmcxjla.php 也就是变动的是本节点还是本节点的父节点的区别）
design by LiShu 联系我