事件

2023-10-21 12:33:58

事件上

1.事件处理函数

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

PS：所有的事件处理函数都会都有两个部分组成，on+ 事件名称，例如 click 事件的事件处理函数就是：onclick。在这里，我们主要谈论脚本模型的方式来构建事件，违反分离原则的内联模式，我们忽略掉。

2.鼠标事件，页面所有元素都可触发

click：当用户单击鼠标按钮或按下回车键时触发

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

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

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

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

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

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

【注】经过子节点会重复触发

mouserover

mouseout

【注】经过子节点不会重复触发

mouseenter

mouseleave

3.键盘事件

keydown：当用户按下键盘上任意键触发，如果按住不放，会重复触发。
onkeydown=function(){
        alert('Lee');
};
keypress：当用户按下键盘上的字符键触发，如果按住不放，会重复触发
onkeypress= function(){
        alert('Lee');
};
keyup：当用户释放键盘上的键触发。
onkeyup=function() {
        alert('Lee');
};

4.HTML事件

load：当页面完全加载后在 window 上面触发，或当框架集加载完毕后在框架集上触发。
window.onload=function() { alert('Lee'); };

unload：当页面完全卸载后在 window 上面触发，或当框架集卸载后在框架集上触发。
window.onunload= function(){ alert('Lee'); };

select：当用户选择文本框(input 或 textarea)中的一个或多个字符触发。
input.onselect=function(){ alert('Lee'); };

change：当文本框(input 或 textarea)内容改变且失去焦点后触发。
input.onchange=function(){ alert('Lee'); };

focus：当页面或者元素获得焦点时在 window 及相关元素上面触发。
input.onfocus= function(){ alert('Lee'); };

blur：当页面或元素失去焦点时在 window 及相关元素上触发。 
input.onblur=function(){ alert('Lee'); };

submit：当用户点击提交按钮在<form>元素上触发。
form.onsubmit=function(){ alert('Lee'); };

reset：当用户点击重置按钮在<form>元素上触发。
form.onreset=function(){ alert('Lee'); };

resize：当窗口或框架的大小变化时在 window 或框架上触发。 
window.onresize=function(){ alert('Lee'); };

scroll：当用户滚动带滚动条的元素时触发。
window.onscroll=function() { alert('Lee'); };

4.this关键字

【注】this关键字中存储的是当前所在函数的主人。所以要知道this中存储的是什么，先找当前所在函数的主人。

var input=document.getElementsByTagName('input')[0]; 
input.onclick=function(){
      alert(this.value);  //HTMLInputElement，this 表示 input 对象
};
PS：从上面的拆分，我们并没有发现本章的重点：事件对象。那么事件对象是什么？它在哪 里呢？当触发某个事件时，会产生一个事件对象，这个对象包含着所有与事件有关的信息。包括导致事件的元素、事件的类型、以及其它与特定事件相关的信息。
       事件对象，我们一般称作为 event 对象，这个对象是浏览器通过函数把这个对象作为参数传递过来的。
【注】这里只是this中存放的恰好是事件对象，因为在这里函数的主人是input，所以按照this中存储的是当前所在函数的主人的原理，在这里this == input。

5. 事件对象

事件处理三部分组成：对象.事件处理函数=函数。

事件对象的兼容性写法

input.onclick=function(evt){
    var e = evt || window.event;
     alert(e); 
};

6.事件对象的属性

button属性

值	说明
0	左键
1	滚轮
2	右键

可视区及屏幕坐标

事件对象提供了两组来获取浏览器坐标的属性，一组是页面可视区左边，另一组是屏幕坐标。

clientX clientY 原点位置：可视窗口的左上角为原点

pageX pageY 原点位置：整个页面的左上角（包含滚出去的滚动距离）

screenX screenY 原点位置：电脑屏幕的左上角

键盘事件对象的属性

shiftKey 判断是否按下了Shift键

CtrlKey 判断是否按下了ctrl键

AltKey 判断是否按下了alt键

metaKey 判断是否按下了windows键，IE不支持

keyCode 键码

which

返回值：键码返回的是大写字母的ASCII码值。不区分大小写。

格式：var which = e.which || e.keyCode; //兼容性写法

【注】只在keydown下支持

charCode 字符码

which

返回值：字母码区分大小写，返回当前按下键对应字符的ASCII码值

格式：var which = e.which || e.charCode //兼容性写法

【注】只在keypress下支持，只支持字符键

事件的目标/触发事件的元素节点（target）

强调事件是由谁引起的

document.onclick=function(evt) {
     alert(evt.target || window.event.srcElement);
};

事件冒泡

事件流

事件流是描述的从页面接受事件的顺序，当几个都具有事件的元素层叠在一起的时候，那么你点击其中一个元素，并不是只有当前被点击的元素会触发事件，而层叠在你点击范围的所有元素都会触发事件。事件流包括两种模式：冒泡和捕获。

事件冒泡

是从里往外逐个触发。

事件捕获

是从外往里逐个触发。那么现代的浏览器默认情况下都是冒泡模式。

阻止事件冒泡

**cancelBubble=true **

stopPropagation()

//封装跨浏览器兼容的阻止事件冒泡

function stopBubble(e){
	e.stopPropagation?e.stopPropagation:e.stopPropagation();
}

码农公寓

事件上