JavaScript DOM对象 事件

一、事件流

        事件流描述的是从页面中接受事件的顺序

        1、事件流类型

                事件冒泡流   默认

                事件捕获流

        2、DOM0级事件

                1.给一个元素对象绑定同一个事件多次，出现覆盖问题

                2.无法修改事件流的类型

        3、DOM2级事件

                添加监听事件

                dom对象.addEventListener(参数1，参数2，参数3)

                参数1：事件名 字符串  不带on

                参数2：函数  事件触发后调用的函数

                参数3：布尔值 事件流类型  默认false 事件冒泡流  如果为true，则为事件捕获流

                删除监听事件

                dom对象.removeEventListener(参数1，参数2，参数3)

                参数1：事件名 字符串  不带on

                参数2：函数  事件触发后调用的函数

                参数3：布尔值 事件流类型  默认false 事件冒泡流  如果为true，则为事件捕获流

        4、事件冒泡：子级寻找父级的过程

                当子级触发事件时，这个事件会形成一个时间流，这个事件流会逐步的向上传播，

         所经过的父级的和子级相同的事件会被执行

        5、事件捕获：父级查找子级的过程叫事件捕获

                当子级触发一个事件时会触发事件流，这个事件流会从父级传递到子级，所经过的

         所有子级的相同事件会被触发

二、事件

        鼠标事件

        1、click：当用户单击鼠标按钮

input.onclick = function () {
		alert('鼠标单击事件');
	};

        2、dblclick：当用户双击主鼠标按钮时触发

input.ondblclick = function () {
		alert('鼠标双击事件');
	};

        3、mousedown：当用户按下了鼠标还未弹起时触发

input.onmousedown = function () {
		alert('鼠标按下未弹起时');
	};

        4、mouseup：当用户释放鼠标按钮时触发

input.onmouseup = function () {
		alert('鼠标按下弹起时');
	};

        5、mouseover：当鼠标移到某个元素上方时触发

input.onmouseover = function () {
		alert('鼠标移入时');
	};

        6、mouseout：当鼠标移出某个元素上方时触发

input.onmouseout = function () {
		alert('鼠标移出时');
	};

        7、mousemove：当鼠标指针在元素上移动时触发

input.onmousemove = function () {
		alert('鼠标在元素上移动时');
	};

        键盘事件

        1、keydown：当用户按下键盘上任意键触发，如果按住不放，会重复触发

document.onkeydown = function (e) {
		alert('按键盘任意键时');
	};

        2、keypress：当用户按下键盘上的字符键触发，如果按住不放，会重复触发

document.onkeypress = function () {
		alert('按键盘字符键时');
	};

        3、keyup：当用户释放键盘上的键触发

document.onkeyup = function () {
		alert('键盘上的键弹起时');
	};

        HTML事件

        1、select：当用户选择文本框(input或textarea)中的一个或多个字符触发

input.onselect = function () {
		alert('选择文本框中的一个或多个字符时');
	};

        2、blur：当页面或元素失去焦点时在window及相关元素上触发

input.onblur = function () {
		alert('元素失去焦点时');
	};

        3、focus：当页面或者元素获得焦点时在window及相关元素上面触发

input.onfocus = function () {
		alert('元素获得焦点时');
	};

        4、submit：当用户点击提交按钮在<form>元素上触发

form.onsubmit = function () {
		alert('点击提交按钮时在<form>元素上');
	};

        5、resize：当窗口或框架的大小变化时在window或框架上触发

window.onresize = function () {
		alert('浏览器窗口大小改变时');
	};

        6、scroll：当用户滚动带滚动条的元素时触发

window.onscroll = function () {
		alert('窗口滚动滚动条时');
	};

        键盘上的键码请自行查找并对照ASCII码对照表