【MDNjs笔记】——入门——第二章
2017-07-06 21:56
204 查看
If else
Switch
三元运算符
(condition) ? run this code : run this code instead
For循环
Break跳出循环
Continue跳出当前循环，继续下一循环
函数：重用代码块
匿名函数
1与事件绑定（匿名函数的主要作用）
2指定其为变量值（var a = function(){}）但是最好不要用这种方式，最好的还是function a (){}
作用域与冲突
函数内定义的变量只在函数内起作用，即作用域是函数
思考创建函数库的想法。随着你进一步进入你的编程生涯，你将开始一再做同样的事情。开始保持自己常用的实用程序函数库是一个好主意 - 然后可以将它们复制到新的代码中，甚至可以将其应用到任何需要它的HTML页面。
事件
不是js语言的一部分，只是浏览器内置jsAPI的一部分
绑定属性不要在html里面内联绑定
el.onclick=functionA
el.onclick=functionB
和
el.addEventListener(‘click’,A);
el.addEventListener(‘click’,A);
这两种方式：
第一种的函数A不会执行，会被overwrite掉（相当于给el添加事件属性），不灵活
但第一种兼容性更好
而第二种，两个函数都会执行，很灵活，可移除
兼容性不好（所以有必要写一个封装好的函数放在自己函数库里）
事件对象
e.target引起事件的对象
e.preventDefault()阻止默认事件
form.onsubmit = function(e) {
if (fname.value === '' || lname.value === '') {
e.preventDefault();
para.textContent = 'You need to fill in both names!';
}
}
事件冒泡 捕获
事件冒泡和捕获是描述在一个元素上激活相同事件类型的两个处理程序时会发生什么的两种机制。
videoBox.onclick = function() {
videoBox.setAttribute('class', 'hidden');
};
video.onclick = function() {
video.play();
};
冒泡和捕捉解释
当一个事件被一个有父元素的元素触发（例如<video>我们的例子）时，现代浏览器运行两个不同的阶段 - 捕获阶段和冒泡阶段。在捕获阶段：
浏览器检查元素的最外层祖先（<html>）是否onclick在捕获阶段中注册了一个事件处理程序，如果是，则运行它。
然后它移动到内部的下一个元素<html>，做同样的事情，然后是下一个元素，等等，直到它到达实际点击的元素。
在冒泡阶段，恰恰相反：
浏览器检查实际点击的元素onclick是否在冒泡阶段中注册了一个事件处理程序，如果是，则运行它。
然后它移动到下一个直接的祖先元素，并做同样的事情，然后是下一个，等等，直到它到达<html>元素。
在现代浏览器中，默认情况下，所有事件处理程序都注册在冒泡阶段。所以在我们当前的例子中，当你点击视频时，点击事件从<video>元素向外的气泡到<html>元素。一路上：
它找到video.onclick...处理程序并运行它，因此视频首先开始播放。
然后它找到videoBox.onclick...处理程序并运行它，因此视频也被隐藏。
因此，我们可以通过将上一个代码块中的第二个处理程序函数改为此来解决我们当前的问题：
video.onclick = function(e) {
e.stopPropagation();
video.play();
};
一个很好的例子是一系列的列表项目 - 如果您希望每个列表项都可以在单击时弹出消息，您可以在父<ul>项上设置click事件监听器，并将它们冒泡到列表项。
Switch
三元运算符
(condition) ? run this code : run this code instead
For循环
Break跳出循环
Continue跳出当前循环，继续下一循环
函数：重用代码块
匿名函数
1与事件绑定（匿名函数的主要作用）
2指定其为变量值（var a = function(){}）但是最好不要用这种方式，最好的还是function a (){}
作用域与冲突
函数内定义的变量只在函数内起作用，即作用域是函数
思考创建函数库的想法。随着你进一步进入你的编程生涯，你将开始一再做同样的事情。开始保持自己常用的实用程序函数库是一个好主意 - 然后可以将它们复制到新的代码中，甚至可以将其应用到任何需要它的HTML页面。
事件
不是js语言的一部分，只是浏览器内置jsAPI的一部分
绑定属性不要在html里面内联绑定
addEventListener（）和removeEventListener（）
（DOM2级中定义）el.onclick=functionA
el.onclick=functionB
和
el.addEventListener(‘click’,A);
el.addEventListener(‘click’,A);
这两种方式：
第一种的函数A不会执行，会被overwrite掉（相当于给el添加事件属性），不灵活
但第一种兼容性更好
而第二种，两个函数都会执行，很灵活，可移除
兼容性不好（所以有必要写一个封装好的函数放在自己函数库里）
事件对象
e.target引起事件的对象
e.preventDefault()阻止默认事件
form.onsubmit = function(e) {
if (fname.value === '' || lname.value === '') {
e.preventDefault();
para.textContent = 'You need to fill in both names!';
}
}
事件冒泡 捕获
事件冒泡和捕获是描述在一个元素上激活相同事件类型的两个处理程序时会发生什么的两种机制。
videoBox.onclick = function() {
videoBox.setAttribute('class', 'hidden');
};
video.onclick = function() {
video.play();
};
冒泡和捕捉解释
当一个事件被一个有父元素的元素触发（例如<video>我们的例子）时，现代浏览器运行两个不同的阶段 - 捕获阶段和冒泡阶段。在捕获阶段：
浏览器检查元素的最外层祖先（<html>）是否onclick在捕获阶段中注册了一个事件处理程序，如果是，则运行它。
然后它移动到内部的下一个元素<html>，做同样的事情，然后是下一个元素，等等，直到它到达实际点击的元素。
在冒泡阶段，恰恰相反：
浏览器检查实际点击的元素onclick是否在冒泡阶段中注册了一个事件处理程序，如果是，则运行它。
然后它移动到下一个直接的祖先元素，并做同样的事情，然后是下一个，等等，直到它到达<html>元素。
在现代浏览器中，默认情况下，所有事件处理程序都注册在冒泡阶段。所以在我们当前的例子中，当你点击视频时，点击事件从<video>元素向外的气泡到<html>元素。一路上：
它找到video.onclick...处理程序并运行它，因此视频首先开始播放。
然后它找到videoBox.onclick...处理程序并运行它，因此视频也被隐藏。
stopPropagation（）修复问题
这是令人讨厌的行为，但有一种方法来解决它！标准事件对象有一个可用的函数stopPropagation()，当在处理程序的事件对象上调用它使得处理程序运行时，但事件不会在链上进一步发生，所以不会再运行更多的处理程序。因此，我们可以通过将上一个代码块中的第二个处理程序函数改为此来解决我们当前的问题：
video.onclick = function(e) {
e.stopPropagation();
video.play();
};
事件委托
冒泡也允许我们利用事件委托 - 这个概念依赖于一个事实，如果你想要在大量子元素上运行一些代码，当你点击其中任何一个子元素，你可以给他们的父元素设置事件监听器，那么事件监听器会把影响冒泡给每个子元素，而不必单独设置每个孩子的事件监听器。一个很好的例子是一系列的列表项目 - 如果您希望每个列表项都可以在单击时弹出消息，您可以在父<ul>项上设置click事件监听器，并将它们冒泡到列表项。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 【MDNjs笔记】——入门——第三章——对象.构造函数.原型链.继承
- 【js 笔记】读阮一峰老师 es6 入门笔记 —— 第二章
- 【MDNjs笔记】——入门——第一章
- 【MDNjs笔记】——入门——第三章——json
- Cocos2d-js入门学习笔记
- 算法导论学习笔记－第二章－算法入门
- （ASP.NET MVC4 入门学习笔记）学习自己建项目2----引入css和JS的配置、DBHelper及其他
- JS入门经典笔记
- Angular.js入门笔记(1)
- Backbone.js入门教程第二版笔记（2）
- Node.js入门笔记
- 【算法导论】学习笔记第二章：算法入门
- JS入门经典笔记
- JavaScript学习笔记之JS基础入门
- jQuery入门学习笔记----第二章 jQuery选择器
- Node.js入门学习笔记（二）
- Node.js入门学习笔记-IDE选择/配置之WebStorm(windows)
- Node.js入门学习笔记-IDE选择/配置之WebStorm(windows)
- Node.js入门笔记
- Node.js学习笔记－入门