网站开发框架参考文献,网站备案 地址,全国网站建设哪家专业,理财公司网站建设方案前言 本文大概整理下绑定事件的几种方式#xff0c;兼容IE8- 的方式#xff08;如果需要的话#xff09;#xff0c;事件委托#xff0c;阻止传播#xff0c;取消默认行为#xff0c;event对象等。 之前做的多是手机端页面#xff0c;监听事件也一直是 addEventListene…前言 本文大概整理下绑定事件的几种方式兼容IE8- 的方式如果需要的话事件委托阻止传播取消默认行为event对象等。 之前做的多是手机端页面监听事件也一直是 addEventListener 现代浏览器基本都支持addEventListener 除了万恶的IE8及更低版本IE。虽说不用太管IE8了个人愚见但是还是有必要整理下之前兼容性的处理方式
HTML事件处理 在HTML标签中直接给属性设置处理程序。HTML中加入了JS代码因为需要行为、样式、结构分离这种方式现在已经淘汰就不深入探究了。 1 button onclickalert(HTML事件处理)点我/button DOM0级事件处理 通过元素对象的事件属性来绑定处理程序。先看栗子 a hrefhttp://www.baidu.com classa1快点击我/a document.querySelector(.a1).onclick function(){ //绑定事件alert(DOM0绑定--a);} 先获取到元素a在给元素的点击事件属性onclick绑定处理程序。 这种方式的特点 1、简单易用兼容性良好基本所有浏览器都支持 2、只能绑定一个处理程序重复绑定会覆盖。如果给a的onclick属性再绑定一个处理程序那么现在的这个就会被覆盖掉 3、只会在冒泡阶段触发 取消绑定也非常简单直接设为null就可以了。 document.querySelector(.a1).onclick null; //取消绑定 DOM2级事件处理 通过事件方法来绑定和解绑处理程序。同样看个栗子 a hrefhttp://www.baidu.com classa2点击我/a document.querySelector(.a2).addEventListener(click, function(e){ //绑定事件1alert(DOM2绑定--a2 -- 1)}, false)document.querySelector(.a2).addEventListener(click, function(e){ //绑定事件2alert(DOM2绑定--a2 -- 2)}, false) addEventListener(eventName,listener,useCapture) 方式可以为事件绑定处理程序第一个参数为事件类型不带on第二个参数是处理程序第三个参数可指定哪个阶段触发false对应冒泡阶段、true对象捕获阶段默认false部分低版本浏览器要求这个参数不能为空所以最好还是带上。 这种方式的特点 1、可为同一个事件绑定多个处理程序会依次触发。多次绑定同一个处理程序只会生效一次 2、可指定触发的阶段捕获阶段或者冒泡阶段 3、兼容IE8 - 之外的其他浏览器 解绑的方式为Element.removeEventListener(eventName,listener,useCapture);和绑定的用法一致 IE8- 有一套自己的事件处理方法 绑定Element.attachEvent(eventNameWithOn,listener) 解绑Element.detachEvent(eventNameWithOn,listener) document.querySelector(.a2).attachEvent(onclick, function(e){alert(DOM2绑定--a2 -- 2)}) 特点 1、事件类型带on (egonclick) 2、只能在冒泡阶段触发 3、IE10 - IE5都支持该方法
兼容性处理方式 两种方式的差别在事件类型和第三个参数所以可以做一些处理封装兼容性处理的方式 //通用方式//绑定function addEvent(targetElement,eventName,listener,useCapture){if(targetElement.addEventListener){ targetElement.addEventListener(eventName,listener,useCapture);}else if(targetElement.attachEvent){targetElement.attachEvent(on eventName,listener);}else {targetElement[on eventName] listener;}}//解绑function removeEvent(targetElement,eventName,listener,useCapture){if(targetElement.addEventListener){targetElement.removeEventListener(eventName,listener,useCapture);}else if(targetElement.attachEvent){targetElement.detachEvent(on eventName,listener);}else {targetElement[on eventName] null;}} 测试一下使用在IE8及其他浏览器都可以正常使用。 addEvent(document.querySelector(.a2),click,test,false)function test(e){alert(addEvent then removeEvent!);removeEvent(document.querySelector(.a2),click,test,false); //取消绑定} Event对象 不同的方式获取event对象的方式也不同 attachEvent绑定 通过 window.event获取event对象 其他方式DOM0和addEventListener处理函数传参直接获取 function test(e){ //兼容性的方式e e || window.event; //event对象} attachEvent绑定的方式处理程序内部this指向window。想要获取元素对象 可以通过 window.event.srcElement 其他方式的this指向触发元素 。 同样的也可以通过 event.target获取 e e || window.event; //event对象var target e.target || e.srcElement; //触发对象 阻止传播和取消默认行为 通过event对象的方式取消默认行为 event.preventDefault() //其他浏览器 event.returnValue false //IE8- DOM0级绑定的 还可以直接 return false 来取消默认行为所有浏览器都支持 event对象阻止传播 event.stopPropagation() //其他浏览器 event.cancelBubble true //IE8 - 一般可以这样写 e.stopPropagation ? e.stopPropagation() : e.cancelBubble true; //阻止传播e.preventDefault ? e.preventDefault() : e.returnValue false; //取消默认行为 事件委托 如果多个元素的处理程序类同如果每个都绑定一次会很繁琐和低效这时可以利用冒泡的原理他们都会冒泡到父元素直接在父元素上绑定事件。即为事件委托 section classitem item-3button classbtn1点击我1/buttonbutton classbtn1点击我2/buttonbutton classbtn1点击我3/button/sectionaddEvent(document.querySelector(.item-3),click,function(e){e e || window.event; //event对象var target e.target || e.srcElement; //触发对象if(target.nodeName BUTTON){alert(target.innerText);}}) 本例中想要实现点击按钮输出按钮文字。如果给三个按钮分别绑定事件会不会太傻。所以直接绑定了父元素事件触发时判断触发对象是否是button标签如果是则输出文字。 更多专业前端知识请上
【猿2048】www.mk2048.com
