一.事件机制 事件的种类 事件的添加和删除 IE低版本浏览器兼容问题
1.事件的种类 1)普通事件 onclick 鼠标单击触发 ondbclick 鼠标双击触发 onmouseup 鼠标抬起触发 onmousedown 鼠标按下触发 onmouseever鼠标移动到元素上触发 onmouseout 鼠标离开元素触发 onmousemove 鼠标在元素上移动时触发 onkeydown 键盘按下触发 onkeyup 键盘抬起触发 onkeypress 键盘按键按下的时候触发 keydown与keypress的区别： 当所有按键按下时，都会触发keydown; 只有字符键、数字键和符号键被按下时，才能触发keypress。 当按键为功能键、方向键只能触发keydown，不触发keypress。 2)表单相关事件 onfocus 元素获取焦点触发 onblur 元素失去焦点触发 onchange 元素失去焦点且内容变化时触发 常用(改变下拉列表的选项) oninput 文本框输入时触发 onpropertychange ie专属， oninput一样 onsubmit 表单提交时触发 onreset 表单重置时触发
3)页面相关事件 onload 页面内容加载完毕时触发 onscroll 页面滚动的时候触发 onresize Window的事件，当浏览器窗口发生变化时触发 oncontextmenu 当右键弹出上下文菜单时触发 改变浏览器大小，宽度大于600像素则背景色为红色，小于600像素背景色为蓝色
网页文档的跟标签: document.documentElement 获取浏览器宽度: document.documentElement.offsetWidths 2.事件绑定 1)以前的事件绑定 div.onclick = function(){ console.log("事件1"); } div.onclick = function(){ console.log("事件2"); } 如果想要两个事件都触发，只能将两个事件的代码封装到各自的函数中，在一个事件中调用
结构: <div> js 为div添加两个单击事件，测试单击时会触发哪个？ 实现两个事件都触发，当单机div时，输出'事件1' '事件2' 2) 如果我希望多个事件都能触发，怎么办？ 新的事件绑定方式： 添加监听事件 语法: 事件源.addEventlistener(事件名，事件处理函数，触发事件的方式); var div=document.getElementById('d1'); div.addEventlistener('click',fun,true/false); 参数说明: 事件:(必须) onclick --> click oninput --> input 使用引号包裹起来 fun:(必须) 事件处理函数 参数3:(可选) 规定以说明方式触发事件，事件句柄是在冒泡阶段执行还是在捕获阶段执行 false是在冒泡阶段执行， true是在捕获阶段执行， 默认是false 注意:IE5-IE9不支持 案例:(03.事件监听.html) 使用事件监听方式实现02的功能实现 3)IE低版本的事件监听 语法： div.attachEvent('事件名'，事件处理函数); 如: div.attachEvent('onclick',fun); attach 绑 detach 解绑 event 事件 参数1: 事件名，使用引号包裹，'onclick' 参数2: 事件处理程序
点击一个按钮，在控制台输出: 'IE的第一个事件' 'IE的第二个事件' 测试在不同的浏览器的支持情况 4）添加兼容标准浏览器和IE低版本浏览器的监听 /* ele:事件源 event:事件名 fun:事件处理函数 ft:事件触发的方式(true/false) */ function addEvent(ele,event,fun,ft){ //标准浏览器会输出undefined //判断是否是IE低版本浏览器 if(ele.attachEvent){ ele.attachEvent('on'+event,fun); }else{ ele.addEventlistener(event,fun,ft); } } addEvent(btn,'click',fun,false); 用所有浏览器兼容的方式实现04案例的功能，并测试。 5)删除事件监听 DOM0级 事件源.on事件类型=null; 如:div.onclick = null; DOM2级别(标准浏览器) 事件源.removeEventListener('事件类型',事件处理函数，true/false); 注意:通过addEventListener添加的监听，只能通过removeEventListener删除，删除时传入的参数与添加时传入的参数一样。 IE低版本浏览器 事件源.detachEvent('on事件类型'，事件处理函数); 注意:解绑时的事件源、事件类型和事件处理函数需要和绑定时相同。 兼容IE和标准浏览器的实现 function removeEvent(ele,event,fun,ft){ if(ele,detachEven){ ele.detackEvent('on'+event,fun); }else{ ele.removeEventListener(event,fun,ft); } } 注意:如果使用匿名函数作为事件处理函数，则这个事件无法删除 如:下面 div.addEventListener('click',function(){ alert(123); },false); 为按钮添加两个单击事件，再删除第二个单击事件 单击按钮后查看控制台的输出信息 添加监听和移除监听需要考虑浏览器的兼容性
转载于:https://www.cnblogs.com/yangjingyang/p/10210464.html
