Web基础 ( 九 ) 事件

最新推荐文章于 2024-05-08 20:41:00 发布

春哥的魔法书

最新推荐文章于 2024-05-08 20:41:00 发布

阅读量1.9k

点赞数 2

分类专栏： web基础 javascript 文章标签：前端 javascript html

本文链接：https://blog.csdn.net/yuanchun05/article/details/130957023

版权

javascript 同时被 2 个专栏收录

20 篇文章 2 订阅

订阅专栏

web基础

16 篇文章 1 订阅

订阅专栏

4.5.事件

4.5.1.什么是事件

事件是指在 Web 页面中发生的操作或状态，比如用户点击、悬停、滚动、输入等。通过事件，我们可以对用户的操作作出相应的反应，比如更新页面内容、改变元素样式、提交表单数据等。

就是用来识别用户操作并触发处理函数.

4.5.1.1.实例

按钮上增加 onclick 单击事件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<button onclick="fn()">按钮</button>
	</body>
	<script>
		function fn(){
			console.log("点击我了")
		}
	</script>
</html>

4.5.2.常用的事件

4.5.2.1.鼠标

onMouseDown() 按下

onMouseMove() 移动

onMouseOut() 移出

onMouseOver() 移入

onMouseUp() 松开

绑定事件 :

鼠标事件测试<br>
onMouseDown : <input type="text" name="" onMouseDown="omd(this)" /><br>
onMouseMove : <input type="text" name="" onMouseMove="omm(this)" /><br>
onMouseOut : <input type="text" name="" onMouseOut="omout()" /><br>
onMouseOver : <input type="text" name="" onMouseOver="omover()" /><br>
onMouseUp : <input type="text" name="" onMouseUp="omu()" /><br>

处理函数 :

//onMouseDown()按下
function omd() {
    console.log("你按下鼠标要干吗？")
}
//onMouseMove()移动
function omm(inp) {
    inp.value = "不许动!" + Math.random();
}
//onMouseOut()移出
function omout() {
    console.log("你要把鼠标拿哪去？")
}
//onMouseOver()移入
function omover() {
    console.log("不要在我上面乱动？")
}
//onMouseUp()松开
function omu() {
    console.log("你松开鼠标了？")
}

4.5.2.2.键盘

onKeyDown() //键盘按下

onKeyPress() //按键盘

onKeyUp() //键盘弹起

绑定事件 :

onKeyDown/onKeyPress/onKeyUp : <input type="text" name="" onKeyDown="okd(event)" onKeyPress="okp(event)" onKeyUp="oku(event)">

处理函数 :

//onKeyDown() 	//键盘按下
function okd(event) {
    console.log("onKeyDown:" + event.keyCode)
}
//onKeyPress() //按键盘
function okp(event) {
    console.log("onKeyPress:" + event.keyCode)
}
//onKeyUp()	//键盘弹起
function oku(event) {
    console.log("onKeyUp:" + event.keyCode)
}

4.5.2.3.表单

onBlur() //失去焦点 input

onFocus() //获得焦点 input

oninput() //录入信息 input

onselect() //选择事件, 通常是滑选

绑定事件 :

onFocus/onBlur/onChange : <input type="text"  oninput="oi(this)"  onFocus="of()" onBlur="ob()" onChange="oc()" onselect="os()" value="我的心" />
<input type="text" name="" value="另一个" />

处理函数 :

//onBlur()         //失去焦点
function ob() {
    console.log("我要离开你")
}
//onChange()		//改变
function oc() {
    console.log("你变了心")
}
//onFocus()			//获得焦点
function of() {
    console.log("我和你在一起")
}
//onselect()			//选择事件
function os() {
    //console.log("你选择了我，我选择了你");
}
function oi(inp){
    console.log(inp.value)
}

onChange() //改变 select

下拉框 onchange事件

<select id="sel" onchange="fn(this)" >
    <option value="1">a</option>
    <option value="2">b</option>
    <option value="3">c</option>
    <option value="4">d</option>
</select>

处理函数 :

function fn(sel){
    console.log(sel.value)
}

onClick() //单击事件按钮、链接等

onDblClick() //双击事件

onreset() //复位 form

onsubmit() //提交事件 form

绑定事件 :

<form method="post" action="1.html" onsubmit="return(sub()) "  onreset="alert('轮回天生');" />
    <input type="submit">
    <input type="reset">
</form>

处理函数 :

// onreset()		//复位
// onsubmit()		//提交事件
function sub() {
    alert("不让你提交！");
    return false;
}

4.5.2.4.页面窗口

onload() // 页面加载

onunload() // 页面卸载

onscroll() //滚动事件 , 当页面滚动时触发，适用于页面滚动到指定位置时执行特定操作的场景。

