首页 > 代码库 > 事件的一些简单了解
事件的一些简单了解
事件深入了解
1）：当点击在一个元素时，单击事件不仅仅发生在这个元素上，同时也点击了他的父元素以及祖先元素，甚至是整个页面。
2）：DOM分三级事件绑定
1：dom0级事件绑定
dom.onclick = fun( )只能监听冒泡，不能监听捕获。注意ie9，chrome里面的冒泡，一直到window对象，
但是ie678只到document对象。且没有window对象。
这种事件处理程序里面的this指的是时间源，没有兼容性问题，DOM0级可以将事件监听直接写在标签中，但工作中不允许这样用。
DOM0级相同元素不能同时添加多个相同事件，会被覆盖。
2：DOM1级，与0级没有区别
3：DOM2级事件绑定
addEventListener（）
参数1：事件 click mouseover 不加on
参数2：事件处理程序。
参数3：冒泡 false 捕获 true。DOM2级可以同一个元素添加多个事件，不会冲突。事件处理程序里面的this指的是事件源本身。
ie678浏览器绑定事件，
attachEvent（），只有两个参数。
参数一：onclick onm ouseover 必须加on
参数2：事件处理程序，function。不能监听冒泡或者捕获。这个事件处理程序中的this值得不是事件源，而是window。
同一个元素添加多个事件，执行的顺序是从后到前面。
4：经典轮子（兼容性能力检测：计算后样式，运动框架，className，addEvent）
兼容性处理。jquery中用的都是dom2级，自带轮子（兼容性），jquery事件同名不会被覆盖。
三：事件对象
event
任何事件处理函数中，浏览器js引擎都会默认往里面传递一个实参，就是事件对象
box.onclick = function(event){console.dir(event);}
console.log(event);
//返回true代表这个事件是否冒泡
console.log(event.bubbles);
//返回被点击的事件
console.log(event.target);
//事件源的id
console.log(event.currentTarget.id);
//被点击事件的id
console.log(event.target.id);
//事件类型
console.log(event.type);
//被点击事件的id
console.log(event.srcElement.id);
//this指代真正的事件源
console.log(this);
event.stoppropagation();阻止冒泡，只执行到当前
event.preventDefault();阻止默认事件
event中常用的几个位置属性
属性 参照
clientX clientY 浏览器左上角
x 左上角
layerX layerY 当前事件源左上角
pageX pageY 当前文档左上角
offsetX offsetY 当前事件源左上角
screenX screeY 屏幕左上角
event判断敲击的是那个键盘。
event.keyCode. event.which //onkeydown,:键盘按下 onkeyup.键盘抬起 onkeypress键盘按下抬起
var ev = e||window.event;//为了兼容ie678；
event在ie678里面存在问题，这里不是实参，是window的一个属性，直接使用实参形式不可用window.event
event在ie678里面没有preventDefault( )方法，使用event.returnValue = http://www.mamicode.com/false;来阻止默认事件。
if (event.preventDefault) {
event.preventDefault();
}else{
event.returnValue = http://www.mamicode.com/false;
}
event属性target
获取当前点击的元素，但是在ie678里面不兼容，所以在ie678里面使用srcElement
var target = event.target ||event.srcElement;
事件的一些简单了解
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。