03 - 内置&&事件对象
2016-12-21 本文已影响25人
西巴撸
本文是针对刚学编程的小白,都是一些基础知识,如果想了解更多深层一点的东西,欢迎移步本人博客!!
博客地址 点击跳转
------------------ 日期对象-------------------
创建日期
<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>