onresize() // 窗口大小变化事件, 当用户调整浏览器窗口大小时触发，适用于响应式网页设计等场景。

绑定事件 :

<body onunload="byebye()">
</body>

处理函数 :

//onload()    		//加载
document.body.onload = function() {
    console.log("我来了");
}
//onunload()		//调开
function byebye() {
    alert("我走了,88");
}

4.5.3.event

事件处理函数（event handler）是一个被绑定到特定事件的 JavaScript 函数。当事件在浏览器中触发时，该函数就会被执行。

事件处理函数可以获得一个事件对象（event object），这个对象包含了触发该事件的元素、事件类型、事件坐标等相关信息，从而允许我们在事件处理函数中对事件进行操作。

事件对象在不同的事件类型下具有不同的属性和方法。以下是一些常见的事件对象属性:

target：指向事件源（即接收到事件的元素），可以通过 target 属性来访问该元素的属性和方法。
type：事件类型，比如 “click”、“mouseover” 等。
clientX/clientY：鼠标事件的坐标信息，表示鼠标指针相对于浏览器窗口的位置。
keyCode/key：键盘事件的键码或字符编码，可以用于判断用户按下的是哪个键。

以下是一些常见的事件对象方法：

preventDefault()：取消默认行为，可以阻止一些特定元素（比如链接、表单）默认的事件行为。
stopPropagation()：阻止事件进一步传播，可以防止事件冒泡或捕获。

在事件处理函数中，我们可以通过在参数列表中添加一个 event 参数来访问事件对象：

document.getElementById("myButton").addEventListener("click", function(event) {
  // 访问事件对象的 target 属性，即当前点击的按钮元素
  var target = event.target;
  // 取消事件的默认行为，比如取消链接的跳转或表单的提交操作
  event.preventDefault(); 
});

在上面的示例中，我们通过 addEventListener() 方法来为按钮添加 click 事件处理函数，函数中添加了一个 event 参数，可以通过该参数访问事件对象的属性和方法。在事件处理函数中，我们还可以通过调用 preventDefault() 方法来取消事件的默认行为，比如取消链接的跳转或表单的提交操作。

4.5.4.添加/移除事件

在 JavaScript 代码中，我们可以通过以下方式来添加或移除事件处理函数：

添加事件处理函数：

document.getElementById("myButton").addEventListener("click", function() {
  alert("Button clicked!");
});

移除事件处理函数：

var myButton = document.getElementById("myButton");
var handler = function() {
  alert("Button clicked!");
};
myButton.addEventListener("click", handler);
myButton.removeEventListener("click", handler);

在上面的示例中，我们通过 addEventListener() 方法来添加 click 事件的处理函数，这样当用户点击按钮时就会弹出提示框。

通过 removeEventListener() 方法可以移除事件处理函数，保证事件不会被重复触发。

4.5.5.事件流

事件流指的是在触发事件时，浏览器中各个元素的响应顺序。在 JavaScript 中，事件流包括三个主要阶段：事件捕获阶段（capturing phase）、目标阶段（target phase）和冒泡阶段（bubbling phase）。

事件捕获阶段从 window 对象开始，一直到触发事件的元素结束。换句话说，当页面上某个元素触发事件时，事件首先在最外层的元素（window 对象）进行捕获，然后逐级往下，直到目标元素停止捕获并进入目标阶段。

目标阶段是事件流的中间阶段。当事件到达目标阶段时，就会执行注册在目标元素上的事件处理函数。这通常是在用户与页面交互时触发的事件，比如用户单击某个元素。

冒泡阶段与事件捕获阶段相反，它从目标元素开始，一直向上冒泡到最外层的元素（window 对象）。在冒泡阶段，如果当前元素有注册事件处理函数，就会依次被执行。

在默认情况下，事件的流程是从目标阶段开始，然后依次在冒泡阶段进行。但是，我们可以通过addEventListener()方法的第三个参数来控制事件的流程，将其设置为 true 表示在事件捕获阶段发生，设置为 false（或者不设置）表示在冒泡阶段发生：

// 在事件捕获阶段注册事件处理函数
element.addEventListener('click', myFunction, true);

// 在冒泡阶段注册事件处理函数
element.addEventListener('click', myFunction, false);
element.addEventListener('click', myFunction); // 等效于上一行代码

春哥的魔法书

关注

2
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
Web基础 ( 九 ) 事件

事件是指在 Web 页面中发生的操作或状态，比如用户点击、悬停、滚动、输入等。通过事件，我们可以对用户的操作作出相应的反应，比如更新页面内容、改变元素样式、提交表单数据等。就是用来识别用户操作并触发处理函数.
复制链接

扫一扫