js和html之间的交互是通过用户和浏览器操作页面时引发的事件来处理的。
我们现在通过jquery的bind,unbind,trigger方法可以很好的操作dom元素上的事件,且兼容浏览器。
然而实际上各浏览器之间的事件还是有所不同的,只是jquery帮我们很好的封装了一层,但我们还是要稍微了解下之间的区别。
浏览器上的事件类型分为了3种,在IE上的叫做冒泡型事件
比如:<html>
<body οnclick="handleClick()">
<div οnclick="handleClick()">Click me</div>
</body>
</html>
在IE6以上版本的时间顺序是div--->body--->html---->document
Mozilla1.0以上版本也支持冒泡时间,但它的泡一直到了window上,是div--->body--->html---->document--->window
捕获型事件:
Netscape Navigator4.0的时间顺序是document--->div
Dom事件流:同时支持两种时间模型(冒泡型事件和捕获型事件),捕获型事件先发生
window-->document-->body-->div--->body---->document--->window
IE和DOM通用的时间处理函数方法是:
var oDiv = document.getElementById("mdx");
oDiv.οnclick=function(){alert("111");}
上面的方法只能设置一个事件,即后面的会把前面的覆盖掉,而以下两个方法则可以设置多个
另外IE特有的监听方法为attachEvent()和detachEvent()
attachEvent("name_Event",fnHandle)
detachEvent("name_Event",fnHandle)
a.事件目标:event.srcElement
b.字符代码:event.keyCode
c.阻止时间默认行为:event.returnValue = false;
d.停止事件冒泡:event.cancelBubble = true;
Dom的方法是addEventListener()和removeEventListener()
addEventListener("name_Event",fnHandle,bCapture)
removeEventListener("name_Event",fnHandle,bCapture)
第三个参数为true时是捕获事件,为false时是冒泡事件
a.事件目标:event.target
b.字符代码:event.charCode
c.阻止时间默认行为:event.preventDefault()
d.停止事件冒泡:event.stopPropagation()