javascript教程系列-12.事件

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

1.默认行为 

 

什么是默认行为：默认行为就是浏览器自己触发的事件。比如：a链接的跳转，form提交时的跳转，鼠标右键跳转；

 

oncontexmenu当点击右键菜单的时候；

 

return false

 

阻止默认行为

 

if(e.preventDefault) {
 
   e.preventDefault();

}else {
 
    window.event.returnValue = false;

}

　　

 

back_弹出右键菜单.html
927 bytes

 

事件移除。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

 

完美拖拽.htm
2.2 KB

 

 

事件触发阶段主要由于事件流：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;
            }
        }
    }

　　

 

封装兼容问题；

 

jianrong.html
910 bytes