【小程序】事件传参data和mark

介绍： 1、事件类型的区分：介绍了冒泡事件和非冒泡事件的区别，以及常见的事件类型。 2、数据传递方式：对比了 data 和 mark的使用方式，以及在事件处理函数中如何获取数据。 3、阻止事件传递：介绍了使用 catch 绑定事件来阻止事件冒泡的方法。

在搞懂两者区别之前，我们要先了解一些基础的知识点

1、事件分为 冒泡事件 和 非冒泡事件:

（1）冒泡事件:当一个组件的事件被触发后，该事件会向父节点传递
（2）非冒泡事件:当一个组件的事件被触发后，该事件不会向父节点传递
（3）常见的冒泡事件包括tap（轻触事件）、longpress（长按事件）、touchstart（触摸开始事件）等；
（4）而常见的非冒泡事件包括 input（输入事件）、scroll（滚动事件）等。 在本案例中：使用 bind 绑定的事件，会触发事件冒泡，如果想阻止事件冒泡，可以使用 catch 来绑定事件

2、事件传参 data自定义数据

currentTarget 事件绑定者，指的是:哪个组件绑定了当前事件处理函数 target 事件触发者，指的是:哪个组件触发了当前事件处理函数

3、自定义属性mark 标记传递参数。于承载一些自定义数据，可以在组件上添加，识别触发事件的 target节点。同时 mark

在组件上使用 mark:自定义属性 的方式将数据传递给事件处理函数，例如:<view mark:name=“可达鸭" bind：tap="handler” />然后通过事件对象进行获取自定义数据

4、获取事件目标对象的currentTarget和target

（1） 事件绑定者currentTarget 也就是指:哪个组件绑定了当前事件处理函数
（2） 事件触发者 target 也就是指:哪个组件触发了当前事件处理函数

第一部分 data

<view class="data" bind:tap="parentHandler" data-parentid="1" data-parentname="tom">
<button bind:tap="btnHandler" data-id="1" data-name="tom">按钮</button>
</view>

.data{
    width: 750rpx;
    height: 100px;
    background-color: pink;
}

Page({
    btnHandler(event){
        console.log('按钮',event);
        // currentTarget 和 target 都是指按钮，因为是按钮绑定的事件处理函数，同时点击按钮触发事件处理函数
        console.log('按钮currentTarget',event.currentTarget.dataset.id); 
        console.log('按钮target',event.target.dataset.name);
    },
        // 只点击按钮                                     //运行结果见（1）
        // currentTarget事件绑定者：view
        // target 事件触发者：button
        // 如果获取view身上的数据，就必须使用currentTarget才可以
        // 如果想获得的是事件触发本身的数据，就需要使用target
    parentHandler(event){
        // 只点击粉色区域                                 //运行结果见（2）
        // cuurrentTarget事件绑定者：view   
        // target事件触发者：view
        // currentTarget 和 target 都是指view，如果获取view身上数据，两个都可以触发
        console.log(' 粉色区域',event);
        console.log(' 粉色区域currentTarget',event.currentTarget.dataset.parentid); 
        console.log('粉色区域target',event.target.dataset.parentname);
    }
})

图（1）

解析：由图可知只点击按钮（子组件）的时候获取不到父组件的target 这里建议与第二部分mark区别

图（2）

解析：由图可知只点击粉色区域（父组件）的时候获取不到子元素

第二部分 mark

<view bindtap="parentHandler" mark:parentid= "1" mark:parentname="tom">
<button bindtap="btnHandler" mark:id= "1" mark:name="tom">按钮</button>
</view>

view{
    width: 750rpx;
    height: 300rpx;
    background-color: skyblue;
}

Page({
    btnHandler(event){
        console.log('按钮',event);
        console.log('按钮id',event.mark.id);
        console.log('按钮name',event.mark.name);
    },
    parentHandler(event){
        // 只点击蓝色按钮                            //运行结果见下图（1）
        // 通过事件对象获取的是view身上绑定的数据
        // 只点击按钮                                //运行结果见下图（2）           
        // 通过事件对象获取的是 触发事件的节点 
        console.log('蓝色区域',event);
        console.log('蓝色区域id',event.mark.parentid);
        console.log('蓝色区域name',event.mark.parentname);
    }
})

图（1）

解析：点击按钮（子组件）可以获取父组件的定义的所有元素 这里可以与第一部分data区别

图（2）

解析：由图可知只点击蓝色区域（父组件）的时候获取不到子组件

第三部分 阻止父子之间传参 使用catch

<view class="catch" bind:tap="parentHandler">
<button catch:tap="btnHandler">按钮</button>
</view>

.catch{
    display: flex ;
    height: 300rpx;
    background-color: skyblue;
    align-items: center;
}

Page({
    parentHandler(){
        console.log("父组件绑定的事件");   
    },
    btnHandler(){
        console.log("子组件触发事件");
    }
})

点击父组件事件运行结果：

点击子组件运行结果：