第八周 JS 学习笔记

作者: 丸子小姐__不懂爱 | 来源:发表于2020-03-02 00:02 被阅读0次

这一周主要学习了js事件这一块，学完事件后能做好多东西，于是自己做了一个计算器

计算器

我这可怜的代码

<div class="wrapper">
    <div class="calc-top">
        <div class="timer"></div>
        <div class="current-count"></div>
        <div class="result"></div>
    </div>
    <div class="countbox" id="countbox">
        <ul>
            <li>C</li>
            <li>%</li>
            <li>/</li>
            <li>*</li>
            <li>7</li>
            <li>8</li>
            <li>9</li>
            <li>-</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>+</li>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li class="equal">=</li>
            <li class="zero">0</li>
                <li>.</li>
        </ul>
    </div>
</div>

var timer = document.querySelector(".timer");
var currentCount = document.querySelector(".current-count");
var result = document.querySelector(".result");
var countbox = document.getElementById("countbox");
var lisBtn =document.querySelectorAll("li"); 
var s = false;
setInterval(function(){
    var curtime = new Date(),
          year = curtime.getFullYear(),
          month = curtime.getMonth()+1,
          data = curtime.getDate(),
          days = curtime.getDay(),
          hours = curtime.getHours(),
          mils = curtime.getMinutes(),
          seconds = curtime.getSeconds(),
         weeks = ["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];
    timer.innerHTML = year + "年" + month + "月" + data + "日" +weeks[days] + hours +"时"+ mils+ "分"+ seconds + "秒";
},1000)
for(var i = 0 ,len = lisBtn.length; i<len; i+=1){
    lisBtn[i].onclick = function (){
        switch(this.innerHTML){
            case "C":
                currentCount.innerHTML = "0";
                result.innerHTML = "";
                break;
            case "%":
                count("%");
                break;
            case "/":
                count("/");
                break;
            case "*":
                count("*");
                break;
            case "+":
                count("+");
                break;
            case "-":
                count("-");
                break;
            case "=":
                //不调用count 直接判断赋值运算
                s || (result.innerHTML += currentCount.innerHTML);
                // 清空屏幕current中的内容
                currentCount.innerHTML =eval(result.innerHTML.replace(/\%\/\*\-\+/,""));
                // 判断 NaN  返回  0
                currentCount.innerHTML = currentCount.innerHTML.substr(0,10).replace("NaN",0);
                s = true;
                break;
            case ".":
                //判断 并赋值
                s || (result.innerHTML += currentCount.innerHTML);
                currentCount.innerHTML = ".";
                // 过滤cur 中的符号
                if(currentCount.innerHTML.search(/[\.\%\/\*\-\+]/) != -1);
                break;
            default:
            // 输出数字
                s && (currentCount.innerHTML= currentCount.innerHTML , result.innerHTML += "" , s = false);
                currentCount.innerHTML.length  < 10 && (currentCount.innerHTML = (currentCount.innerHTML + this.innerHTML).replace(/^[0\%\/\*\-\+](\d)/,"$1"));

        }
    }

} 
function count(opi) {
    if(s){
        // 将输入cur 中的内容传给 result
        result.innerHTML = currentCount.innerHTML +opi;
        // 留下最后输入的内容
        currentCount.innerHTML = opi;
        return false;
    }else {
        //判断 屏幕内容 是否包含/[\%\/\*\-\+]$/ 包含则输出给result，否则 保留给屏幕
        /[\%\/\*\-\+]$/.test(currentCount.innerHTML) || (result.innerHTML += currentCount.innerHTML);
            currentCount.innerHTML = opi;
        //判断 result中是否包含/[\%\/\*\-\+]$/  包含则不改变，否则判断最后一位是否不等于opi 
        /[\%\/\*\-\+]$/.test(result.innerHTML) || (result.innerHTML += currentCount.innerHTML);
            result.innerHTML = result.innerHTML.slice(-1) != opi ? result.innerHTML.replace(/.$/,opi):result.innerHTML;
    }
}

一、事件流

1）事件冒泡

从最具体的元素向上冒泡到文档顶端

2）事件捕获

从文档的顶端向下捕获到最具体的元素上

3）DOM事件流

具体的三个阶段依次是
事件铺货 => 目标阶段 => 事件冒泡阶段

二、事件处理程序

1）DOM 0级通过js来注册事件处理程序

var btn = document.getElementById('btn')
    btn.onclick = function(){}

** 移除注册事件

btn.onclick = null;

1）DOM 2级通过js来注册事件处理程序

function showMsg(){
        alert('hello world')
}
 btn.addEventListener('click',showMsg,false)

** 移除注册事件

btn.removeEventListener('click',showMsg,false)

DOM2级中可以同时注册多个事件处理程序

三、事件对象

1） event对象

通过event对象实现注册多个事件绑定

var btn = document.getElementById('btn');
    var handler = function(event){
        switch (event.type){
            case "click":
                console.log('click');
                break;
            case 'mouseenter':
                console.log('mouseenter');
                break;
            case 'mouseleave':
                console.log('mouseleave');
                break;
        }
    }
    btn.onclick = handler;
    btn.onmouseenter = handler;
    btn.onmouseout = handler;

2）阻止默认事件

Link.onclick = function(event){
        event.preventDefault()
}

3）阻止事件冒泡

btn.onclick = function(event){
        event.stopPropagation();
}

4) 封装兼容性事件处理程序

 var eventUtil = {
        // 注册事件
        addHandler: function(ele,type,handler){
            if(ele.addEventListener){ // 现代浏览器
                ele.addEventListener(type,handler,false)
            }else if(ele.attachEvent){  //  IE
                ele.attachEvent('on' + type ,handler)
            }else {   // DOM0级
                ele['on' + type] = handler
            }
        },
        // 移除事件
        removeHandler: function(ele,type,handler){
            if(ele.removeEventListener()){ // 现代浏览器
                ele.removeEventListener(type,handler,false)
            }else if(ele.attachEvent){  //  IE
                ele.detachEvent('on' + type ,handler)
            }else {   // DOM0级
                ele['on' + type] = null
            }
        },
        // 获取event对象
        getEvent: function(event){
            return event ? event : window.event;
        },
        // 获取目标对象
        getTarget: function(event){
            return event.target || event.srcElement  // ie
        },
        // 阻止默认事件触发
        preventDefault: function(event){
            if(event.preventDefault){
                event.preventDefault();
            }else {
                event.returnValue = false;
            }
        },
        // 阻止冒泡
        stopPropagation: function(event){
            if(event.stopPropagation){
                event.stopPropagation();
            }else {
                event.cancelBubble = true;
            }
        }

    }

