JS事件

Posted 2022-02-09 tractors

一、事件绑定：

　　(1) ele.onxxx=function () ;  //同一个元素只能绑定一次；

　　(2) obj.addEventListener(type,fn,false);  //能绑定多个，IE9不兼容；

　　(3) obj.attachEvent(‘on‘ +type,fn);  //IE独有

二、事件解除：

　　(1) ele.onclick=null/false/"";

　　(2) ele.romoveEventListener(type,fn,false);

　　(3) ele.detachEvent(‘on‘+type,fn);

　　注：若绑定匿名函数，则2，3两方法无法解除；

三、事件对象：

　　(1) event||window.event; 兼容IE

　　(2) 事件源对象：

　　　　1) event.target;  //火狐只有这个

　　　　2) event.srcElement; //IE只有这个

四、事件分类：

　　(1) 鼠标事件：

　　　　click，mousedown，mousemove，mouseup

　　　　contextmenu，mouseenter，mouseleave

　　　　mouseover，mouseout //子元素也会触发

　　　　event.button：0/1/2；区分鼠标按键；（mousedown）

　　(2) 移动端：touchstart，touchmove，touchend

　　(3) 键盘事件：keydown>keypress>keyup

　　注：keydown触发一次/keypress长按一直触发；

　　(4) 文本类操作事件：

　　　　1) input;  //有值改变就触发；

　　　　2) focus；//获得焦点；

　　　　3) blur;  //失去焦点；

　　　　4) change;  //有值改变，并失去焦点触发；

　　(5) 窗体类事件：scroll，load；

　　(6) window.onresize=function() ;  //监控浏览器尺寸

五、事件处理模型—事件冒泡/捕获：

　　（1）冒泡事件：结构上（非视觉上）嵌套关系的元素，即同一事件，自子元素冒泡向父元素。（自底向上）

　　（2）捕获事件：结构上（非视觉上）嵌套关系的元素，即同一事件，自父元素捕获至子元素（事件源元素）。（自底向上）

　　　　注：IE没有捕获事件。

　　（3）触发顺序：先捕获，后冒泡。

　　（4）focus，blur，change，submit，reset，select等事件不冒泡。

六、取消冒泡：

　　(1) event.stopPropagation();

　　(2) event.cancelBubble=true;  //IE独有

七、阻止默认事件：（a标签跳转，右键菜单等）

　　(1) return false;  //以对象属性方式注册事件才生效

　　(2) event.preventDefault();  //IE9以下不兼容

　　(3) event.returnValue=false;  //兼容IE

　　例：取消右键

　　function.oncontextmenu=function (e)

　　　　e.preventDefault();