javascript 浏览器兼容性事件开发经验总结
- WBOY原创
- 2016-06-01 09:54:15991浏览
简单事件模型和高级事件模型
简单事件模型和高级事件模型简单事件，就是事件与页面元素直观的绑定在一起的形式，如：
<code class="language-html"><div onclick="alert(this.innerHTML);">
element.onclick = function(){alert(this.innerHTML);}
<p>只要不是用了个别浏览器独有的事件，一般的click，mouseover事件等在各浏览器中都可以这么使用。 </p>
<p>但是当一个事件需要绑定多个监听，或者需要动态注册/移出监听时，简单事件模型就不够用了，需要使用高级事件模型（IE和其他浏览器在使用高级事件模型时就有区别了）： </p>
<pre class="brush:php;toolbar:false">
<code class="language-javascript">//注册
function addEventHandler(element, evtName, callback, useCapture) {
//DOM标准
if (element.addEventListener) {
element.addEventListener(evtName, callback, useCapture);
} else {
//IE方式,忽略useCapture参数
element.attachEvent('on' + evtName, callback);
}
}
//移除
function removeEventHandler(element, evtName, callback, useCapture) {
//DOM标准
if (element.removeEventListener) {
element.removeEventListener(evtName, callback, useCapture);
} else {
//IE方式,忽略useCapture参数
element.dettachEvent('on' + evtName, callback);
}
} </code>
标签中onclick事件与href属性的调用顺序关系
在a标签响应点击事件时，会先进行onclick事件的响应，再执行href中的跳转方法。如以下标签点击后会先后提示“button”和“href”：
<code class="language-html"><a href="%E2%80%9Djavascript:alert(%E2%80%9Chref%E2%80%9D);%E2%80%9D" onclick="alert(this.innerHTML);"> button </a> </code>
但是，最好不要在href中定义具体的javascript方法，因为这个是定义跳转的链接地址的属性，如果需要先后执行两个javascript方法，应该这样写：
<code class="language-javascript"><a href="%E2%80%9D#%E2%80%9D" onclick="alert(this.innerHTML); alert(“href”);"> button </a> </code>
但是上面的写法中如果onclick绑定的响应方法中并没有提交请求跳转至别的页面，那么会发现当前网页做了一次刷新，因为以上代码中href=“#”表示跳转到当前页的顶部，但是并没有发出新的html请求。有的时候，我们并不希望页面在响应onclick事件后又跳回顶部（尤其是页面高度较长，出现滚动条，并且该链接位于页面底部时，跳转至顶部后用户还需要拖动滚动条找回原来位置继续操作时），那么应该在onclick后返回false值，阻止继续进行href定义的动作，如：
<code class="language-html"><a href="%E2%80%9D#%E2%80%9D" onclick="alert(this.innerHTML); alert(“href”);return false；"> button </a> </code>
或者将#替换成空的javascript语句：
<code class="language-javascript"><a href="%E2%80%9Djavascript:void(0)%E2%80%9D" onclick="alert(this.innerHTML); alert(“href”);"> button </a> </code>
onload事件的调用顺序
有的时候在页面初始化时需要调用一些脚本来设置页面元素的初始状态，最标准的做法是用
方式或者document.onload方式调用。onload的事件的触发会在页面元素渲染完毕之后调用，这样就保证了不会出现脚本执行时找不到未渲染的页面元素的情况。如果是在区域的