WeChat小程序基础篇-js事件

JavaScript017

WeChat小程序基础篇-js事件,第1张

js负责页面与用户的交互,动态修改页面的内容。使用js脚本来处理用户的操作。

操作解释: 点击button按钮(点我),修改界面的msg显示为"BeiJing佩奇"

绑定事件: bindtap定义了"点击事件"

j s 函数: Page({定义函数对应bindtap})

例如开头示例一样,组件绑定事件,js编写事件函数。

这里大概介绍下log打印的内容

☞ 小生不才,附上 博客地址☜

事件分为冒泡事件和非冒泡事件

1.冒泡事件:当一个组件被触发后,该事件以此向父节点传递。

2.非冒泡事件:当一个组件触发后,该事件不会向父节点传递。

解释:当点击子节点时,会依次触发"bind事件2,bind事件1"

解释:当点击子节点时,只触发"bind事件2",而没有触发"bind事件1"

自基础班1.5.0起,触摸类事件支持捕获阶段。捕获阶段位于冒泡阶段之前。事件到达节点的顺序与冒泡相反。捕获事件采用的关键字为capture-bind、capture-catch,当然catch还是中断,取消冒泡阶段。

1. 示例1,执行顺序为hand2,hand4,hand3,hand1

2. 示例2,加入capture-catch捕获事件,只执行hand2

在给标签绑定事件时在回调事件里有一个event参数,可以通过event.target获取当前对象,在处理函数里把当前对象当做参数传递过去。如:

//绑定事件

$('.list').click(function(event){

var ele=event.target

deal(ele)

})

//处理函数

function deal(obj){

}只是举一个例子,如果有错误,请指出。

js中可以改变方法作用域和参数的方式有三种,apply,call,bind.

apply 和call类似第一个参数是方法的作用域,其它参数是方法的参数。不同的是apply的其它参数是个数组,数组的个数为参数的个数,call除开第一个参数其它参数方法参数,例子如下

function method() {

    console.log(this, arguments)

}

var a = 1

var b = 2, c = 3, d = 4

method.call(a, b, c, d)// 打印 [Number: 1] { '0': 2, '1': 3, '2': 4 }

method.apply(a, [b, c, d])// 同上 [Number: 1] { '0': 2, '1': 3, '2': 4 }

bind 和call参数传递方式一致,唯一区别是bind不会立即执行,只会更改作用域和方法参数,到真正执行方法时才会执行。

var t = method.bind(a, b)

t()// [Number: 1] { '0': 2 }

t = t.bind(null, c)

t()// [Number: 1] { '0': 2, '1': 3 }

t = t.bind(null, d)

t() // [Number: 1] { '0': 2, '1': 3, '2': 4 }

可以采用bind方法进行更改事件绑定的方法的参数及作用域。