名师工作室网站建设 意义,o2o新零售系统,湖南省建设厅纪检组长,品牌设计需要多少钱事件处理
一个应用仅仅只有界面展示是不够的#xff0c;还需要和用户做交互#xff0c;例如#xff1a;响应用户的点击、获取用户输入的值等等#xff0c;在小程序里边#xff0c;我们就通过编写 JS 脚本文件来处理用户的操作
1. 事件绑定和事件对象
小程序中绑定事件与…事件处理
一个应用仅仅只有界面展示是不够的还需要和用户做交互例如响应用户的点击、获取用户输入的值等等在小程序里边我们就通过编写 JS 脚本文件来处理用户的操作
1. 事件绑定和事件对象
小程序中绑定事件与在网页开发中绑定事件几乎一致只不过在小程序不能通过 on 的方式绑定事件也没有 click 等事件小程序中绑定事件使用 bind 方法click 事件也需要使用 tap 事件来进行代替绑定事件的方式有两种
第一种方式bind:事件名bind 后面需要跟上冒号冒号后面跟上事件名
button bind:taphandler按钮/button第二种方式bind事件名bind 后面直接跟上事件名
button bindtaphandler按钮/button事件处理函数需要写到 .js 文件中在 .js 文件中需要调用小程序提供的 Page 方法来注册小程序的页面我们可以直接在 Page 方法中创建事件处理函数。例如
// pages/home/home.js
Page({// 页面的初始数据data: {},// 事件处理程序handler () {console.log(我被执行啦~~~)}// 其他 coding...
})当组件触发事件时绑定的事件的处理函数会收到一个事件对象用来记录事件发生时的相关信息。在触发事件时事件处理程序会主动的给我们传入一个参数 —— event事件对象
// pages/home/home.js
Page({// 页面的初始数据data: {},// 事件处理程序handler (event) {// console.log(我被触发了~~~)console.log(event)}// 其他 coding...
})2. 绑定并阻止事件冒泡
事件分为冒泡事件和非冒泡事件
冒泡事件当一个组件上的事件被触发后该事件会向父节点传递。非冒泡事件当一个组件上的事件被触发后该事件不会向父节点传递。
使用 bind 绑定的事件会触发事件冒泡如果想阻止事件冒泡可以使用 catch 来绑定事件。
view bindtapparentHandler!-- 使用 bind 绑定的事件会产生事件冒泡 --!-- button bindtaphandler按钮/button --!-- 使用 catcht 绑定的事件会阻止事件冒泡 --button catchtaphandler按钮/button
/view
Page({// 页面的初始数据data: {},// 事件处理程序handler (event) {console.log(我是子绑定的事件 ~~~)},parentHandler () {console.log(我是父绑定的事件 ~~~)}// 其他 coding...
})WXML 中冒泡事件列表如下表
类型触发条件touchstart手指触摸动作开始touchmove手指触摸后移动touchcancel手指触摸动作被打断如来电提醒弹窗touchend手指触摸动作结束tap手指触摸后马上离开longpress手指触摸后超过350ms再离开如果指定了事件回调函数并触发了这个事件tap事件将不被触发longtap手指触摸后超过350ms再离开推荐使用 longpress 事件代替transitionend会在 WXSS transition 或 wx.createAnimation 动画结束后触发animationstart会在一个 WXSS animation 动画开始时触发animationiteration会在一个 WXSS animation 一次迭代结束时触发animationend会在一个 WXSS animation 动画完成时触发touchforcechange在支持 3D Touch 的 iPhone 设备重按时会触发 注意事项 除上表之外的其他组件自定义事件如无特殊声明都是非冒泡事件 例如 form 的submit事件input 的input事件 3. 事件传参-data-*自定义数据
在小程序中可以通过事件传参的方式将数据传递给事件处理函数。常见的事件包括点击事件、输入事件等。
在组件节点中可以通过 data- 的方式传递一些自定义数据传递的数据可以通过事件对象的方式进行获取 注意事项 使用 data- 方法传递参数的时候多个单词由连字符 - 连接 连字符写法会转换成驼峰写法而大写字符会自动转成小写字符 例如 data-element-type 最终会呈现为 event.currentTarget.dataset.elementType data-elementType 最终会呈现为 event.currentTarget.dataset.elementtype 在 wxml 文件中使用 data-* 属性将数据传递给事件处理函数。例如
view bindtapparentHandler data-parent-id1 data-parentNametom!-- 如果需要进行事件传参需要再组件上通过 data- 的方式传递数据 --!-- button bindtapbtnHandler data-id1 data-nametom按钮/button --button data-id1 data-nametom按钮/button
/view在 js 文件中可以通过 event.currentTarget.dataset 获取传递的数据
// cate.js
Page({// 按钮触发的事件处理函数btnHandler (event) {// currentTarget 事件绑定者也就是指哪个组件绑定了当前事件处理函数// target 事件触发者也就是指哪个组件触发了当前事件处理函数// currentTarget 和 target 都是指按钮因为是按钮绑定的事件处理函数同时点击按钮触发事件处理函数// 这时候通过谁来获取数据都可以console.log(event.currentTarget.dataset.id)console.log(event.target.dataset.name)},// view 绑定的事件处理函数parentHandler (event) {// 点击蓝色区域(不点击按钮)// currentTarget 事件绑定者view// target 事件触发者view// currentTarget 和 target 都是指 view如果想获取 view 身上的数据使用谁都可以// 点击按钮(不点击蓝色区域)// currentTarget 事件绑定者view// target 事件触发者按钮// 如果想获取 view 身上的数据就必须使用 currentTarget 才可以// 如果想获取的是事件触发者本身的数据就需要使用 targetconsole.log(event)// 在传递参数的时候如果自定义属性是多个单词单词与单词直接使用中划线 - 进行连接// 在事件对象中会被转换为小托峰写法console.log(event.currentTarget.dataset.parentId)// 在传递参数的时候如果自定义属性是多个单词单词如果使用的是小托峰写法// 在事件对象中会被转为全部小写的console.log(event.currentTarget.dataset.parentname)}})
4. 事件传参-mark 自定义数据
小程序进行事件传参的时候除了使用 data-* 属性传递参数外还可以使用 mark 标记传递参数
mark是一种自定义属性可以在组件上添加用于来识别具体触发事件的 target 节点。同时 mark 还可以用于承载一些自定义数据类似于 dataset
mark 和 dataset 很相似主要区别在于
mark 会包含从触发事件的节点到根节点上所有的 mark: 属性值 (事件委托的)
dataset 仅包含触发事件那一个节点的 data- 属性值。
在 wxml 文件中使用 mark:自定义属性 的方式将数据传递给事件处理函数
!-- pages/index/index.wxml --view bindtapparentHandler mark:parentid1 mark:parentnametom!-- 如果需要使用 mark 进行事件传参需要使用 mark:自定义属性的方式进行参数传递 --!-- button bindtapbtnHandler mark:id1 mark:nametom按钮/button --button mark:id1 mark:nametom按钮/button
/view// cart.js
Page({// 按钮绑定的事件处理函数btnHandler (event) {console.log(event.mark.id)console.log(event.mark.name)},// view 绑定的事件处理函数parentHandler (event) {// 先点击蓝色区域 (不点击按钮)// 通过事件对象获取的是 view 身上绑定的数据// 先点击按钮 (不点击蓝色区域)// 通过事件对象获取到的是 触发事件的节点 已经 父节点身上所有的 mark 数据console.log(event)}})
