03 - 内置&&事件对象

---

本文是针对刚学编程的小白,都是一些基础知识,如果想了解更多深层一点的东西,欢迎移步本人博客!!

博客地址 点击跳转

---

------------------ 日期对象-------------------

---

创建日期

<script>
    //内置对象中的一个：Date
    //通过Date创建对象
    var date = new Date();
    //1.获取1970 1月1日 00:00:00:000距离现在的毫秒数
    var minSecond = date.getTime();
    console.log(minSecond);
    //2.定义一个自己的时间距离1970年的毫秒数
    var myDate = new Date('2017/03/05 18:30:00');
    console.log(myDate.valueOf());
</script>

Date对象的其他方法

<script>
    var myDate = new Date();
    //1.获取当前的年月日以及星期
    // 获取年
    var year = myDate.getFullYear();
    // 获取月
    //获取的月份是从0到11,0对应的是一月, 通常都会+1 实现中国的月份
    var month = myDate.getMonth() +1 ;
    // 获取日
    var day = myDate.getDate();
    // 获取星期
    var weedDay = myDate.getDay();
    //获取的星期是从0到6,0对应周日 一般都会添加一个数组来实现中国的星期几
    var weekArray = ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'];
    console.log(year);
    console.log(month);    
    console.log(day);
    console.log(weedDay);
</script>

Date对象的全部获取方法

getDate()                  获取日 1-31
getDay ()                  获取星期 0-6
getMonth ()                获取月  0-11
getFullYear ()            获取完整年份（浏览器都支持）
getHours ()                获取小时 0-23
getMinutes ()                获取分钟 0-59
getSeconds ()                获取秒  0-59
getMilliseconds ()            获取当前的毫秒
getTime ()         返回累计毫秒数(从1970/1/1午夜)

---

------------------ event事件 -------------------

---

event事件

• 只要触发DOM上的某个事件时，会产生一个事件对象event，这个对象中包含着所有与事件有关的信息。所有浏览器都支持event对象，但支持的方式不同。比如：IE6-8只能通过window.event获取事件对象，而其他的则可以直接获取。通常，考虑兼容性的写法
  var event = event || window.event.

event常见属性

事件属性

pageX/pageY、screenX/screenY、clientX/clientY的区别

• screenX/screenY 是以屏幕为基准进行测量，即：当前元素距离屏幕的尺寸
• pageX 和 pageY 是以当前文档（绝对定位）为基准，不适用于IE6-8;
• clientX 和 clientY 是以当前可视区域为基准，类似于固定定位。

JS常见事件

• onmousemove 当鼠标在当前元素中移动的时候触发，鼠标只要移动一像素就会执行的事件，频率非常高；

• onmouseover 当鼠标进入当前元素时触发，只会被触发一次

• onmouseup 当鼠标弹起的时候触发

• onmousedown 当鼠标按下的时候触发

防止拖动时选中内容

防止拖拽的时候选中拖拽区域中的内容，代码如下：

window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();

示例代码: 附两个小案例帮助更好的理解

放大镜特效案例 点击查看
滚动条特效案例 点击查看

代码的执行-同步和异步

• 同步执行

  • 下一行代码的执行必须等待上一个行代码执行完毕再执行；或者说上一行未执行完毕下一行不能执行。

• 异步执行

  • 代码各自执行各自的，互相独立。

• 初始化执行

  • 网页一发布就执行的代码称之为初始化中执行；初始化也是同步执行的一种。

• 总结

  • 目前我们学习的代码中有哪些是同步的哪些是异步的？主要关注异步就可以，所有被鼠标触发的事件都可以认为是异步，互相独立。还有一个需要注意的就是定时器中的代码都是异步的，也是互相独立。

• 示例代码: 附小demo一个 帮助更好的理解

<button id="btn">按钮</button>
<div id="box"></div>

<style>
        div{
            width: 100px;
            height: 100px;
            border:1px solid #ccc;
        }
</style>

<script>
    var btn = document.getElementById('btn');
    var box = document.getElementById('box');
    //事件对象：表示事件中所有功能以及属性的集合
    //事件对象的使用：当事件触发的时候，会把事件对象打包成一个包，以形式参数的形式传递给事件指令
    //这个参数一般是e  也就是event
    //我们可以通过e获取所有的值坐标：通过e.clientX,e.clientY,一般这是一个数值，不是字符
   btn.onclick =  function sum(e){
        console.log(e.clientX);
        console.log(e.clientY);
        this.innerHTML = e.clientX +'<br>'+ e.clientY;
        console.log(e);
    }
</script>