JS普通函数获取event的方法：在JavaScript中，可以通过将事件对象作为参数传递给函数来获取event对象、使用addEventListener方法、利用事件处理器属性。通过参数传递、使用addEventListener、利用事件处理器属性。其中，通过参数传递是最常用且简单的方法。将事件对象作为参数传递给函数，可以直接在函数内部访问和操作事件对象的属性和方法，从而实现对事件的处理。
一、通过参数传递
在JavaScript中，通过将事件对象作为参数传递给事件处理函数，可以轻松获取并处理事件。下面是详细说明：
1、定义事件处理函数
首先，定义一个普通函数，并将事件对象作为参数传入。通常，这个参数会命名为event或e。例如：
function handleEvent(event) {
console.log(event); // 输出事件对象
}
2、为元素绑定事件处理函数
可以通过HTML事件属性或JavaScript代码来绑定事件处理函数。
使用HTML事件属性
在HTML中，可以直接在元素上使用事件属性，并将事件对象作为参数传递给事件处理函数。例如：
<button onclick="handleEvent(event)">Click me</button>
使用JavaScript代码
在JavaScript中，可以使用事件处理器属性或addEventListener方法来绑定事件处理函数。例如：
const button = document.querySelector('button');
button.onclick = function(event) {
handleEvent(event);
};
或者：
button.addEventListener('click', handleEvent);
3、处理事件对象
在事件处理函数内部，可以通过event对象访问和操作事件的属性和方法。例如：
function handleEvent(event) {
console.log('Event type:', event.type);
console.log('Event target:', event.target);
}
二、使用addEventListener方法
使用addEventListener方法绑定事件处理函数是一种更为灵活和推荐的方式。相比直接在HTML中使用事件属性，addEventListener方法可以绑定多个事件处理函数，并且支持事件冒泡和捕获等高级特性。
1、定义事件处理函数
同样，首先定义一个普通函数，并将事件对象作为参数传入。例如：
function handleEvent(event) {
console.log(event); // 输出事件对象
}
2、使用addEventListener方法绑定事件处理函数
使用addEventListener方法为元素绑定事件处理函数。例如：
const button = document.querySelector('button');
button.addEventListener('click', handleEvent);
3、处理事件对象
在事件处理函数内部，可以通过event对象访问和操作事件的属性和方法。例如：
function handleEvent(event) {
console.log('Event type:', event.type);
console.log('Event target:', event.target);
}
三、利用事件处理器属性
除了通过参数传递和addEventListener方法，还可以利用事件处理器属性来获取事件对象。例如，直接在元素上定义事件处理器属性。
1、定义事件处理函数
首先，定义一个普通函数，并将事件对象作为参数传入。例如：
function handleEvent(event) {
console.log(event); // 输出事件对象
}
2、利用事件处理器属性绑定事件处理函数
可以直接在元素上定义事件处理器属性，并将事件对象作为参数传递给事件处理函数。例如：
<button id="myButton">Click me</button>
<script>
const button = document.getElementById('myButton');
button.onclick = function(event) {
handleEvent(event);
};
</script>
3、处理事件对象
在事件处理函数内部，可以通过event对象访问和操作事件的属性和方法。例如：
function handleEvent(event) {
console.log('Event type:', event.type);
console.log('Event target:', event.target);
}
四、事件对象的常用属性和方法
事件对象包含了许多有用的属性和方法，可以帮助开发者更好地处理事件。下面介绍一些常用的属性和方法。
1、常用属性
type: 事件的类型，例如click、mouseover等。target: 事件的目标元素，即触发事件的元素。currentTarget: 当前处理事件的元素，通常与target相同。timeStamp: 事件的时间戳，即事件触发的时间。bubbles: 一个布尔值，表示事件是否会冒泡。
2、常用方法
preventDefault(): 阻止事件的默认行为，例如阻止表单提交。stopPropagation(): 阻止事件冒泡，避免事件传播到父元素。stopImmediatePropagation(): 阻止事件冒泡，并且阻止当前元素上的其他事件处理函数执行。
例如：
function handleEvent(event) {
console.log('Event type:', event.type);
console.log('Event target:', event.target);
// 阻止事件的默认行为
event.preventDefault();
// 阻止事件冒泡
event.stopPropagation();
}
五、事件委托
事件委托是一种高效的事件处理方式，适用于大量相似元素的事件绑定。通过将事件绑定到父元素，并利用事件冒泡机制，可以减少事件处理函数的数量，提高性能。
1、定义事件处理函数
首先，定义一个普通函数，并将事件对象作为参数传入。例如：
function handleEvent(event) {
console.log(event); // 输出事件对象
}
2、使用事件委托绑定事件处理函数
将事件处理函数绑定到父元素，并通过事件对象的target属性判断具体的目标元素。例如：
const parentElement = document.getElementById('parent');
parentElement.addEventListener('click', function(event) {
if (event.target.matches('.child')) {
handleEvent(event);
}
});
3、处理事件对象
在事件处理函数内部，可以通过event对象访问和操作事件的属性和方法。例如：
function handleEvent(event) {
console.log('Event type:', event.type);
console.log('Event target:', event.target);
}
六、使用事件对象的实例
为了更好地理解和掌握事件对象的使用，下面通过一个具体的实例来演示如何在普通函数中获取和处理事件对象。
1、HTML结构
首先，创建一个简单的HTML结构，包括一个输入框和一个按钮。例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Event Example</title>
</head>
<body>
<input type="text" id="inputField" placeholder="Type something">
<button id="submitButton">Submit</button>
<script src="script.js"></script>
</body>
</html>
2、JavaScript代码
在JavaScript中，定义事件处理函数，并将事件对象作为参数传入。然后，为输入框和按钮绑定事件处理函数。例如：
document.addEventListener('DOMContentLoaded', function() {
const inputField = document.getElementById('inputField');
const submitButton = document.getElementById('submitButton');
inputField.addEventListener('input', handleInputEvent);
submitButton.addEventListener('click', handleClickEvent);
});
function handleInputEvent(event) {
console.log('Input event:', event);
console.log('Input value:', event.target.value);
}
function handleClickEvent(event) {
console.log('Click event:', event);
console.log('Button text:', event.target.textContent);
}
3、解释与总结
在上述实例中，通过addEventListener方法为输入框绑定input事件处理函数，为按钮绑定click事件处理函数。在事件处理函数内部，通过event对象访问和操作事件的属性和方法，从而实现对事件的处理。
总结来说，通过将事件对象作为参数传递给普通函数，可以轻松获取和处理事件对象。在实际开发中，可以根据具体需求选择合适的方式绑定事件处理函数，例如直接在HTML中使用事件属性、利用事件处理器属性或使用addEventListener方法。掌握事件对象的常用属性和方法，可以帮助开发者更好地处理事件，提高代码的可读性和维护性。
相关问答FAQs：
1. 为什么在普通的JavaScript函数中无法直接获取event对象？
普通的JavaScript函数无法直接获取event对象，是因为event对象是由事件处理程序传递给事件处理函数的。而普通函数没有事件处理程序，因此无法获取event对象。
2. 如何在普通的JavaScript函数中获取event对象？
要在普通的JavaScript函数中获取event对象，可以通过在事件处理程序中将event对象作为参数传递给普通函数。例如，可以在事件处理程序中调用普通函数时，使用myFunction(event)来将event对象传递给该函数。
3. 有没有其他方法可以在普通的JavaScript函数中获取event对象？
是的，还有一种方法可以在普通的JavaScript函数中获取event对象。可以使用全局变量来存储event对象，在事件处理程序中将event对象赋值给该全局变量，然后在普通函数中访问该全局变量来获取event对象。但是这种方法不太推荐使用，因为全局变量的使用可能会带来命名冲突和代码混乱的问题。
文章包含AI辅助创作，作者：Edit2，如若转载，请注明出处：https://docs.pingcode.com/baike/3600022
