JS “事件”

1、事件模型

• JavaScript有三种事件模型：内联模型、脚本模型和DOM2模型

2、处理的事件类型

• JavaScript可以处理的事件类型为：鼠标事件、键盘事件、HTML事件

3、事件组成

• 所有的事件处理函数都会都有两个部分组成，on + 事件名称，例如click事件的事件处理函数就是：onclick。

4、键盘事件

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

 document.onkeydown = function (e) {         alert('Lee');     };

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

   document.onkeypress = function () {         alert('Lee');     };

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

 document.onkeyup = function () {         alert('Lee');     };

document.onkeydown = function (ev) {}; //键盘按下去就会触发 长按 会连续触发
document.onkeypress = function (ev) {}; //触发字母与数组  不触发功能键 ctrl alt shift esc...
document.onkeyup = function (ev) {}; //键盘按键松开时会触发

5、HTML事件

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

input.onselect = function () {         alert('Lee');     };

2. change：当文本框(input或textarea)内容改变且失去焦点后触发。   

 input.onchange = function () {         alert('Lee');     };

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

input.onfocus = function () {         alert('Lee');     }; 

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

input.onblur = function () {         alert('Lee');     };

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

form.onsubmit = function () {         alert('Lee');     };

6. reset：当用户点击重置按钮在<form>元素上触发。

form.οnreset= function () {         alert('Lee');     };

7. resize：当窗口或框架的大小变化时在window或框架上触发。   

 window.onresize = function () {         alert('Lee');     };

8. scroll：当用户滚动带滚动条的元素时触发。     

window.onscroll = function () {         alert('Lee');     }; 

6、鼠标事件

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

input.onclick = function () {         alert('Lee');     };

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

 input.ondblclick = function () {         alert('Lee');     };

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

input.onmousedown = function () {         alert('Lee');     }; 

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

input.onmouseup = function () {         alert('Lee');     };

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

input.onmouseover = function () {         alert('Lee');     };

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

 input.onmouseout = function () {         alert('Lee');     }; 

7、事件绑定及深入

（1）传统事件绑定的问题

8、事件流

事件流--------页面中元素接受事件的顺序 

(1) 事件冒泡 --------事件由最开始的元素接收，然后逐级向上传播到最不具体的那个节点（文档）

DOM0级事件

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

     2、无法修改时间流的类型

（2）事件捕获 --------事件由最最不具体的那个节点（文档）元素接收，然后逐级向下广播到最具体的那个元素

DOM2级事件