页面交互JS

1、JS负责逻辑交互

2、计数器demo

onTapHandler:function(){

//this.data.count++;

this.setData({

count: this.data.count+1

});

},

事件机制

1、事件是对用户的交互操作行为的相应

2、bind VS catch

console.log( ) ;

catch 和 bind 的区别，bind允许事件冒泡，catch不允许时间冒泡。

setData()

bindtap\

事件冒泡：事件传递

阻止：使用catch绑定不使用bind绑定，即是catch：tap/catchtap 不允许事件冒泡

 事件对象，点击时传入的事件对象

data-  自定义属性

data-id

可以通过控制台打印事件，具体查看属性，然后cnsole.log(event.target.dataset.id)打印输出

绑定事件可以通过bind或catch，二者的区别在于，catch会自动阻止事件冒泡，bind不会。

存在事件对象。

可以通过data-*来自定义元素属性，通过事件对象的target.dataset获取自定义的属性值。

bindtap: 支持事件传播（事件冒泡）

catchtap:不支持事件传播

Js

1. Js 负责逻辑交互

2. 计数器demo

   

3. bindtap 点击事件，可以在标签中添加来绑定指定事件

4. bind方法  允许事件冒泡
   catch方法  阻止事件冒泡

5. bindtap和bind:tap点击效果是一样的
   catchtap和catch:tap点击效果是一样的

6. data-id=""  获取自定义id
   size="mini"  设置大小

7. 事件是对用户交互行为的响应机制；
   
   event.target.dataset获取元素上的data属性。

   
   

bindtap=""绑定事件

catch:tap=""阻止事件冒泡

data-id=""获取自定义id

size="mini"设置大小

bindtap 点击事件，可以在标签中添加来绑定指定事件，
bind方法  允许事件冒泡
catch方法  阻止事件冒泡
bind和catch绑定事件的方法也可以是加冒号，如点击事件
bindtap和bind:tap点击效果是一样的
catchtap和catch:tap点击效果是一样的
改变data里的数据，要使用setData({
    属性：属性值，
})

事件对象的一些属性的意思：
type: 事件类型/方法，比如tap方法等，具体方法课看官方文档 
timeStamp: 事件生成时的时间戳，属性值是Integer 一个整型数据用来存储整数，整数包括正整数，负整数和零
target: 触发事件的组件的一些属性值集合
currentTarget: 当前组件的一些属性值集合
detail:  详情

如果给标签中自定义了一个属性，例如data-id="1234",那么可以在事件对象中的target下面的dataset中找到这个id值
取值的时候就是event.target.dataset.id

e.currentTarget.dataset

dataset

data-uid="123"

# event

> bindtap

https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/event.html

```html

<view id="tapTest" data-hi="Weixin" bindtap="tapName"> Click me! </view>

```

除 bind 外，也可以用 catch 来绑定事件。与 bind 不同， catch 会阻止事件向上冒泡

```html

<view id="outer" bindtap="handleTap1">

  outer view

  <view id="middle" catchtap="handleTap2">

    middle view

    <view id="inner" bindtap="handleTap3">

      inner view

    </view>

  </view>

</view>

```

bind

catch

bing绑定的事件函数允许事件冒泡

catch绑定的事件函数不允许事件冒泡

绑定事件bind 绑定点击事件 bindtap

bindtap：会冒泡，

catchtap: 会阻止冒泡

1. js负责逻辑交互；

2. 事件是对用户交互行为的响应机制；

3. bindtap VS catchtap:

   bindtap允许事件冒泡（向上传递），catchtap不允许事件冒泡。

4. 事件对象evnet。

   event.target.dataset获取元素上的data属性。

bindtap事件绑定允许事件冒泡

catchtap事件绑定不允许事件冒泡

button设置按钮大小 size="mini"无效时, 可在外层嵌套一个view

<view>

  <button size="mini" bindtap="onTapHandler">点我加1</button>

</view>

阻止冒泡事件：bindtap替换为catchtap=""  也可写作：bind:tap /  catch:tap

data-id设置自定义属性

e.target.dataset.id获取属性的值

bind和catch绑定事件的区别：

bind会事件冒泡

catch不会

• js负责逻辑交互

• 事件是对用户交互行为的响应

• bind VS catch

• 事件对象event

  
  

  
  

bindtap 绑定事件 允许冒泡传播 向上传递事件到父元素

catchtap 绑定则不允许冒泡

事件机制项

事件绑定

bindTrap:普通事件绑定，若给某子元素绑定则会发生事件冒泡

catchTrap：若给某子元素绑定则不会会发生事件冒泡