首页 > 代码库 > DOM模型和事件处理---事件处理
DOM模型和事件处理---事件处理
常用的事件方式
常规的事件处理方法无法批量的为节点添加事件，所以一般都是通过如下方式进行事件操作
<input type="button" value=http://www.mamicode.com/‘click‘ id=‘btn‘/>"color: #008000;">//另外一种创建事件的方式，基本上都是使用这种方法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 onl oad=‘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);}
DOM模型和事件处理---事件处理
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。