-
DOM0级事件处理判断查看全部
-
笔记测试:returnValue = true,阻止浏览器默认行为查看全部
-
事件流:简单理解为点击按钮时,也点击了按钮所在的容器以及容器至外地的容器一直到整个DOM 事件冒泡:指从事件所在的最具体的元素一直冒泡到最不具体的元素 事件捕获:最不具体的事件应该先接受,最具体的事件应该后接收。事件捕获与事件冒泡相反 直接把事件加载到html结构中的元素上的事件方法:叫做HTML事件 缺点:HTML事件的缺点 HTML和JS 代码紧密耦合在一起 DOM 0级处理事件方法:先取出HTML元素,再对该元素进行事件添加。eg:btn.onclick=function(); btn.onclick=null;//删除事件 DOM2级事件处理程序 定义了两个方法: addEventListener()添加事件 removeEventListener()移除事件 三个参数设置;事件名称,处理方法(函数),布尔值-----冒泡(false)或捕获(true) btn3.addEventListener('click',showMes,false); 注意: 1、若事件名称有on,则需去掉on。onclick -----> click,onmouseover -----> mouseover等等; 2、false 兼容所有浏览器-----事件冒泡流。 3.通过addEventListener添加的事件只能通过removeEventListener来删除。---参数要一样 btn.removeEventListener(参数);//参数必须和btn.addEventListener的参数一致,删除事件 dom0级和dom2级事件处理程序 可以给一个事件绑定多个函数,事件触发的时候会按照绑定顺序执行各个函数。 btn3.addEventListener('click',showMes,false); btn3.addEventListener('click',showMes,function(){alert(this.value);},false); 缺点:IE不支持该事件查看全部
-
事件处理程序 1.HTML事件处理程序 事件直接加到HTML代码中,缺点是HTML和JS代码紧密的耦合在一起,JS和HTML代码需要同时修改,一般被开发人员所摒弃。 2.DOM0级事件处理程序 较传统的方式,把一个函数赋值给一个事件的处理程序属性,用的比较多的方法,简单,具有跨浏览器的优势。 3.DOM2级事件处理程序 DOM2级事件定义了两个方法: 用于处理制定和删除事件处理程序的操作addEvenListener()和removeEventListener(),接收三个参数:要处理的事件名、作为事件处理程序的函数和布尔值,布尔值为false表示支持冒泡事件流,为true表示支持捕获事件流。通过addEventListener()添加的事件只能通过removeEventListener()删除 4.IE事件处理程序 attachEvent() 添加事件 detachEvent()删除事件 接收相同的两个参数:事件处理程序名称和事件处理程序的函数 5.跨浏览器事件处理程序查看全部
-
DOM2和DOM0特点 DOM2和DOM0级共同优点:可以给一个元素上添加多个事件处理程序,或者给一个元素上添加多个事件(如同一个按钮上添加onclick后,再添加onmouseover),会按照顺序执行。<br><br> DOM2级事件处理程序,ie不支持,ie有专用的事件处理程序。<br><br> DOM2级事件处理程序:定义了两个方法---用于处理指定和删除事件处理程序的操作。【addEventListener()---给某元素添加一个事件监听程序】和【removeEventListener()---删除一个事件。必须传入添加事件时相同的参数】(通过前者添加的事件,只能通过后者删除。如obj.click= null无效)<br><br> 接收三个参数:要处理的事件名(都要去掉前缀on,如onclick—>click),作为事件处理程序的函数和布尔值。<br> 布尔值 false 事件冒泡 true 事件捕获,一般用false最大兼容浏览器。 在事件被触发的函数里面this可以引用被触发的元素。例如:btn.addEventListener('click',function(){alert(this.value),false});this即指btn DOM0级事件有个重大的缺点就是,不像MOD2级事件那样,你只可以指定一个DOM0级事件。DOM0级事件会转化元元素的属性,那意味着当指定多个的内联事件时,它之前所指定的内联事件会被覆盖掉: var element = document.getElementById('testing'); element.onclick = function () { alert('did stuff #1'); }; element.onclick = function () { alert('did stuff #2'); }; 当点击这个元素后,你只可以看到 "Did stuff #2",原因是第二个值覆盖了第一个指定的 onclick 属性,同时,会把 HTML 中 onclick 属性也覆盖掉。 使用DOM2级事件,理论上你可以向某个元素加入无数的事件。查看全部
-
DOM 0级处理事件方法:先取出HTML元素,再对该元素进行事件添加。eg:btn.onclick=function();查看全部
-
//跨浏览器 var eventUtil = { //添加句柄 addHandler : function(element,type,handler){ //DOM 2级处理 if(element.addEventListener){ element.addEventListener(type,handler,false); //IE8以下 兼容性 }else if(element.attachEvent){ element.attachEvent('on'+type,handler); //DOM 0 级处理 ----老版本不支持2级,也不支持IE模式 }else{ element['on'+type] = handler; //在js中,所有连接属性的,用点的都可以用中括号[] } }, //删除句柄 removeHandler : function(element,type,handler){ //DOM 2级处理 if(element.removeEventListener){ element.removeEventListener(type,handler,false); //IE8以下 兼容性 }else if(element.detachEvent){ element.detachEvent('on'+type,handler); //DOM 0 级处理 ----老版本不支持2级,也不支持IE模式 }else{ element['on'+type] = null; //在js中,所有连接属性的,用点的都可以用中括号[] } } } var btn = document.getElementById('btn'); //使用 eventUtil.addHandler(btn,'click',function(){alert(123)});查看全部
-
element.onclick === element["onclick"]查看全部
-
漏掉了在 onload最后的 }查看全部
-
html和javascript紧密耦合——弊端查看全部
-
ie中的事件对象查看全部
-
事件处理程序2查看全部
-
DOM0级事件处理程序 (用得比较多):先把元素取出来,然后为其属性添加一个事件的方法叫DOM0级处理程序。 它是一种较传统的方式:把一个函数赋值给一个事件处理程序的属性。 优点:简单,跨浏览器的优势 var btn2=document.getElementById("btn2");---先获取出元素,定义对象 //取得btn2按钮对象 btn2.onclick=function(){alert('这是通过DOM0级添加的事件!')}----让 事件以对象的属性 的形式出现。 //给btn2添加onclick属性查看全部
-
键盘事件 onkeydown:按下键盘上任意键时触发,(按住不放会重复触发) onkeypress:按下键盘上的字符键时触发 onkeyup:释放键盘上的键时触发 keyCode:event.keyCode,获得当前按下键盘上按键的键码,回车键为13 定时器: setInterval(function(){},50):每隔50ms执行一次函数 clearInterval(定时器名):清除定时器,再加定时器前需清除原来的定时器,防止多个定时器叠加 随机数: Math.random():生成0-1的随机数 Math.floor():向下取整查看全部
-
事件冒泡查看全部
举报
0/150
提交
取消