四、事件类型

1） UI事件

load 事件

// 页面图像，脚本等外部资源加载完毕，则会触发
 window.onload = function(){
      console.log('load')
  }

判断图片加载情况

 var oImg = new Image();
  oImg.onload = function(event){
      console.log('img load')
  }
  oImg.src = 'xxx.jpg'

unload 事件
一个页面切换到另一个页面时触发
resize事件
一般用于监听窗口大小变化
scroll 事件
页面滚动事件，获取滚动距离

 window.onscroll = function(event){
      if(document.compatMode == 'CSS1Compat'){  // 混杂模式
          console.log(document.documentElement.scrollTop)
      }else {
          console.log(document.body.scrollTop)
      }
  }

2）焦点事件

focus()
元素获取焦点
blur()
元素失去焦点
document.hasFocus()
检测文档中是否有元素获取焦点
document.activeElement
获取当前具有焦点的元素

3）鼠标滚轮事件

鼠标事件

  /**
   * click  单击
   * dblclick  双击
   * mousedown  按下鼠标时
   * mouseup  鼠标弹起时
   * mouseenter 鼠标移入元素范围内时触发， 不冒泡
   * mouseleave  鼠标移出元素范围内时触发，不冒泡
   * mousemove   鼠标在元素内移动时触发
   * mouseover   鼠标移出元素范围内时触发，冒泡
   * mouseout    鼠标移出元素范围内时触发，冒泡
   */

获取鼠标指针位置

    // 获取客户区坐标位置 (基于视口)
    oDiv.onclick = function(event){
        console.log(event.clientX , event.clientY)
    }

    // 页面坐标位置 (基于页面)
    oDiv.onclick = function(event){
        console.log(event.pageX , event.pageY)
    }

    // 屏幕坐标位置 (基于屏幕)
    oDiv.onclick = function(event){
        console.log(event.screenX , event.screenY)
    }

以下按键将影响鼠标点击事件

  oDiv.onclick = function(event){
        var keys = [];
        if(event.shiftKey){
            keys.push('shift')
        }else if(event.ctrlKey){
            keys.push('ctrl')
        }else if(event.altKey){
            keys.push('alt')
        }else if(event.metaKey){
            keys.push('meta')
        }
        console.log(keys)
    }

