javascript系列-class12.事件

欢迎加入前端交流群交流知识获取视频资料:749539640

1.默认行为 
 
 
 
 
什么是默认行为:默认行为就是浏览器自己触发的事件。比如:a链接的跳转,form提交时的跳转,鼠标右键跳转;
 
oncontexmenu当点击右键菜单的时候;
 
return false
 
阻止默认行为
 
if(e.preventDefault) {
 
   e.preventDefault();

}else {
 
    window.event.returnValue = false;

}
 
 
事件移除。document.onmouseover=null;
 
2.拖拽
 
 
拖拽三剑客
 
onmousedown  onmousemove onmouseup
 
拖拽思路:
 
 
1.给目标元素添加onmousedown事件,拖拽的前提是在目标元素按下鼠标左键
 
2.当onmousedown发生以后,此刻给document添加onmousemove事件,意味着此刻鼠标在网页的移动都将改变目标元素的位置
 
3.在onmousemove事件中,设定目标元素的left和top,
公式
目标元素的left = 鼠标的clientX – (鼠标和元素的横坐标差,即offsetX)
目标元素的top = 鼠标的clientY– (鼠标和元素的纵坐标差,即offsetY)
 
4.当onmousedown发生以后,此刻给document添加onmouseup事件,意味着此刻鼠标在网页的任意位置松开鼠标,都会放弃拖拽的效果
在onmouseup事件中,取消document的onmousemove事件即可。
 
3.回放
 
多维数组:arr=[{ddd:123,eee:123},234,[1,2,3,4,5]]
 
多维数组的使用:arr[index].ddd
 
 
 
事件触发阶段主要由于事件流:DOM0级事件处理阶段和DOM2级事件处理;
 
DOM0级事件处理,是一种赋值方式,是被所有浏览器所支持的,简单易懂容易操作;
 
DOM2级事件处理是所有DOM节点中的方法,可以重复绑定,但是浏览器兼容存在问题;
 
非IE下:(这里的事件名不带on),第三个参数表示是在捕获阶段还是冒泡阶段。可以重复绑定事件,执行顺序按照绑定顺序来执行。
 
 oDiv.addEventListener('click',chick,false);
 
oDiv.removeEventListener('click',chick ,false);
 
 
IE下:
 
只有冒泡阶段,所以没有第三个参数;(这里的事件名需要加on)
 
oDiv.attachEvent();
 
oDiv.detachEvent() ;
 
兼容问题解决:
 
var EventUtil={
        addHandler:function(DOM,EventType,fn){
            if(DOM.addEventListener){
                DOM.addEventListener(EventType,fn,false);
            }else if(DOM.attachEvent){
                DOM.attachEvent('on'+EventType,fn)
            }else{
                DOM['on'+EventType]=fn
            }
        },
        removeHandler:function(DOM,EventType,fn){
            if(DOM.removeEventListener){
                DOM.removeEventListener(EventType,fn,false)
            }else if(DOM.detachEvent){
                DOM.detachEvent('on'+EventType,fn)
            }else{
                DOM['on'+EventType]=null;
            }
        }
    }
 
封装兼容问题;
 
 
 

猜你喜欢

转载自www.cnblogs.com/wangzhichao/p/9335637.html