Tip 1. 寻找元素 && 添加事件监听：

假如你的html页面中有以下代码：<button class="navButton" title="nav">Next Page</button>

var e = element.querySelector('.navButton');

然后再对e通过addEventListener 方法 添加事件监听器

e.addEventListener("click", linkClickEventHandler, false);

function linkClickEventHandler(e) {        e.preventDefault();        var link = e.target;        WinJS.Navigation.navigate(link.href);    }

对应API函数：

querySelector method：object.querySelector(v, pel)

另外还有 querySelectorAll方法，其原理与querySelector差不多。

  
     
     
            
            
     
             
      Some are sauce, some are pie.            
     
       
      

 

WinJS.Application.addEventListener function:

WinJS.Application.addEventListener(type, listener, capture);

参数解释： query:要检索的元素；element:query元素的根元素；eventType:监听事件类型，常见的有click等； listener：监听器如上述的linkClickEventHandler函数； capture:参数是个布尔值，表示该事件的响应顺序。capture若为true,则浏览器采用Capture,若为false则采用bubbing方式。

html代码:

js代码：

window.onload = function(){     document.getElementByIdx_x("div_test").addEventListener("click",test1,false);     document.getElementByIdx_x("btn_test").addEventListener("click",test2,false); } function test1(){     alert("外层div触发");} function test2(){     alert("内层input触发"); }

自己体验一下，如果capture是true则test1先触发，如果userCapture是false则test2先触发。

附：attachEvent方法，该方法可以为某一事件附加其它的处理事件，有时候可能比较有用，这里将其基本用法总结一下。

其语法可以查看《DHTML手册》，里面有详细的说明，这里贴一个例子，该例子来自互联网：

document.getElementByIdx_x("btn").onclick = method1;document.getElementByIdx_x("btn").onclick = method2;document.getElementByIdx_x("btn").onclick = method3;

如果这样写,那么将会只有medhot3被执行。

写成这样：

var btn1Obj = document.getElementByIdx_x("btn1");//object.attachEvent(event,function);btn1Obj.attachEvent("onclick",method1);btn1Obj.attachEvent("onclick",method2);btn1Obj.attachEvent("onclick",method3);

执行顺序为method3->method2->method1

如果是Mozilla系列，并不支持该方法，需要用到addEventListener

var btn1Obj = document.getElementByIdx_x("btn1");//element.addEventListener(type,listener,useCapture);btn1Obj.addEventListener("click",method1,false);btn1Obj.addEventListener("click",method2,false);btn1Obj.addEventListener("click",method3,false);

执行顺序为method1->method2->method3。

假如你的html页面中有以下链接代码：<a href="/pages/page2/page2.html">Go to page 2.</a>

WinJS.Utilities.query("a").listen("click", linkClickEventHandler, false);

对应API函数：

WinJS.Utilities.QueryCollection object：

var querycollection = WinJS.Utilities.query(query, element);

queryCollection.listen(eventType, listener, capture);

参数如上所释。