常用的事件方式
常规的事件处理方法无法批量的为节点添加事件，所以一般都是通过如下方式进行事件操作
<input type="button" value='click' id='btn'/> //另外一种创建事件的方式，基本上都是使用这种方法 var btn = document.getElementById('btn'); btn.onclick = function(event){ //会自动传入一个event的事件参数对象 console.log(event.type); console.log(this.value); } //script 目前必须在input之后，否则无法找到节点 //btn.onclick 当btn这个按钮被点执行相应的操作 使用这钟方式可能带来的问题如下所示 /* 些时会报错，btn is null 因为js 是解释执行的，执行到这个位置时并没有html中的标签存在 所以id为btn的节点也就不存在了！ */
event参数和window.wvent
对于以上事件的处理方式而言，会默认传递一个event的参数来获取一些事件信息，但是对于ie和firefox的获取
方式不一致，ie使用window.event,firefox使用event获取，所拟需要使用如下方法解决
function show(event){ //特别注意：对于IE而言，不会自动传递event这个参数进去，IE需要通过window.event来获取事件 //但是FF却不支持window.event，所以通常使用如下方式解决 event = event || window.event; console.log(event.type); console.log(this.innerHTML); }
window.onload事件
以上问题解决方案有两种
在body中加入onload =X 来解决
function loadSuccess(){ /* 些时会报错，btn is null 因为js 是解释执行的，执行到这个位置时并没有html中的标签存在 所以id为btn的节点也就不存在了！ 解决方案有两种 1、直接在body中有一个事件，叫做onload,目前这些代码在loadSuccess方法中 此时，就表示要把所有的元素都load成功之后才执行 2、使用window.load = x来设置执行的事件（建议使用的方法） */ var btn = document.getElementById('btn'); btn.onclick = function(event){ //会自动传入一个event的事件参数对象 console.log(event.type); console.log(this.value); } } <body onload='loadSuccess()'></body> 使用window.onload事件解决 //当窗口加载完成之后执行loadSuccess,注意loadSuccess不加括号 window.onload = loadSuccess;
批量添加事件
window.onload = ready; function ready(){ var lis = document.getElementsByTagName('li'); for(var i=0;i<lis.length;i++){ lis[i].onclick = show; } } function show(event){ //特别注意：对于IE而言，不会自动传递event这个参数进去，IE需要通过window.event来获取事件 //但是FF却不支持window.event，所以通常使用如下方式解决 event = event || window.event; console.log(event.type); console.log(this.innerHTML); }