事件的分类
- 鼠标事件
- 滚轮事件
- 键盘事件
DOM0级事件
通过事件绑定的形式，dom元素只能有一个事件处理函数，则这种形式叫做DOM0级事件
通过DOM0级事件绑定点击事件
var box=document.getElementById("box");
box.onclick=function(){
console.log("我被点击了");
}
移除绑定的点击事件
box.onclick=null;
DOM2级事件
通过事件监听的形式，dom元素可以有多个事件处理函数，则这种形式叫做DOM2级事件
通过DOM2级事件绑定点击事件
给节点添加事件监听器
dom.addEventListener(事件字符串，回调函数，布尔值)
移除节点绑定的事件监听器
dom.removeEventListener(事件字符串，回调函数，布尔值)
function auto(){
console.log(this);
}
//绑定点击事件
box.addEventListener("click",auto,false);
//移除点击事件
box.removeEventListener("click",auto,false);
IE低版本的DOM2级事件
在IE低版本给节点添加事件监听器：事件字符串需要加on，回调函数内部的this指向window
box.attachEvent("onclick",function(){
console.log("ym");
})
DOM2级事件兼容性函数
//dom是要监听的节点
//type是要监听的事件类型
//callback事件处理函数
function addEvent(dom,type,callback){
if(dom.addEventListener){
dom.addEventListener(type,callback);
}else{//IE低版本
dom.attachEvent("on"+type,function(){//这个匿名的回调函数this指向window
callback.call(dom);//修改callback的this指向
})
}
}
事件处理模型
当一个dom节点触发事件后，该事件会按照HTML结构在根节点和这个元素节点之间传播，路径上所有的节点都会收到该事件
false 表示事件处理函数会在冒泡阶段触发
true 表示事件处理函数会在捕获阶段触发
DOM0级事件都是在冒泡阶段触发
事件处理模型，是先捕获再冒泡
事件对象（Event）
事件对象是用来记录一些事件发生时的相关信息的对象。事件对象只有事件发生时才会产生，并且只能是事件处理函数内部访问，在所有事件处理函数运行结束后，事件对象就被销毁！
在IE低版本中window.event存储着事件对象
获取事件对象兼容函数
box.onclick=function(e){
e=e||window.event;
console.log(e.screenX);//鼠标距离电脑左上角的水平距离
}
事件对象的属性
e.clientX 鼠标距离浏览器左上角的水平距离
e.clientY 鼠标距离浏览器左上角的垂直距离
e.offsetX 鼠标距离自身元素左上角的水平距离
e.offsetY 鼠标距离自身元素左上角的垂直距离
e.layerX 鼠标距离有定位属性父级元素的左上角的水平距离
e.layerY 鼠标距离有定位属性父级元素的左上角的垂直距离
e.screenX 鼠标距离电脑左上角的水平距离
e.screenY 鼠标距离电脑左上角的垂直距离
鼠标事件
/*鼠标点击左键 并且鼠标抬起时触发*/
oBox.onclick = function(){
console.log('我被点击了');
}
/*鼠标的任意键在按下时会触发*/
oBox.onmousedown = function(){
console.log('鼠标在oBox上按下了，我检测到了');
}
/*鼠标的任意键在按下时 并且抬起来时会触发*/
oBox.onmouseup = function(){
console.log('鼠标在oBox上按下了，我检测到了');
}
/*当鼠标右键按下 并且抬起时触发*/
oBox.oncontextmenu = function(){
console.log('鼠标右键点击了，我检测到了');
}
/*当鼠标进入到dom节点内部 就会触发事件处理函数*/
oBox.onmouseenter = function(){
console.log('鼠标进来了，我检测到了mouseenter');
}
/*当鼠标进入到dom节点内部 就会触发事件处理函数*/
oBox.onmouseover = function(){
console.log('鼠标进来了，我检测到了mouseover');
}
/*当鼠标在dom节点内部移动时 就会持续触发事件处理函数*/
oBox.onmousemove = function(){
console.log('鼠标在oBox里面移动了，我检测到了');
}
/*当鼠标离开到dom节点内部 就会触发事件处理函数*/
oBox.onmouseleave = function(){
console.log('鼠标离开了，我检测到了 mouseleave');
}
/*当鼠标离开到dom节点内部 就会触发事件处理函数*/
oBox.onmouseout = function(){
console.log('鼠标离开了，我检测到了 mouseout');
}
oBox.addEventListener('mouseleave',function(){
console.log('鼠标离开了，我检测到了');
},false)
事件源对象
事件源对象：指向触发事件源头的节点
谷歌：e.target
IE低版本：e.srcElement
获取事件源对象兼容函数
box.onclick=function(e){
e=e||window.event;//事件对象
var target=e.target||e.srcElement;//事件源对象
}
事件委托
事件委托（事件代理）原理：简单的说就是将事件交由别人来执行，就是将子元素的事件通过冒泡的形式交由父元素来执行。
为什么要用时间委托？
在JavaScript中，添加到页面上的事件处理程序数量将直接关系到页面的整体运行性能，因为需要不断的与dom节点进行交互，访问dom的次数越多，引起浏览器重绘与重排的次数也就越多，就会延长整个页面的交互就绪时间。
比如我们有100个li，每个li都有相同的click点击事件，可能我们会用for循环的方法，来遍历所有的li，然后给它们添加事件。
如果用事件委托，就会将所有的操作放到js程序里面，与dom的操作就只需要交互一次，这样就能大大的减少与dom的交互次数，提高性能。
事件委托示例
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<script>
var aLi = document.getElementsByTagName('li');
var oUl = document.getElementsByTagName('ul')[0];
oUl.onclick = function(e){
console.log(e.target.innerText)
}
</script>
</body>
阻止网页的默认事件
网页的默认事件
- 右键点出菜单
- 图片拖动
- a标签跳转
- 表单提交
…
阻止默认事件
e.preventDefault() 谷歌
e.returnValue=false IE低版本
return false 只能阻止DOM0级事件的默认行为
阻止浏览器默认行为兼容函数
function cancelHandler(e){
if(e.preventDefault){//谷歌
e.preventDefault();
}else{//IE低版本
e.returnValue=false;
}
}
阻止事件传播（冒泡和捕获）
e.stopPropagetion()//谷歌浏览器
e.cancelBubble=true//IE浏览器
阻止事件传播兼容函数
function stopBubble(e){
if(e.stopPropagation){
e.stopPropagation();
}else{
e.cancelBubble=true;
}
}
扫一扫
280
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
