DOM 事件与事件的冒泡/委派/绑定

DOM事件处理模型与事件的冒泡/委派/绑定
  • 基本事件类型

事件就是用户和浏览器之间的交互行为,如点击按钮、鼠标移动和关闭窗口等。可以为对应的对象绑定事件处理函数来响应事件。
常用事件类型有:
点击类:onclick
文档加载:onload --页面加载后才触发,常为window绑定。
鼠标类:onmousemove onmousedown onmouseup onmousewheel --鼠标事件,绑定给document
键盘类:onkeydown onkeyup onkeypress --一般都会绑定给一些可以获取到焦点的对象,如input,document
滚动条:onscroll --元素的滚动条滚动时触发,常用于判定滚动条是否到底

> 当满足以下条件时,元素的滚动条到底:
> if判断 scrollHeight-scrollTop == clientHeight时,说明垂直滚动条滚动到底;
> if判断 scrollWidth-scrollLeft == clientWidth时,说明水平滚动条滚动到底。
  • 事件对象

当事件的响应函数被触发时,浏览器每次都会讲一个事件对象event作为实参传递进响应函数;即使不指定形参,也会默认自动传递进入。
在事件对象中,封装了当前事件相关的一切信息,比如鼠标的坐标,滚动方向等。
属性:
clientX 获取鼠标指针在当前可见窗口的水平坐标
clientY 获取鼠标指针在当前可见窗口的垂直坐标
pageX 获取鼠标指针相对于当前整个页面的水平坐标(IE8及以下不支持)
pageY 获取鼠标指针党对于当前整个页面的垂直坐标(IE8及以下不支持)

在IE8及以下浏览器中,响应函数被触发时传递的不是事件对象event,而是将事件对象作为window的属性保存的。因此,在响应函数中使用事件对象时,先执行如下处理方式:
event=event||window.event;

//获取鼠标指针的当前坐标值
var posX=0,posY=0;
event=event||window.event
if(event.pageX||event.pageY){
posX=event.pageX;
posY=event.pageY;
}else{
posX=event.clientX+document.body.scrollLeft||document.documentElement.scrollLeft;
posY=event.clientY+document.body.scrollTop||document.documentElement.scrollTop;
/*在chrome中认为浏览器的滚动条是body的,而火狐等浏览器认为是html的*/
  • 事件的冒泡/委派/绑定

冒泡(Bubble):指事件的向上传导,当后代元素上的事件被触发时,其祖先元素的相同事件也会被触发。

在开发中,大部分情况下事件的冒泡都是有用的。如果不希望发生,可以通过事件对象来取消。
在w3c中使用stopPropagation()方法;
在IE中使用:event.cancelBubble=true;

委派:指将事件统一绑定给元素的共同的祖先元素,这样当后代元素上的事件触发时,会一直冒泡到祖先元素,从而通过祖先元素的响应函数来处理事件。

事件的委派是利用了冒泡原则,通过委派可以减少事件绑定的次数,提高程序性能。
但有时需要结合事件对象的target属性以定位后代元素。
如:ul.οnclick=function(event){
event=event||window.event;
if(event.target.className=“link”){代码块;}
};

绑定:使用对象.事件=响应函数的形式,只能同时为一个元素的一个事件绑定一个响应函数,绑定多个时会被覆盖。通过事件的绑定方法,可以为元素的一个相同事件同时绑定多个响应函数。
语法:
addEventListener()
参数:1.事件的字符串,不用on 2.回调函数 3.是否在捕获阶段触发事件,一般为false
attachEvent()
参数:1.事件的字符串,加on 2.回调函数

addEventListener()先绑定的先执行,IE8及以下版本不支持;
attachEvent()后绑定的先执行,IE8支持。

//封装设置如下函数,以兼容不同浏览器;另外attachEvent()中的this是window,而不是objcet,所以使用call来处理下
function bind(object,Str,callback){
if(object.addEventListener){
object.addEventListener(Str,callback,false);
}else{
object.attachEvent("on"+Str,function(){callback.call(object)});}
}

补充
事件的捕获,目标与冒泡阶段
在这里插入图片描述在这里插入图片描述

阻止捕获:
在w3c中使用preventDevault()方法;
在IE中使用:event.returnValue=false。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值