1.事件绑定和事件对象
1.小程序中绑定事件与在网页开发中绑定事件几乎一致,只不过在小程序不能通过 on 的方式绑定事件,也没有 click 等事件,小程序中绑定事件使用 bind 方法,click 事件也需要使用 tap 事件来进行代替,绑定事件的方式有两种:
1.第一种方式:bind:事件名,bind 后面需要跟上冒号,冒号后面跟上事件名
例如:<view bind:tap=“fnName"></iew>
2.第二种方式:bind事件名,bind 后面直接跟上事件名
例如:<view bindtap=“fnName”></view>
3.事件处理函数需要写到 js 文件中,在 s 文件中需要调用小程序提供的 Page 方法来注册小程序的页面,我们可以直接在 Page 方法中创建事件处理函数。
2.事件分类以及阻止事件冒泡
1.事件分为 冒泡事件 和 非冒泡事件:
1.冒泡事件:当一个组件的事件被触发后,该事件会向父节点传递
2.非冒泡事件:当一个组件的事件被触发后,该事件不会向父节点传递
2.使用 bind 绑定的事件,会触发事件冒泡,如果想阻止事件冒泡,可以使用 catch 来绑定事件。
3.事件传参-data-*自定义数据
1.事件传参:在触发事件时,将一些数据作为参数传递给事件处理函数的过程,就是事件传参
2.在微信小程序中,我们经常会在组件上添加一些自定义数据,然后在事件处理函数中获取这些自定义数据,从而完成业务逻辑的开发
3.在组件上 通过 data-“的方式 定义需要传递的数据,其中*是自定义的属性
例如:<view data-id=“100"bindtap="handler”/>然后通过事件对象进行获取自定义数据
4.注意事项:
1.event.target是指事件触发者,event.currentTarget是指事件绑定者
2.使用 data-方法传递参数的时候,多个单词由连字符-连接,连字符写法会转换成驼峰写法
3.使用 data-方法传递参数的时候,而大写字符会自动转成小写字符
4.事件传参-mark 自定义数据
1.小程序进行事件传参的时候,除了使用 data-*属性传递参数外,还可以 使用 mark 标记传递参数
2.mark 是一种自定义属性,可以在组件上添加,用于来识别具体触发事件的 target节点。同时 mark 还可以用于承载一些自定义数据
3.在组件上使用 mark:自定义属性 的方式将数据传递给事件处理函数,例如:<view mark:id=“100" bindtap="handler”/>然后通过事件对象进行获取自定义数据
4.mark 和 data-*很相似,主要区别在于:
1.mark 包含从触发事件的节点到根节点上所有的 mark: 属性值
2.currentTarget.dataset 或者 target.dataset 只包含事件绑定者 或者 事件触发者那一个节点的 data-*值