- Objective:
- Breadcrumb:
# 概念阐释
## 语义
在jsx语法中完成类似于[[js Events Event Handler 事件处理程序]]的函数。
## 语法
**直接使用函数**
```jsx
let clickAlert = () => {
alert('you clicked this img');
}
<img onClick={clickAlert} />
```
在JSX中，所有的事件监听器名称都要符合js的写法
- onclick => onClick
- onmouseover => onMouseOver
# 实例
### 使用箭头函数传递参数
在 React 事件处理中，如果需要向事件处理器传递自定义的参数，通常会使用箭头函数。例如：
```jsx
<button onClick={() => removeItem(index)}>Remove</button>
```
# 相关内容
在 HTML 中的事件处理程序
```html
<!DOCTYPE html>
<html>
<head>
<title>Alert Example</title>
<script>
// JavaScript code to display an alert
function showAlert() {
alert("Hello! This is an alert message.");
}
</script>
</head>
<body>
<h1>Alert Example</h1>
<button onclick="showAlert()">Show Alert</button>
</body>
</html>
```
# 问题
当“点击”图片时， 图片的src和alt更改为：
- src = "https://content.codecademy.com/courses/React/react_photo-puppy.jpeg"
- alt = "doggy"
```jsx
import React from 'react';
import {creatRoot} from 'react-dom/client';
const container = document.getElementById('app');
const root = creatRoot(container);
let makeDoggy = (e) => {
...
}
const kitty = (
<img src="https://content.codecademy.com/courses/React/react_photo-kitty.jpg" alt="kitty" />
);
root.render(kitty);
```
# 问题答案
**传递自动提供的参数 e
**
```jsx
function makeDoggy(e) {
e.target.setAttribute('src', 'https://content.codecademy.com/courses/React/react_photo-puppy.jpeg');
e.target.setAttribute('alt', 'doggy');
}
const kitty = (
<img src="https://content.codecademy.com/courses/React/react_photo-kitty.jpg" alt="kitty" onClick={makeDoggy} />
);
```
# 参考资料
- [Event Listeners in JSX - codecademy](https://www.codecademy.com/journeys/full-stack-engineer/paths/fscj-22-front-end-development/tracks/fscj-22-react-part-i/modules/wdcp-22-jsx-752c2293-9f61-412a-92e2-70ad6e01a0a7/lessons/react-jsx-advanced/exercises/jsx-event-listeners)
- [Responding to Events](https://react.dev/learn/responding-to-events)