javascript 学习笔记2 事件参考

参考资料：https://developer.mozilla.org/zh-CN/docs/Learn/JavaScript/Building_blocks

事件参考：
https://developer.mozilla.org/zh-CN/docs/Web/Events

条件语句：
if (choice === 'sunny') {
    para.textContent = '阳光明媚。穿上短裤吧！去海滩，或公园，吃个冰淇淋。';
  } else if (choice === 'rainy') {
    para.textContent = '外面下着雨；带上雨衣和雨伞，不要在外面呆太久。';
  } else if (choice === 'snowing') {
    para.textContent = '大雪纷飞，天寒地冻！最好呆在家里喝杯热巧克力，或者去堆个雪人。';
  } else if (choice === 'overcast') {
    para.textContent = '虽然没有下雨，但天空灰蒙蒙的，随时都可能变天，所以要带一件雨衣以防万一。';
  } else {
    para.textContent = '';
  }
  
  
&&——逻辑与 ：if (choice === 'sunny' && temperature < 86)
||——逻辑或 ： if (!(iceCreamVanOutside || houseStatus === 'on fire')) 

switch (表达式) {
  case 选择1:
    运行这段代码
    break;

  case 选择2:
    否则，运行这段代码
    break;

  // 包含尽可能多的情况

  default:
    实际上，仅仅运行这段代码
}
  
  
三元运算符：
const greeting = isBirthday
  ? '小王生日快乐，祝你有个美好的一天！'
  : '小王早上好。';
  
循环：
for (var i = 0; i < 100; i++) {
}


 break 语句将立即退出循环
 
 使用 continue 跳过迭代
 
 while
 do ... while

没有函数名的函数是匿名函数，通常将匿名函数与事件处理程序一起使用

可以将匿名函数分配为变量的值，例如：
var myGreeting = function() {
  alert('hello');
}
现在可以使用以下方式调用此函数：
myGreeting();

匿名函数也称为函数表达式。函数表达式与函数声明有一些区别。函数声明会进行声明提升（declaration hoisting），而函数表达式不会。

添加事件监听器：addEventListener
移除事件监听器：removeEventListener

您也可以给同一个监听器注册多个处理器，下面这种方式不能实现这一点：
myElement.onclick = functionA;
myElement.onclick = functionB;
第二行会覆盖第一行，但是下面这种方式就会正常工作了：
myElement.addEventListener('click', functionA);
myElement.addEventListener('click', functionB);
当元素被点击时两个函数都会工作

有时候在事件处理函数内部，您可能会看到一个固定指定名称的参数，例如event，evt或简单的e。这被称为事件对象，它被自动传递给事件处理函数：
function bgChange(e) {
  const rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
  e.target.style.backgroundColor = rndCol;
  console.log(e);
}

btn.addEventListener('click', bgChange);
事件对象 e 的 target 属性始终是事件刚刚发生的元素的引用。所以在这个例子中，我们在按钮上设置一个随机的背景颜色

希望事件不执行它的默认行为 preventDefault ：
form.onsubmit = function(e) {
  if (fname.value === '' || lname.value === '') {
    e.preventDefault();
    para.textContent = 'You need to fill in both names!';
  }
}

事件捕获：
浏览器检查元素的最外层祖先<html>，是否在捕获阶段中注册了一个onclick事件处理程序，如果是，则运行它。
然后，它移动到<html>中单击元素的下一个祖先元素，并执行相同的操作，然后是单击元素再下一个祖先元素，依此类推，直到到达实际点击的元素。
事件冒泡：
浏览器检查实际点击的元素是否在冒泡阶段中注册了一个onclick事件处理程序，如果是，则运行它
然后它移动到下一个直接的祖先元素，并做同样的事情，然后是下一个，等等，直到它到达<html>元素。
video在<div>之内 - video是<div>的一个子元素 - 所以点击video实际上是同时也运行<div>上的事件处理程序。
在现代浏览器中，默认情况下，所有事件处理程序都在冒泡阶段进行注册。因此，在我们当前的示例中，当您单击视频时，这个单击事件从 <video>元素向外冒泡直到<html>元素

阻止冒泡 stopPropagation：
当在事件对象上调用该函数时，它只会让当前事件处理程序运行，但事件不会在冒泡链上进一步扩大，因此将不会有更多事件处理器被运行 (不会向上冒泡)。
video.onclick = function(e) {
  e.stopPropagation();
  video.play();
};

