其他分享
首页 > 其他分享> > 事件

事件

作者:互联网

事件上

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();
}

标签:function,触发,Lee,alert,事件,input
来源: https://blog.csdn.net/qq_45902611/article/details/116334190