e.target 和 this 区别

e.target 返回触发事件对象,this返回绑定事件对象

<ul>
	<li>123</li>
	<li>abc</li>
	<li>00</li>
</ul>

var ul = document.querySelector('ul')
ul.addEventListener('click', function(){
	//点击 li
	// 给ul绑定事件  this指向 ul
	console.log(this)
	//e.target指向我我们点击的元素 点击li e.target 指向li
	console.log(e.target) // <li>123</li>
})
你可以尝试使用一个变量来记录当前可视区域内的数据是否已经滚动到了顶部,如果已经滚动到了顶部,则在向上添加数据之前,将可视区域内的起始索引和结束索引都向前移动10个位置。同时,你还可以增加一个判断,如果可视区域内的起始索引已经是0了,就不再向上添加数据。 下面是代码示例: ``` public visibleRowsLeft: any[] = [] // 可视区域内的数据 public visibleRowsContent: any[] = [] // 可视区域内的数据 public startIndex: any = 0 // 可视区域内的起始索引 public endIndex: any = 10 // 可视区域内的结束索引 public isTop: boolean = false // 是否滚动到了顶部 public updateVisibleRows() { this.visibleRowsLeft = this.virtualLeft.slice(this.startIndex, this.endIndex) this.visibleRowsContent = this.virtualContent.slice(this.startIndex, this.endIndex) console.log(this.visibleRowsLeft); console.log(this.visibleRowsContent); } public handleScroll(e: any) { const scrollTop = e.target.scrollTop const height = e.target.clientHeight const scrollHeight = e.target.scrollHeight if (scrollTop === 0) { if (!this.isTop) { // 到达顶部,向上添加数据 this.startIndex = Math.max(0, this.startIndex - 10) this.endIndex = Math.max(10, this.endIndex - 10) this.updateVisibleRows() this.isTop = true } } else { this.isTop = false } if (scrollTop + height === scrollHeight) { // 到达底部,向下添加数据 this.startIndex = Math.min(this.virtualContent.length - 10, this.startIndex + 10) this.endIndex = Math.min(this.virtualContent.length, this.endIndex + 10) this.updateVisibleRows() } } ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值