JavaScript---DOM事件

DOM事件

在触发DOM元素上的某个事件时，会产生一个事件对象event，这个事件对象中包含着所有与事件有关的信息。包括导致事件的元素、事件的类型以及其他与事件有关的信息。

事件的类型

表单事件

事件类型	说明
oninput	输入事件
onsubmit	表单提交事件
onreset	表单重置事件
onchange	内容改变事件
onfocus	获取焦点时触发的事件
onblur	失去焦点时触发的事件

鼠标事件

事件类型	说明
onmouseover	鼠标刚进入元素时触发
onmouseenter	鼠标完全进入元素时触发
onmousemove	鼠标在元素上移动时触发
onmouseout	鼠标刚要离开元素时触发
onmouseleave	鼠标完全离开元素时触发
onmousedown	鼠标按下时触发
onmouseup	鼠标弹起时触发
onclick	鼠标单击时触发
ondblclick	鼠标双击时触发

键盘事件

事件类型	说明
onkeydown	键盘按键按下时触发
onkeypress	键盘按着不放时触发
onkeyup	键盘按键弹起时触发

窗口事件

事件类型	说明
onload	文档及其资源文件都加载完成时触发
onunload	关闭窗口时触发

注册事件处理程序

通过DOM元素属性注册事件处理程序

<button id="mybutton">点我</button>
<script> 

var mybutton = document.getElementById('mybutton');

mybutton.onclick = function() { 

alert('Hello World');

};


mybutton.onclick = function() { 

alert('Hi');

};
</script>

注意：通过上面这种方式添加事件，同一个类型的事件如果添加多次的话，只执行最后添加的事件。

通过HTML标签属性注册事件处理程序

<button onclick="alert('Hello World')">点我</button>

使用addEventListener()方法注册事件处理程序

<button id="mybutton">点我</button>
<script> 

var mybutton = document.getElementById('mybutton');

mybutton.addEventListener('click', function() { 

alert('Hello World'); 
}, false);

mybutton.addEventListener('click', function() { 

alert('Hi'); 
}, false);
</script>

注意：同一种类型的事件可以添加多次，执行顺序是先添加会先执行，后面依次执行。

事件的传递过程

var div = document.getElementsByTagName("div");
var btn = document.getElementsByTagName("button")[0];
      		console.log(div)
btn.onclick = function(){
     alert("点击事件被触发了1");
	      		
}

div[0].onclick = function(){
      alert("div接受到了btn传递上来的事件了1");
}

div[1].onclick = function(){
      alert("div接受到了btn传递上来的事件了2");
}

window.onclick = function(){
      alert("window");
}

阻止事件传播

使用事件对象的 stopPropagation()方法停止事件传播。

阻止事件默认行为

方法一：使用事件对象的 preventDefault() 方法阻止默认行为。
方法二：在事件的处理函数中返回false

Math对象

Math 是一个内置对象， 它具有数学常数和函数的属性和方法。不是一个函数对象。

与其它全局对象不同的是,Math 不是一个构造器. Math 的所有属性和方法都是静态的.

Math对象的常用属性

Math.E

欧拉常数，也是自然对数的底数, 约等于 2.718.

Math.LN2

2的自然对数, 约等于0.693.

Math.LN10

10的自然对数, 约等于 2.303.

Math.LOG2E

以2为底E的对数, 约等于 1.443.

Math.LOG10E

以10为底E的对数, 约等于 0.434.

Math.PI

圆周率，一个圆的周长和直径之比，约等于 3.14159.

Math.SQRT1_2

1/2的平方根, 约等于 0.707.

Math.SQRT2

2的平方根,约等于 1.414.

Math对象的常用方法

Math.ceil(x)向上取整（天花板函数）

		console.log(Math.ceil(3.1415926));// 4

Math.floor(x)向下取整（地板砖函数）

		console.log(Math.floor(3.689)); // 3

Math.max(x, y, z, ...)求多个数之中的最大值

		console.log(Math.max(2, 3, 23, 67, 90, 120));// 120

Math.min(x, y, z, ...)求多个数之中的最小值

		console.log(Math.min(54, 12, 3, 89, 45, 1)); // 1

Math.round(x)对数字进行四舍五入运算，最后的结果为整数

		console.log(Math.round(3.14));// 3
		console.log(Math.round(3.56));// 4

Math.random()求0到1之间的随机数，包含0，但不包含1，[0, 1)

console.log(Math.random());

Math.pow(x,y) 返回x值的y次方

console.log(Math.pow(2, 3);  // 8

Math.sqrt(x)开平方

		console.log(Math.sqrt(16)); // 4

案例：获取100到999之间的随机整数，包括两个数在内。

公式：Math.floor(Math.random() * (上限 - 下限 + 1)) + 下限;

  var min = 100;
  var max = 999;
  Math.floor(Math.random() * (max - min + 1)) + min;** 

Date用法

Date对象的创建方式

new Date();
new Date(value);
new Date(dateString);
new Date(year, month[, day[, hour[, minutes[, seconds[, milliseconds]]]]]);

Date对象的常用方法

getFullYear()年份

		console.log(date.getFullYear());

getMonth() 月份，从0 ~ 11开始计数

		console.log(date.getMonth());

getDate()日期

		console.log(date.getDate());

getDay()星期，返回一周中的某一天（返回值是0（周日）到6（周六）之间的一个整数）

		console.log(date.getDay());

getHours()小时

		console.log(date.getHours());

getMinutes()分钟

		console.log(date.getMinutes());

getSeconds()秒数

		console.log(date.getSeconds());

getMilliseconds() 毫秒

		console.log(date.getMilliseconds());

getTime()返回 1970 年 1 月 1 日至今的毫秒数

		console.log(date.getTime())

超时定时器

设置定时器

超时调用需要使用window对象的setTimeout()方法，该方法接受两个参数：要执行的代码和以毫秒为单位的时间（即在执行代码前需要等待多少毫秒）。

setTimeout(callback, after)
//callback	时间到了之后要执行的方法；

//after		多长时间之后去执行这个方法
``

清除定时器

clearTimeout(time_id)

调用setTimeout()之后，该方法会返回一个数值ID，用来唯一标识这个超时定时器，可以用它来取消定时器。要取消尚未执行的超时定时器，可以调用clearTimeout()方法，并将相应的超时定时器ID作为参数传递给它，如下所示：

//设置超时定时器
var timeoutId = setTimeout(function(){

alert(“Hello world”);

}, 1000);
//取消定时器
clearTimeout(timeoutId);

只要是指定的时间尚未到来之前调用clearTimeout()，就可以取消掉超时定时器。

间歇定时器

间歇定时器与超时定时器类似，只不过它会按照指定的时间间隔重复执行代码，直到间歇定时器被取消或者页面被关闭。

设置定时器

setInterval(callback， repeat）

callback：回调方法
repeat: 每隔多长时间调用一次，单位是毫秒（ms）。

设置间歇定时器的方法是setInterval()，它接受的参数与setTimeout()相同：要执行的代码和每次执行之前需要等待的毫秒数。如下例：

//设置间歇定时器
setInterval(function(){

console.log(“Hello world”);

}, 1000);

清除定时器

调用setInterval()方法同样会返回一个定时器的唯一标识（ID）。要取消间歇定时器，可以用clearInterval()方法并传入相应的ID值就行了。

clearInterval(number)