vue事件代理

发表于 | 分类于

一般使用 v-for遍历数组然后给每个子元素绑定onClick方法然后传入下标：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<template>
    <div>
        <ul>
            <li v-for="(item, index) in list" :key="index" @click="onClick(index)">
                {{item}}
            </li>
        </ul>
    </div>
</template>

<script>
export default {
    name: 'tips1', // vue事件代理
    data () {
        return {
            list: ['项目1', '项目2', '项目3']
        }
    },
    methods: {
        onClick (index) {
            console.log(index)
        }
    }
}
</script>

但如果列表很长需要渲染的元素很多，在每一个子元素上都绑定onClick方法会消耗性能。

可以使用事件代理，只在父元素上绑定onClick方法，在子元素上绑定自定义属性data-index，赋值下标，当点击子元素时，父元素的点击事件捕获子元素的点击事件，然后在点击事件的回调函数中使用e.target.getAttribute('data-index')，来获取绑定在自定义属性data-index上的下标：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<template>
    <div @click="onClick">
        <ul>
            <li v-for="(item, index) in list" :key="index" :data-index="index">
                {{item}}
            </li>
        </ul>
    </div>
</template>

<script>
export default {
    name: 'tips1', // vue事件代理
    data () {
        return {
            list: ['项目1', '项目2', '项目3']
        }
    },
    methods: {
        onClick (e) {
            const index = e.target.getAttribute('data-index')
            console.log(index)
        }
    }
}
</script>