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差不多。

<html>  
<meta http-equiv="X-UA-Compatible" content="IE=8">
<!-- To limit the search to descendants of an element only, -->
<!-- call the selectors API on the specific element of interest. -->
<body>   
    <p>    
        <div id="apple">     
        <span>Some are sauce, some are pie.</span>    
        </div>   
    </p>   
<script>    
    var div = document.getElementById("apple");    
    var   e = div.querySelector("p span");    // 'e' will select the span.    
    var   f = div.querySelector("p div");     // 'f' will be null because the div is not a descendent of 'div'
</script>  
</body> 
</html>

 

WinJS.Application.addEventListener function:

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

html代码:

<div id="div_test"> <input type="button" id="btn_test" value="test" /> </div>

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);
参数如上所释。