一.什么是事件对象
官方解释: event对象代表事件的状态,比如键盘按键的状态、鼠标的位置、鼠标按钮的状态。
简单理解∶事件发生后,跟事件相关的一系列信息数据的集合都放到这个对象里面,这个对象就是事件对象event,它有很多属性和方法。
事件对象兼容性方案
事件对象本身的获取存在兼容问题:
1.标准浏览器中是浏览器给方法传递的参数,只需要定义形参e就可以获取到。
2.在IE6~8中,浏览器不会给方法传递参数,如果需要的话,需要到window.event中获取查找。
解决:
e = e ll window.event;
二.事件对象的常用属性和方法
常见事件对象的属性和方法
e.target和this的区别
e.target返回的是触发事件的对象(元素)
this返回的是绑定事件的对象(元素)
区别:e.target点击了那个元素,就返回那个元素 this,那个元素绑定了这个点击事件,那么就返回谁
了解兼容性问题
三.阻止默认行为
dom标准写法 :e.preventDefault();
低版本浏览器ie678 :returnValue属性
四.阻止冒泡
事件冒泡∶开始时由最具体的元素接收,然后逐级向上传播到到DOM最顶层节点。
阻止冒泡的两种方式
1.标准写法:利用事件对象里面的stopPropagation()方法 (stop停止Propagation传播)
2.非标准写法:IE6-8利用事件对象cancelBubble属性
e.cancelBubble = true (非标准cancel取消 bubble 泡泡)
阻止事件冒泡的兼容性解决方案
例子:
五.事件委托
事件委托也称为事件代理,在jQuery里面称为事件委派。
原理:
不是每个子节点单独设置事件监听器,而是事件监听器设置在其父节点上,然后利用冒泡原理影响设置每个子节点。
以上案例:给ul注册点击事件,然后利用事件对象的target 来找到当前点击的li,因为点击li,事件会冒泡到u上,u有注册事件,就会触发事件监听器。
作用:
我们只操作了一次DOM,提高了程序的性能。
例子: