JavaScript基本结构
1 条件语句
-
obj.addEventListener(‘change’, func)
select选择不同选项，触发change事件 -
if(变量名) {} //判断变量是否存在
-
如何让整个页面变色？
let html = document.querySelector('html');
html.style.backgroundColor = 'Black';
- 2者相等
obj.addEventListner('change', method)
obj.onchange = function() {}
- onchange事件
onchange事件会在域的内容改变时发生；也可用于单选框与复选框改变时触发的事件
//HTML,<input><textarea><select>
<element onchange = 'SomeJavaScriptCode'>
// JavaScript
obj.onchange = function() {some codes}
2 函数
- 内置函数
如str.replace(‘a’,‘b’)、myArray.join(’ ')、Math.random();
很多调用浏览器内置函数时调用的代码不是JS写的—是C++这种系统语言编写的
他们被定义为浏览器API的一部分，不算JS语言的一部分
- 匿名函数
function() {
alert('Hello');
}
匿名函数:无函数名，不会做任何事。
匿名函数可和事件处理程序一起使用。
let myBtn = document.querySelector('button');
myBtn.onclick = function(){
alert('hello');
}
将匿名函数分配为变量的值,此函数可分配为多个变量的值。
var myGreeting = function() {
alert('hello');
}
var anotherGreeting = function() {
alert('hello');
}
myGreeting();
anotherGreeting();
不过这样令人费解，创建方法时，还是用
function myGreeting() {
alert('hello');
}
匿名函数最好还是用在运行负载代码以响应事件触发（如点击按钮） - 使用事件处理程序
匿名函数，也被叫函数表达式。
函数声明和函数表达式的区别
函数声明：
function method() {
console.log(‘这是函数申明’);
}
函数表达式：定义函数，此函数作为变量的赋值语句或者调用执行语句而存在
let a = function fun() {
console.log(‘这是函数表达式–具名函数’);
}
解析器先读函数声明，在执行任何代码前可用。解析器执行到所在代码行才会被解释执行。
函数声明还会进行声明提升，表达式不会
- 其他：
(1) btn.onclick = method和btn.onclick = method()的区别:
函数名后的括号叫函数调用运算符,需要直接调用这函数才需要这么写。
匿名函数里的代码不是直接运行的
(2) 所以，根据(1).如果函数带了参数，需要匿名函数调用又不要直接引用，可以写成
btn.onclick = function() {
displayMessage('Woooooo~~~~');
}
(3) 常见DOM内置API介绍
- document.querySelector(‘html’)
- document.createElement(‘p’)
- node.setAttribute(‘class’,‘msgBox’)
- node.appendChild(panel): 向节点添加子节点，也可用来移动元素
- node.textContent: node的文本属性
- node.removeChild(): 指定node移除对应子元素
(4) 简单了解基础canvas
// 1. 创建画布
<canvas width="320" height="240">
<p>浏览器不支持canvas!</p>
</canvas>
如果不支持canvas则显示段落里面的文字
// 2. 获取对画布canvas的引用&获取对绘画区域的特殊引用getContext(),这样可以画图
const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');
// 画图步骤：清除矩形->填充矩形->填充颜色
ctx.clearRect(x, y ,width , height);
ctx.fillRect(x, y ,width , height);
ctx.fillStyle('green');
3. 事件介绍
- 浏览器中发生的一系列事件
- 在某个元素上点击鼠标/悬停光标
- 在键盘中按下某个按钮
- 调整浏览器大小/关闭浏览器窗口
- 一个网页停止加载
- 提交表单
- 播放、暂停、关闭视频
- 发生错误
事件处理器/事件监听器：事件触发时运行的代码块，如：
btn.onclick = function() {
const rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
document.body.style.backgroundColor = rndCol;
}
- 使用网页事件的方法
(1) 事件处理器的属性
btn.onfocus/btn.onblue - 颜色于按钮被置于焦点/解除焦点时改变
btn.ondbclick - 颜色在按钮被双击时变色
btn.onmouseover/btn.onmouseout - 颜色在鼠标移入/移出按钮上方改变
window.onkeypress/window.onkeydown/window.onkeyup - 键盘按键被按下颜色改变，keypress：按下按钮并松开，keydown和keyup：按下&松开
基本所有元素都有onclick，但像特定元素如video，只有onplay
(2) addEventListener()和removeEventListener()
addEventListener()：
btn.addEventListener('click', function() {
var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
document.body.style.backgroundColor = rndCol;
});
removeEventListener()移除事件监听器
btn.removeEventListener('click', bgChange);
好处：大型项目中可高效清除不用的事件监听器
此外，addEventListener可点击执行两个事件
myElement.addEventListener('click', functionA);
myElement.addEventListener('click', functionB);
- 其他事件概念
(1) 事件对象
事件对象:event、evt、e，自动传递给事件处理函数
函数中设置背景颜色样式在e.target上，指按钮本身。
e.target:事件刚刚发生的元素的引用。
对多个元素设置相同事件处理程序时，e.target有用，他可以准确选择当前操作的东西，对所有元素执行某些操作
(2) 阻止默认行为
背景：希望事件不执行它的默认行为,如表单提交禁止提交空字段。
e.preventDefault()
(3) 事件冒泡&捕获
场景：一个事件发生在有父元素的元素上，现代浏览器进行2个阶段-捕获阶段&冒泡阶段
事件捕获：
- 浏览器检查最外层祖先<html>, 是否在捕获阶段中注册了一个onclick事件处理程序，如果是就运行
- 移到<html>下一个祖先元素，执行相同操作，until实际点击元素
事件冒泡：
- 浏览器检查实际点击元素, 是否在冒泡阶段中注册了一个onclick事件处理程序，如果是就运行
- 移到下一个祖先元素，执行相同操作，直到到达<html>元素
默认事件冒泡!
用stopPropagation()修补问题
事件冒泡可用stopPropagation()解决，只会当前事件处理程序，不会在冒泡链上扩大
video.onclick = function(e) {
e.stopPropagation();
video.play();
}
注：
- 默认all事件处理程序在冒泡阶段注册的，如果希望捕获阶段注册，通过addEventListener()注册处理程序，将第三个属性设置为true
(4) 事件委托
冒泡允许利用事件委托。
如果想要大量子元素单击任何一个都可执行一段代码，将事件监听器设置在其父节点上，让子节点上发生的事件冒泡到父节点上
例子：
如果想让每个列表项被点击时弹出一条信息，可以将click单击事件监听器设置在父元素<ul>上，这样事件就会从列表项冒泡到其父元素<ul>上。
1009
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
