JS事件_js获得焦点事件-优快云博客

本文链接：https://blog.youkuaiyun.com/ladream/article/details/107874703

本文深入探讨了DOM事件流的概念，包括事件冒泡和事件捕获的机制，以及不同级别的事件处理程序如何添加和移除事件。同时，列举了各种事件类型，如UI事件、焦点事件、鼠标事件和键盘事件，并解释了它们在网页交互中的作用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、事件冒泡、事件捕获

1.事件冒泡：
在胃泡中，最内侧元素的事件会首先被处理，然后是更外侧的:首先处理< p>元素的点击事件，然后是< div> 元素的点击事件。
2.事件捕获：
在捕获中，最外侧元素的事件会首先被处理，然后是更内侧的:首先处理< div> 元素的点击事件，然后是< p>元素的点击事件。
3.DOM事件流

事件流包含三个阶段：事件捕获阶段、处于目标阶段、事件冒泡阶段

二、事件处理程序

事件就是用户或浏览器自身执行的某种动作

1.DOM0级处理程序

btn.οnclick=onClick(); //添加事件
//btn.οnclick=null; //移除事件

2.DOM2级处理程序

添加处理指定和删除事件处理程序
addEventListener()、removeEventListener()
接受三个参数：要处理的事件名、作为处理程序的函数、布尔值（true代表在捕获阶段调用事件处理程序、false代表在冒泡阶段调用事件处理程序）

btn.addEventListener("click", onClick, false); //添加事件

//btn.removeEventListener("click", onClick, false); //移除事件

3、IE事件处理程序
attachEvent：添加事件处理函数
detachEvent：移除事件处理函数

三、事件类型

UI事件

1、load事件：当页面完全加载后(包括所有图像、javascript文件、CSS文件等外部资源)，就会触发window上的load事件
一般会用window.onload=function(){};
2.unload事件：该事件在文档被完全卸载后触发，只要用户从一个页面切换到另一个页面，就会触发unload事件。

//使用JavaScript：
EventUtil.addHandler(window,"unload",function(){
    alert("Unload");
});
//第二种方法，为body元素添加一个特性
<!DOCTYPE html>
<html>
<head>
    <titile>Unload Event Example</title>
</head>
<body onunload = "alert('Unloaded!')">
</body>
</html>

3.resize事件：当浏览器窗口被调整到一个新的高度或宽度时，就会触发resize事件。

EventUtil.addHandler(window, "resize", function () {
    alert("Resized");
});

4、scroll事件
可以使用scrollTop、scrollLeft来监控这一变化

window.addEventListener('scroll',function(){
    if(document.compatMode == "CSS1Compat") {
        alert(document.documentElement.scrollTop);
    } else {
        alert(document.body.scrollTop);
    }
},false);

焦点事件

焦点事件会在页面元素获得或失去焦点时触发，利用这些事件并与document.hasFocus()方法及document.activeElememt属性配合，可以知晓用户在页面上的行踪。

blur:在元素失去焦点时触发。这个事件不会冒泡。所有浏览器都支持他。
DOMFocusIn:在元素获得焦点时触发。这个事件与HTML事件focus等价，但它冒泡。只有Opera支持这个事件。ＤＯＭ３级事件肥企鹅了DOMfocusIn,选择了focusin.
DOMFocusOut:在元素失去焦点时触发。这个事件是ＨＴＭＬ事件blur的通用版本。只有Opera支持这个事件。DOM3 级事件废弃了 DOMFocusOut,选择了focusout.
focus:在元素获得焦点时触发，这个事件不会冒泡，所有浏览器都支持他。
focusin:在元素获得焦点时触发。这个事件与HTML事件focus等价，但它冒泡。支持这个事件的浏览器有IE5.5+，Safari5.1+、Opera11.5+和Chrome
focusout:在元素失去焦点时触发，这个事件是HTML事件blur的通用版本。支持这个事件的浏览器有

鼠标事件、键盘事件

事件浏览器支持描述
onClick:鼠标点击事件，多用在某个对象控制的范围内的鼠标点击
onDblClick: 鼠标双击事件
onMouseDown：鼠标上的按钮被按下了
onMouseUp: 鼠标按下后，松开时激发的事件
onMouseOver: 当鼠标移动到某对象范围的上方时触发的事件
onMouseMove：鼠标移动时触发的事件当鼠标离开某对象范围时触发的事件
onKeyPress：当键盘上的某个键被按下并且释放时触发的事件.
onKeyDown: 当键盘上某个按键被按下时触发的事件
onKeyUp: 当键盘上某个按键被按放开时触发的事件