2022-08-11 #动态添加到购物车用事件委托的写法及this指向的问题

动态添加到购物车用事件委托的写法及this指向的问题

效果图

image.png

html结构

image.png

image.png

css样式

image.png

点击新增按钮 输入商品名称及价格，新增商品到table的末尾

image.png

点击新增按钮，新增商品到table的末尾

image.png

由于有新增数据所以用事件委托的办法可以有效的节省代码量

因为购物车需要计算小计和总价，所以我们可以封装一个函数

image.png

封装加减

image.png

点击加减，计算小计

直接添加单击事件，新增的商品栏不可进行操作，只有初始的html里存在的可操作

image.png

此时只需要用事件委托的方法就可以让新增商品的加减按钮进行操作

父节点.on('事件名','子节点选择器','处理函数')

给加号添加事件 -->

image.png

给加减同时添加事件，链式写法

image.png

以上加减是正确的方法 这里是错误写法

image.png

到封装的函数里打印一下this

image.png

this指向window，所以这种方法不可取，

image.png

复选框，全选，反选按钮，事件委托的写法

image.png

输入商品名称和价格利用回车键添加商品

image.png