关于mouseover和mouseout
这两个事件将的event对象中包含 relatedTarget属性，包含着获取光标和失去光标的元素，很多时候这个属性是十分有用的

  oDiv.onmouseover = function(event){
        console.log(event.relatedTarget)
    }

判断按下的是鼠标上的哪个键

  oDiv.onmousedown = function(event){
        console.log(event.button)  //左 0  中 1 右 2
    }

获取用户连续点击的次数

  oDiv.onclick = function(event){
        console.log(event.detail)
    }

获取滚轮每次滚动的距离

  document.body.onmousewheel = function(event){
        console.log(event.wheelDelta) //  向上为正，向下为负
    }

4) 键盘和文本事件

keydown,keypress,keyup 多用于文本框中

获取按键的值

 document.onkeydown = function(event){
        console.log(event.keyCode)   // 获取按键的编码值
        console.log(event.key)   // 获取按键的值
    }

5) H5 提供的事件

**ontextmenu **
右键触发上下文菜单
beforeunload
页面卸载前触发，刷新页面也将触发

    window.onbeforeunload = function(event){
        event.returnValue = 'hello';
        return 'hello'
    }

readystatechange

document.onreadystatechange = function(){
        if(document.readyState == 'complate'){
            // 执行操作
        }
    }

pageshow和pagehide
监听页面的显示与关闭

  window.onpageshow = function(event){
        console.log(event.persisted) // 检查页面是否保存在缓存中
    }
    window.onpagehide = function(event){
        console.log(event.persisted) // 检查页面是否保存在缓存中
    }

hashchange
监听url参数列表改变

  window.onhashchange = function (event){
        console.log(event.oldURL , event.newURL)
    }

6) 设备事件

// IOS 设备方向判断
    window.onorientationchange = function(){
        console.log(window.orientation)  //0 垂直 90 左旋转 -90 右旋转
    }

    // 监测设备在空间中的朝向
     window.ondeviceorientation = function(event){
         console.log(event.alpha)  // 左右旋转
         console.log(event.beta)    // 前后旋转
         console.log(event.gamma)   // 扭转设备
     }

      // 监测设备是否处于运动状态
      window.ondevicemotion = function(event){
          console.log(event.acceleration)  // 不考虑重力， 每个方向上的加速度
          console.log(event.accelerationIncludingGravity)  // 考虑自然重力，每个方向上的加速度
          console.log(event.interval)  // 一个以毫秒表示的常量
          console.log(event.rotationRate) // 方向状态
      }

7) 触摸事件

       touchstart  // 手指触摸屏幕时触发
       touchmove   // 手指在屏幕上滑动时连续触发
       touchend    // 手指从屏幕上移开时触发
       touchcancel  // 触摸跟踪结束时触
       
       //触摸事件对象的属性
       touches 当前跟踪的触摸操作的Touch对象数组
       targetTouchs 特定事件目标的Touch对象数组
       changeTouches 自上次触摸以来发生了什么改变的Touch对象数组

第八周 JS 学习笔记

我这可怜的代码

一、事件流

1）事件冒泡

2）事件捕获

3）DOM事件流

二、事件处理程序

1）DOM 0级通过js来注册事件处理程序

1）DOM 2级通过js来注册事件处理程序

三、事件对象

1） event对象

2）阻止默认事件

3）阻止事件冒泡

4) 封装兼容性事件处理程序

四、事件类型

1） UI事件

2）焦点事件

3）鼠标滚轮事件

4) 键盘和文本事件

5) H5 提供的事件

6) 设备事件

7) 触摸事件

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

一只迎风乱飞的前端菜鸟

第八周 JS 学习笔记

我这可怜的代码

一、事件流

1）事件冒泡

2）事件捕获

3）DOM事件流

二、事件处理程序

1）DOM 0级 通过js来注册事件处理程序

1）DOM 2级 通过js来注册事件处理程序

三、事件对象

1） event对象

2） 阻止默认事件

3） 阻止事件冒泡

4) 封装兼容性事件处理程序

四、事件类型

1） UI事件

2）焦点事件

3）鼠标滚轮事件

4) 键盘和文本事件

5) H5 提供的事件

6) 设备事件

7) 触摸事件

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

一只迎风乱飞的前端菜鸟

1）DOM 0级通过js来注册事件处理程序

1）DOM 2级通过js来注册事件处理程序

2）阻止默认事件

3）阻止事件冒泡