一对一的事件绑定&&addEventListener对一个对象执行多个事件绑定
<body> <input type="button" value="点"> <input type="button" value="删"> <div id="ad">xxx</div> </body> <script> /*利用addEventListener可绑定多个事件并按顺序执行*/ var bt = document.getElementsByTagName('input')[0]; // bt.addEventListener('click',function(){alert(this.value)}); // 注意event： 不要使用 "on" 前缀。例如，使用 "click" 来取代 "onclick"。 // function 描述了事件触发后执行的函数。 var haha = function() { alert('haha') }; bt.addEventListener('click', haha); bt.addEventListener('click', function() { alert('hehe') }); // 利用onclick进行常规的事件绑定移除haha事件、解除绑定 var bt1 = document.getElementsByTagName('input')[1]; bt1.onclick = function() { bt.removeEventListener('click', haha); } </script>
拓展（对象遍历、读写、排序、简单的字符串处理等操作）
/*html*/
<ul id="source"> <li>北京空气质量：<b>90</b></li> <li>上海空气质量：<b>70</b></li> <li>天津空气质量：<b>80</b></li> </ul>
/*JS部分代码*/
function getData() { var data = [] var lis = document.getElementById('source').getElementsByTagName("li"); // console.log(li[1].innerHTML);测试一下输出结果 for (var i = 0, j = lis.length; i < j; i++) { data.push([ [lis[i].innerHTML.slice(0, 2)], [lis[i].innerHTML.slice(10, 12)] ]) } return data; }
上面代码用了Slice()截取有序列表下的指定内容。
var li = document.getElementById('source').getElementsByTagName("li"); console.log(li[1].innerHTML); //北京空气质量：<b>90</b> console.log(li[1].innerHTML.slice(0, 2)); //上海 console.log(li[1].innerHTML.slice(10,12)); //70
console.log(li[1].innerHTML.slice(9,11)); //>8
排序拓展：按顺序获取数组元素并将排序结果输出并加上中文序号
/*html*/ <ul id="resort"> </ul> /*JS*/ function render(data) { var all = ""; var rank = ["一", "二", "三", "四", "五", "六", "七", "八"]; for (var i = 0, j = data.length; i < j; i++) { all += "<li>第" + rank[i] + "名：" + data[i][0] + "<b>" + data[i][1] + "</b></li>"; } document.getElementById("resort").innerHTML = all; }
/*将函数功能集中在一个函数中,通过立即执行函数(function(){})自动执行并将所有功能绑定给button按钮*/
/*html*/ <button id=” sort-btn'”></button> /*JS*/ (function() { // 在这下面给sort-btn绑定一个点击事件，点击时触发btnHandle函数 document.getElementById('sort-btn').addEventListener("click", btnHandle, false) //addEventListener("type",函数名,false) })() // 在这下面给sort-btn绑定一个点击事件，点击时触发btnHandle函数 document.getElementById('sort-btn').addEventListener("click", btnHandle, false) //addEventListener("type",函数名,false) })()
主要是给自己看得笔记，写的也许不够详细，持续更新中@_@