MUI

事件绑定

除了可以使用addEventListener()方法监听某个特定元素上的事件外， 也可以使用.on()方法实现批量元素的事件绑定。

• .on( event , selector , handler )

  • event
    Type: String
    需监听的事件名称，例如：'tap'
  • selector
    Type: String
    选择器
  • handler
    Type: Function( Event event )
    事件触发时的回调函数，通过回调中的event参数可以获得事件详情

示例

点击新闻列表，获取当前列表项的id，并将该id传给新闻详情页面，然后打开新闻详情页面

mui(".mui-table-view").on('tap','.mui-table-view-cell',function(){
  //获取id
  var id = this.getAttribute("id");
  //传值给详情页面，通知加载新数据
  mui.fire(detail,'getDetail',{id:id});
  //打开新闻详情
  mui.openWindow({
    id:'detail',
    url:'detail.html'
  });
}) 

扩展阅读

事件取消

使用on()方法绑定事件后，若希望取消绑定，则可以使用off()方法。 off()方法根据传入参数的不同，有不同的实现逻辑。

• version added: 2.0.0 .off( event , selector , handler )

  • event
    Type: String
    需取消绑定的事件名称，例如：'tap'
  • selector
    Type: String
    选择器
  • handler
    Type: Function
    之前绑定到该元素上的事件函数，不支持匿名函数

• version added: 2.0.0 .off( event , selector)

  • event
    Type: String
    需取消绑定的事件名称，例如：'tap'
  • selector
    Type: String
    选择器

• version added: 2.2.0 .off( event )

  • event
    Type: String
    需取消绑定的事件名称，例如：'tap'

• version added: 2.2.0 .off( )

  • 空参数，删除该元素上所有事件

示例

off(event,selector,handle)适用于取消对应选择器上特定事件所执行的特定回调，例如：

//点击li时，执行foo_1函数
mui("#list").on("tap","li",foo_1);
//点击li时，执行foo_2函数
mui("#list").on("tap","li",foo_2);

function foo_1(){
  console.log("foo_1 execute");
}

function foo_2(){
  console.log("foo_2 execute");
}
//点击li时，不再执行foo_1函数，但会继续执行foo_2函数
mui("#list").off("tap","li",foo_1);

off(event,selector)适用于取消对应选择器上特定事件的所有回调，例如：

//点击li时，执行foo_1函数
mui("#list").on("tap","li",foo_1);
//点击li时，执行foo_2函数
mui("#list").on("tap","li",foo_2);

function foo_1(){
  console.log("foo_1 execute");
}

function foo_2(){
  console.log("foo_2 execute");
}
//点击li时，foo_2、foo_2两个函数均不再执行
mui("#list").off("tap","li");

off(event)适用于取消当前元素上绑定的特定事件的所有回调，例如：

//点击li时，执行foo_1函数
mui("#list").on("tap","li",foo_1);
//点击p时，执行foo_3函数
mui("#list").on("tap","p",foo_3);

function foo_1(){
  console.log("foo_1 execute");
}

function foo_3(){
  console.log("foo_3 execute");
}
//点击li时，不再执行foo_1函数；点击p时，也不再执行foo_3函数
mui("#list").off("tap");

off()适用于取消当前元素上绑定的所有事件回调，例如：

//点击li时，执行foo_1函数
mui("#list").on("tap","li",foo_1);
//双击li时，执行foo_4函数
mui("#list").on("doubletap","li",foo_4);
//点击p时，执行foo_3函数
mui("#list").on("tap","p",foo_3);

function foo_1(){
  console.log("foo_1 execute");
}

function foo_3(){
  console.log("foo_3 execute");
}

function foo_4(){
  console.log("foo_4 execute");
}
//点击li时，不再执行foo_1函数；点击p时，也不再执行foo_3函数；双击li时，也不再执行foo_4函数；
mui("#list").off();

扩展阅读

事件触发

使用mui.trigger()方法可以动态触发特定DOM元素上的事件。

• .trigger( element , event , data )

  • element
    Type: Element
    触发事件的DOM元素
  • event
    Type: String
    事件名字，例如：'tap'、'swipeleft'
  • data
    Type: Object
    需要传递给事件的业务参数

示例

自动触发按钮的点击事件：

var btn = document.getElementById("submit");
//监听点击事件
btn.addEventListener("tap",function () {
  console.log("tap event trigger");
});
//触发submit按钮的点击事件
mui.trigger(btn,'tap');

扩展阅读