- Objective:
- Breadcrumb: DOM - Event - 实例属性
# 概念阐释
## 语义
对触发事件的元素进行修改。用于一个界面中有好几个要触发的事件，在函数中就可以以`event.target`来代表，再在添加事件中调用函数。
## 语法
```js
event.target.
```
- `event.target` 是用户交互的元素，`event`可以是`evt`, `e`
# 实例
[[js Events 事件 触发事件的类型]]中的练习题
# 相关内容
## 有参数与无参数的区别
### 有参数
有参数的情况下，函数可以用在任何HTML标签内
```js
function makeDoggy(e) {
e.target.setAttribute('src', 'https://content.codecademy.com/courses/React/react_photo-puppy.jpeg');
e.target.setAttribute('alt', 'doggy');
}
```
```html
<img src="image1.jpg" alt="image1" onclick="makeDoggy(event)"> <img src="image2.jpg" alt="image2" onclick="makeDoggy(event)"> <img src="image3.jpg" alt="image3" onclick="makeDoggy(event)">
```
### 无参数
在无参数的情况下，函数只可以指定给特定的HTML标签
```js
function makeDoggy() {
var imageElement = document.getElementById('myImage');//指定特定标签
imageElement.setAttribute('src', 'https://content.codecademy.com/courses/React/react_photo-puppy.jpeg');
imageElement.setAttribute('alt', 'doggy');
}
```
```html
<--指定myImage id-->
<img id="myImage" src="some_image.jpg" alt="some alt text" onclick="makeDoggy()">
```
## React
在React中事件监听的写法：[[JSX 事件处理程序]]
```js
//当click原本的🐱图片后，出发makeDoggy函数，图片变成🐶
const kitty = (
<img onClick={makeDoggy}
src="https://content.codecademy.com/courses/React/react_photo-kitty.jpg"
alt="kitty" />
);
```
# 问题
- [练习题](https://www.codecademy.com/courses/build-interactive-websites/lessons/dom-events/exercises/event-object-property)
🌟🌟
在事件处理程序`sharePhoto`函数中，添加改变`share button`的任务，将在点击后隐藏。
接下来，在sharePhoto函数中添加一条语句，以修改`text`元素，以表明从DOM加载到事件触发的毫秒数：`'You share puppy photo in' + event.timeStamp +'ms';`。参考：[[js Events 事件对象属性 timeStamp]]。
# 问题答案
```js
let sharePhoto = (event) => {
event.target.style.display = 'none';
text.innerHTML = 'You share puppy photo in' + event.timeStamp +'ms';
};
share.addEventListener('click',sharePhoto);
```
- `event`是函数参数
# 参考资料
- [event.target - MDN](https://developer.mozilla.org/en-US/docs/Web/API/Event/target)