事件委托（（原理是事件冒泡））
<body>
<ul id="ul">
<li>西施</li>
<li>王昭君</li>
<li>李世民</li>
<li>董永</li>
</ul>
<div id="box"></div>
<script type="text/javascript" src="common.js"></script>
<script type="text/javascript">
需求：点击li时相应的li会高亮显示
事件委托（原理是事件冒泡）
之前我们是通过遍历li元素来注册事件的(这样做性能不高)，但是现在用另一个新做法，利用事件委托（原理是事件冒泡）
本来是li来做的事，现在我们让ul来做
var ul = document.getElementById('ul');
ul.onclick = function (e) {
//e代表事件对象（在ie老版本中传入的不是e,是window.event）：当事件发生时，可以获取和事件相关的数据
e = e || window.event;//兼容处理
//通过事件获得真正触发事件的对象，标准的DOM中使用的是target,IE的老版本是srcElement
var current = e.target || e.srcElement;//兼容处理
current.style.backgroundColor = 'yellowgreen';// 设置高亮
}
//以上功能已完成
</script>
</body>
事件对象
在上面我们给事件处理函数一个参数e，他代表的就是事件对象，当事件发生时，可以获取和事件相关的数据
在DOM标准中，是给事件处理函数一个参数(如e)，但是ie老版本中给的是window.event,所以我们需要处理下兼容问题
// 处理事件对象的兼容
e = e || window.event;
-------------------------------------------------------------------
通过事件获得真正触发事件的对象，标准的DOM中使用的是target,IE的老版本是srcElement
// 所以我们需要处理下兼容问题
var target = e.target || e.srcElement;
-------------------------------------------------------------------
通过事件对象获得事件所在的阶段e.eventPhase
console.log(e.eventPhase); //返回的是数字，如果是1为捕获阶段，2为目标阶段，3为冒泡阶段
-------------------------------------------------------------------
通过事件获取事件处理函数所属的对象，相当于this
console.log(e.currentTarget);
-------------------------------------------------------------------
通过事件对象获取事件的名称
console.log(e.type)//如果是onclick事件，则返回的名称是click
---------------------------------------------------------------------
通过事件对象e取消默认行为
取消默认行为
DOM标准方法
e.preventDefault();
IE的老版本
e.returnValue = false;
-------------------------------------------------------------------
当事件发生时，可以通过事件对象获取到鼠标当前的坐标
clientX、clientY（相对于浏览器窗口）；pageX、pageY（相对于页面）
//pageX和pageY有兼容问题，从IE9以后才支持,所以我们需要写一个兼容性的函数
pageX = clientX + 页面滚动出去的距离
所以需要获得页面滚动出去的距离
获取页面滚动出去的距离
document.body.scrollLeft（左边）、document.body.scrollTop（上边）这个也有兼容问题
有些浏览器 是使用这两个属性来获取的（其中documentElement是指文档的根元素，即html标签）
document.documentElement.scrollLeft（左边）、document.documentElement.scrollTop（上边）
先写获取页面滚动距离的兼容函数
// 因为我们这个函数返回两个参数，所以可以保存在对象里面
function getScroll() {
var scrollLeft = document.body.scrollLeft || document.documentElement.scrollLeft;
var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
//返回一个对象
return {
scrollLeft:scrollLeft,
scrollTop:scrollTop
}
}
下面写关于鼠标位置pageX和pageY的兼容函数
// 因为我们这个函数返回两个参数（X和Y的值），所以可以保存在对象里面
function getPage(event) {
利用了上面写的页面滚动距离的兼容函数
var pageX = event.pageX || e.clientX + getScroll().scrollLeft;
var pageY = event.pageY || e.clientY + getScroll().scrollTop;
return {
pageX:pageX,
pageY:pageY
}
}
网友评论