蓝旭前端05：JavaScript进阶

蓝旭前端05：JavaScript进阶

文章目录

• 蓝旭前端05：JavaScript进阶
• • 基础简单复习
  • • 数据类型
    • 变量
    • 运算符
    • 控制语句
    • JavaScript引入
    • JavaScript输出
    • JavaScript注释
    • JavaScript弹窗
    • Overview
    • 获取元素
    • • 通过ID获取元素
      • 通过类名获取元素
      • 通过标签名获取元素
      • 通过选择器获取元素
      • 事件监听
      • • 事件监听
        • • 事件监听的例子
          • 事件对象
          • • 事件对象
            • 事件对象的例子
            • 事件委托
            • • 事件委托
              • 事件委托的例子
              • 事件绑定
              • • 事件绑定
                • 事件绑定的例子
                • 事件解绑
                • • 事件解绑
                  • 事件解绑的例子
                  • 事件触发
                  • • 事件触发
                    • 事件触发的例子
                    • 事件处理程序
                    • • 事件处理程序
                      • 内联事件处理程序
                      • DOM0级事件处理程序
                      • DOM2级事件处理程序
                      • 实践：猜数游戏
                      • • 小作业（选做其中任意一个，有兴趣的同学可以做多个）

                          基础简单复习

                          数据类型

                          • 基本数据类型：Number、String、Boolean、Null、Undefined等。
                          • 引用数据类型：Object、Array、Function等。
                          • typeof操作符：返回数据类型的字符串形式。

                            变量

                            • 变量声明：var、let、const。区别：var没有块级作用域，let和const有块级作用域，const声明的变量不能修改。什么是块级作用域：{}。举例：

                              
                              （图片来源网络，侵删）

                              {
                                  var a = 1
                                  let b = 2
                                  const c = 3
                              }
                              console.log(a) // 1
                              console.log(b) // 报错
                              console.log(c) // 报错
                              

                            • 变量赋值：赋值操作符=。

                            • 变量命名：字母、数字、下划线、$，不能以数字开头。

                            • 变量作用域：全局作用域、局部作用域。

                            • 变量提升：变量声明会提升到作用域的最前面。

                            • 变量作用域链：内部作用域可以访问外部作用域的变量，反之不行。

                              运算符

                              • 算术运算符：+、-、*、/、%。
                              • 赋值运算符：=、+=、-=、*=、/=、%=。
                              • 比较运算符：==、!=、===、!==、>、=、 console.log('click') }, false) console.log('div') }, false) document.getElementById('btn').addEventListener('click', function() { console.log('btn') }, false) console.log('btn') event.stopPropagation() }, false) // 事件对象 }) console.log(event.type) // click console.log(event.target) // 点击的元素 console.log(event.currentTarget) // 绑定事件的元素 console.log(event.clientX) // 鼠标点击的x坐标 console.log(event.clientY) // 鼠标点击的y坐标 }, false) if (event.target.tagName === 'tag') { // 事件处理函数 } }) // 为什么要判断tagName：防止事件源不是li，注意tagName是大写，这是一个坑，这个属于DOM的知识 // console.log(event.target.tagName) if (event.target.tagName === 'LI') { console.log(event.target.innerHTML) } }, false) console.log('click') }, false) console.log('click'); btn.removeEventListener('click', clickHandler); } btn.addEventListener('click', clickHandler); console.log('click'); }, false); // 手动触发按钮的点击事件 btn.dispatchEvent(new Event('click')); var clr = document.getElementById('clr'); clr.addEventListener('mouseover', function() { this.style.backgroundColor = 'red'; }, false); // 手动触发div的mouseover事件 // clr.dispatchEvent(new Event('mouseover')); var keyon = document.getElementById('keyon'); document.addEventListener('keydown', function() { keyon.innerHTML = '按下了键盘'; }, false); document.addEventListener('keyup', function() { keyon.innerHTML = '现在没有按下'; }, false); // 手动触发键盘事件 document.dispatchEvent(new KeyboardEvent('keydown', { key: 'a' })); console.log('click'); } console.log('click'); }, false)