事件三要素,定时器,dom 事件流

174 阅读2分钟

上一章讲到的构造函数,这章继续其他的知识点

1. Date() 日期对象 是一个构造函数 必须使用new 来调用创建我们的日期对象

1)使用Date  如果没有参数 返回当前系统的当前时间
(2)参数常用的写法:数字型2022, 03, 26  或者是 字符串型 '2022-03-26 8:8:8'

2. Math数学对象 不是一个构造函数,不需要new 来调用 而是直接使用里面的属性和方法即可

(1).利用对象封装自己的数学对象  里面有 PI 最大值和最小值
(2).Math对象随机数方法   random() 返回一个随机的小数  0 =< x < 1
(3).这个方法里面不跟参数

1.png

4).想要得到两个数之间的随机整数 并且 包含这2个整数
 // Math.floor(Math.random() * (max - min + 1)) + min;
  function getRandom(min, max) {
      return Math.floor(Math.random() * (max - min + 1)) + min;
  }
  console.log(getRandom(1, 10));

2.png

3. 事件的三要素:事件源、 事件类型、事件处理程序

1).事件源 事件被触发的对象 谁 按钮
(2).事件类型  如何触发 什么事件 比如鼠标点击(onclick) 还是鼠标经过 还是键盘按下
(3).事件处理程序  通过一个函数赋值的方式完成

4. 执行事件步骤:获取事件源、绑定事件注册事件、添加事件处理程序

  <script>
  显示隐藏密码案例:
        // 1. 获取事件源
        var eye = document.getElementById('eye');
        var pwd = document.getElementById('pwd');
        // 2. 注册事件 处理程序
        var flag = 0;
        eye.onclick = function() {
            // 点击一次之后, flag 一定要变化
            if (flag == 0) {
                pwd.type = 'text';
                eye.src = 'images/open.png';
                flag = 1; // 赋值操作
            } else {
                pwd.type = 'password';
                eye.src = 'images/close.png';
                flag = 0;
            }

        }
    </script>

3.png

5. dom 事件流 三个阶段

        // 1. JS 代码中只能执行捕获或者冒泡其中的一个阶段。
        // 2. onclick 和 attachEvent(ie) 只能得到冒泡阶段。
        // 3. 捕获阶段 如果addEventListener 第三个参数是 true 
              那么则处于捕获阶段  document -> html -> body -> father -> son
        // var son = document.querySelector('.son');
        // son.addEventListener('click', function() {
        //     alert('son');
        // }, true);
        // var father = document.querySelector('.father');
        // father.addEventListener('click', function() {
        //     alert('father');
        // }, true);
        // 4. 冒泡阶段 如果addEventListener 第三个参数是 false 或者 省略 
              那么则处于冒泡阶段  son -> father ->body -> html -> document
        var son = document.querySelector('.son');
        son.addEventListener('click', function() {
            alert('son');
        }, false);
        var father = document.querySelector('.father');
        father.addEventListener('click', function() {
            alert('father');
        }, false);
        document.addEventListener('click', function() {
            alert('document')
            
            大家可以复制上面的代码去体会一下!

6. 常见事件对象的属性和方法

1).e.target 返回的是触发事件的对象(元素) 而this 返回的是绑定事件的对象(元素)
(2).e.target 点击了那个元素,就返回那个元素 而this 哪个元素绑定了这个点击事件,就返回谁

7. 定时器

1). setTimeout 
        // 语法规范:  window.setTimeout(调用函数, 延时时间);2). setInterval 
        // 语法规范:  window.setInterval(调用函数, 延时时间);
注意:      
 setTimeout  延时时间到了,就去调用这个回调函数,只调用一次 就结束了这个定时器
 setInterval 每隔这个延时时间,就去调用这个回调函数,会调用很多次,重复调用这个函数

更多精彩内容敬请关注

不愿迟到早退的叻叻白