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