-
事件对象查看全部
-
键盘事件查看全部
-
addEventListener属于dom不支持IE，IE需要用attachEvent（）参数需要加on查看全部
-
事件对象event IE中的事件对象 type属性：获取事件类型 srcElement属性：获取事件的目标 cancelBubble属性：阻止事件冒泡，设置true表示阻止，false表示不阻止 returnValue属性：阻止事件的默认行为，设置false表示阻止事件的默认行为查看全部
-
obtn.addEventListener('click',showMes,false)三个参数：事件名称，执行函数，布尔值 ture/false区别ture一个冒泡事件，false：捕获一个事件流查看全部
-
事件对象：触发DOM上的事件时都会产生一个对象 事件对象event： 1.DOM中的事件对象： type属性：标准event属性，获取事件类型 target属性：标准event属性，获取事件目标 stopPropagation()方法：标准event方法，阻止事件冒泡 preventDefault()方法：标准event方法，阻止事件的默认行为查看全部
-
dom查看全部
-
<body> <div id="box"> <input type="button" value="按钮" id="btn3"> </div> <script type="text/javascript"> function showMes(){ alert('Hello World!'); } var btn3 = document.getElementById('btn3'); //跨浏览器事件处理程序 var eventUtil = { //添加句柄 addHandler:function(element,type,handler){ if (element.addEventListener) { //DOM2级事件处理程序判断 element.addEventListener(type,handler,false); } else if(element.attachEvent){ //IE事件处理程序判断 element.attachEvent('on'+type,handler); } else{ //DOM0级事件处理程序判断（兼容所有浏览器） element['on'+type] = handler; //不能写成element.'on'+type，语法错误。element[onclick]等价于element.onclick }}, //删除句柄 removeHandler:function(element,type,handler){ if (element.removeEventListener) { element.removeEventListener(type,handler,false); } else if(element.detachEvent){ element.detachEvent('on'+type,handler); } else{ element['on'+type] = null; }}} eventUtil.addHandler(btn3,'click',showMes); //调用添加句柄测试 eventUtil.removeHandler(btn3,'click',showMes); //调用删除句柄测试 </script> </body>查看全部
-
index.html代码如下： <html> <head> <title>事件流</title> <meta charset="utf-8"> <script src="js/event.js"></script> <script src="js/script.js"></script> </head> <body> <div id="box"> <input type="button" value="按钮" id="btn" /> <a href="www.imooc.com" id="go">跳转</a> </div> </body> </html> script.js代码如下： window.onload=function(){ var go=document.getElementById('go'), box=document.getElementById('box'), btn=document.getElementById('btn'); eventUtil.addHandler(box, 'click',function(){ alert('我是整个父盒子'); }); eventUtil.addHandler(go, 'click',function(e){ e=eventUtil.getEvent(e); alert(eventUtil.getElement(e).nodeName); eventUtil.preventDefault(e); eventUtil.stopPropagation(e); }); eventUtil.addHandler(btn, 'click',function(){ e=eventUtil.getEvent(e); alert(eventUtil.getElement(e).nodeName); eventUtil.stopPropagation(e); }); }查看全部
-
1、DOM中获取操作事件的对象 （1）属性 ①type：获取事件类型 ②target：获取事件目标（加载在哪里） target.nodeName：获取事件目标的节点名称 ③bubbles、canselable （2）方法 ①stopPropagation()：阻止事件冒泡 ②preventDefault()：阻止事件的默认行为 如：<a href='#'>超链接</a>有个默认行为：跳转 2、IE中的事件对象 （1）属性 ①type：获取事件类型 ②srcElement：获取事件目标 ③cancelBubble=true：阻止事件冒泡 ④returnValue=false：阻止事件的默认行为查看全部
-
<div id="box"> <input type="button" value="按钮" id="btn" /> <a href="www.imooc.com" id="go">跳转</a> </div> <script> function showMes(event){ alert(event.type); alert(event.target); alert(event.target.nodeName); event.sropPropagation(); } function showBox(){ alert('这是放按钮的盒子box'); } function showGoto(event){ event.stopPropagation(); event.preventDefault(); } var btn=document.getElementById('btn'); var box=document.getElementById('box'); var go=document.getElementById('go'); var eventUtil={ //添加句柄 addHandler:function(element,type,handler){ if(element.addEventListener){ element.addEventListenter(type,handler,false); }else if(element.attachEvent){ element.attachEvent('on'+type,handler); }else{ element['on'+type]=handler; } }; eventUtil.addHandler(btn, 'click',showMes); eventUtil.addHandler(box, 'click',showBox); eventUtil.addHandler(go, 'click',showGoto); </script>查看全部
-
1、DOM中获取操作事件的对象 （1）属性 ①type：获取事件类型 ②target：获取事件目标（加载在哪里） target.nodeName：获取事件目标的节点名称 ③bubbles、canselable （2）方法 ①stopPropagation()：阻止事件冒泡 ②preventDefault()：阻止事件的默认行为 如：<a href='#'>超链接</a>有个默认行为：跳转查看全部
-
把事件封装在对象里面，把功能封装在方法里面查看全部
-
1、恰当的使用能力检测 （1）即测试了能用addEventListenter的就用addEventListenter，能用attachEvent的就用attachEvent。 2、在这里建议使用封装，把这段代码封装起来。如下： var eventUtil={ //添加句柄 addHandler:function(element,type,handler){ if(element.addEventListener){ //DOM2级 element.addEventListenter(type,handler,false); }else if(element.attachEvent){ //IE element.attachEvent('on'+type,handler); }else{ //DOM0级 element['on'+type]=handler; //在JS中所有用点“.”的地方都可以用中括号“[]”， //如element.onclick===element['onclick'] } }, //删除句柄 removeHandler：function(element,type,handler){ if(element.romoveEventListener){ element.romoveEventListenter(type,handler,false); }else if(element.detachEvent){ element.detachEvent('on'+type,handler); }else{ element['on'+type]=null; } } }; eventUtil.addHandler(btn, 'click',showMes); eventUtil.removeHandler(btn, 'click',showMes);查看全部
-
1、DOM2级事件定义了两个方法：用于处理指定和删除事件处理程序的操作 （1）一个添加方法addEventlistener() （add：添加，Event：事件，Listener：监听） （2）一个删除方法removeEventListener() （remove：删除，Event：事件，Listener：监听） ①参数必须跟定义addEventListener 一样， ②通过addEventListener定义的只能用removeEventListener删除 （3）优点 ①可以给一个节点添加多个事件处理程序，处理程序的顺序会按照他们的顺序来执行 2、接受三个参数 ①要处理的事件名 ②作为事件处理程序的函数或接口（不加on，如：click） ③布尔值（一般设置为false） ture：表示在捕获阶段调用事件处理程序 false：表示在冒泡阶段调用事件处理程序 3、例如 <html> <body> <div id="box"> <input type="button" value="按钮" id="btn" /> </div> <script> function showMes(){ alert('hello'); } var btn=document.getElementById('btn'); //取得btn按钮对象 btn.addEventListener('click',showMes,false); //不加on btn.addEventListener('click',function(){ alert(this.value); //this引用被触发的元素 },false); btn.removeEventListener('click',showMes,false); //删除事件 </script> </body> </html>查看全部
举报
0/150
提交
取消