js事件的学习心得

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()

 

 

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值