事件委托：
如果你想要在大量子元素中单击任何一个都可以运行一段代码，您可以将事件监听器设置在其父节点上，并让子节点上发生的事件冒泡到父节点上，而不是每个子节点单独设置事件监听器。

Node.js(服务器端 JavaScript)

通过 prototype 属性向已有的构造器添加方法

继承的属性和方法是定义在 prototype 属性之上的.
不在 prototype 对象内的成员，不会被继承

看一个对象有那些属性或方法：
var myString = 'This is my string.';
myString.__proto__
或
Object.getPrototypeOf(myString)

创建对象：对象成员之间通过逗号分隔
var person = {
  name : ['Bob', 'Smith'],
  age : 32,
  gender : 'male',
  interests : ['music', 'skiing'],
  bio : function() {
    alert(this.name[0] + ' ' + this.name[1] + ' is ' + this.age + ' years old. He likes ' + this.interests[0] + ' and ' + this.interests[1] + '.');
  },
  greeting: function() {
    alert('Hi! I\'m ' + this.name[0] + '.');
  }
};

访问属性的两种不同方式：
1）person.age
2）person['age']
两种方式的区别：
点表示法只能接受字面量的成员的名字，不接受变量作为名字。但括号表示法 可以接受变量

关键字"this"指向了当前代码运行时的对象

正确使用 new 运算符的方法就是在正常调用函数时，在函数名的前面加上一个 new 前缀。通过这种方法，在调用函数前加一个 new ，它就会返回一个这个函数的实例化对象。然后，就可以在这个对象上面添加一些属性

对象原型：https://developer.mozilla.org/zh-CN/docs/Learn/JavaScript/Objects/Object_prototypes

通过new来创建实例：
let testBall = new Ball(50, 100, 4, 4, 'blue', 10);

正确使用 new 运算符的方法就是在正常调用函数时，在函数名的前面加上一个 new 前缀。通过这种方法，在调用函数前加一个 new ，它就会返回一个这个函数的实例化对象


定义类：其中constructor 关键字来声明构造函数
class Person {

  name;

  constructor(name) {        
    this.name = name;
  }

  introduceSelf() {
    console.log(`Hi! I'm ${this.name}`);
  }

}

继承：使用 extends 关键字来声明这个类继承自另一个类；使用 super() 调用父类的构造函数
class Professor extends Person {

  teaches;

  constructor(name, teaches) {
    super(name);
    this.teaches = teaches;
  }

  introduceSelf() {
    console.log(`My name is ${this.name}, and I will be your ${this.teaches} professor.`);
  }

  grade(paper) {
    const grade = Math.floor(Math.random() * (5 - 1) + 1);
    console.log(grade);
  }

}

私有方法与私有数据属性一样，你也可以声明私有方法。而且名称也是以 # 开头，只能在类自己的方法中调用

数组对象也是一种合法的 JSON 对象，例如：
[
{
"name" : "Molecule Man",
"age" : 29,
"secretIdentity" : "Dan Jukes",
"powers" : [
"Radiation resistance",
"Turning tiny",
"Radiation blast"
]
},
{
"name" : "Madame Uppercut",
"age" : 39,
"secretIdentity" : "Jane Wilson",
"powers" : [
"Million tonne punch",
"Damage resistance",
"Superhuman reflexes"
]
}
]

JSON 要求在字符串和属性名称周围使用双引号。单引号无效。

json与字符串互转：stringify parse
var myJSON = { "name" : "Chris", "age" : "38" };
var myString = JSON.stringify(myJSON);
var superHeroes = JSON.parse(myString)

posted on 2023-03-22 19:29 我和你并没有不同阅读(29) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· javascript 学习笔记

· javascript 学习笔记3

· js基础篇一

· JavaSpcript编程（八）

· Java-Script学习笔记-2

阅读排行：
· DeepSeek 开源周回顾「GitHub 热点速览」
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布：重大改进与新特性概览！
· AI与.NET技术实操系列（二）：开始使用ML.NET
· .NET10 - 预览版1新功能体验（一）

我和你并没有不同

javascript 学习笔记2 事件参考

导航

公告

统计

搜索

常用链接

我的标签

随笔分类

随笔档案

阅读排行榜

评论排行榜

推荐排行榜

最新评论