-
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不支持DOM2级事件查看全部
-
键盘事件://keyDown:若按住键盘不放,会重复执行 document.onKeyUp = function(){} //按下键盘松开时执行 event.keyCode : 按下键盘的编码; //回车键的code为13查看全部
-
Math.floor(Math.random()*dataArr.length); //生成0到(dataArr数组的长度-1)之间的随机数查看全部
-
在页面事件的赋值过程中,应该注意事件冒泡的发生,对同一个元素的不同级别赋值相同的事件操作,可能会覆盖低层元素的事件,(先执行低层的,冒泡到上层,又执行上层的,因此只有上层的事件操作会产生效果),适当地使用stopProgation(非IE) cancelBubble(IE)阻止事件冒泡。 document.onclick是代表在页面的任何地方点击事件。查看全部
-
原理:拖动的时候,光标位置在哪,面板位置就在哪,面板的坐标通过左上角的点来确定。 分析并解决Bug 1、确定光标在屏幕中的位置:clientheight/width 2、确定面板的位置:offsetwidth/height 3、面板的移动位置限制:四个方向 4、释放鼠标,卸载事件,mouseup方法 要求面板的left和top坐标,用到offsetLeft和offsetTop属性。 有三种方法能够确定浏览器窗口的尺寸(浏览器的视口,不包括工具栏和滚动条)。 对于Internet Explorer、Chrome、Firefox、Opera 以及 Safari: window.innerHeight - 浏览器窗口的内部高度 window.innerWidth - 浏览器窗口的内部宽度 对于 Internet Explorer 8、7、6、5: document.documentElement.clientHeight document.documentElement.clientWidth 或者 document.body.clientHeight document.body.clientWidth查看全部
-
js ie10以下版本不支持document.getElementsByClassName js封装getClass方法,获取class //封装一个getByClass的方法 function getByClass(clsName,parent){ //clsName类名 必须有 写在前面,parent父元素 可选 写在后面 var oParent=parent?document.getElementById(parent):document, eles=[], //定义一个变量为数组(因为class是可重复的,上面取到的class是个数组) elements=oParent.getElementsByTagName('*'); for(var i=0,l=elements.length;i<l;i++){ //可以同时初始化多个变量 if(elements[i].className==clsName){ eles.push(elements[i]); } } return eles; } push() 方法可向数组的末尾添加一个或多个元素,并返回新的长度 //onload flag函数会在页面或图像加载完成后立即发生 window.onload=drag; onmousedown:在用户按下任何鼠标按钮时都能触发 onmousemove:当鼠标指针在元素内部移动时重复地触发 实现随鼠标拖动,需要让窗口的坐标随着鼠标移动,鼠标的坐标x,y 保存在时间的clientX和clientY两个属性中。 可以跟着鼠标动的元素,必须是绝对定位的,position:absolute 窗口和鼠标的位置同步;element.style.left/top=clientX+'px';,查看全部
-
还是不熟练啊一个小错误耽误了这么多时间 多敲代码,加油。查看全部
-
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不支持DOM2级事件查看全部
-
把多个事件封装到一个对象里面,再把每个功能封装到对应方法里面,建议将封装的对象写到成单独的js文件,然后在main文件中引用。 var eventUtil={ //添加句柄 addHandler:function(){}, ..... getEvent:function(event){ return event?event:window.event; //满足不同浏览器 ie8以前的事件对象为window.event } } window.onload=function(){ var box=document.getElementById('box'); eventUtil.addHandler(box,'click',function(e){ e=eventUtil.getEvent(e); // 等价e=e||window.event alert(eventUtil.getElement.nodeName); }); ... } window.onload=function(){} //当页面加载完成后会执行function()里面的代码 if里面的判断以属性的形式判断,不要写成方法查看全部
-
IE事件处理程序: attachEvent(type,hander)添加事件 事件类型要加on 如btn.attachEvent('onclick',showmsg); detachEvent()删除事件 参数:名称,函数 不使用第三个参数的原因:IE8以及更早的浏览器版本只支持事件冒泡! 兼容函数代码: var elementUtil={ addHandler:function(element,type,handler){ if(element.addEventListener){ element.addEventListener(type,handler,false); }else if(element.attachEvent){ element.attachEvent('on'+type,handler); }else{ element['on'+type]=handler;// } } };查看全部
-
IE11下使用取消了.attachEvent;使用.addEventListener IE7,8 可以用.attachEvent ie11已经删除 部分API 功能,其中就包括 `attachEvent`;查看全部
-
IE中的事件对象(IE中事件对象为window.event) event=event || window.event 1. type属性 用于获取事件类型 2. srcElement属性 用于获取事件目标 event.target || event.srcElement 3. cancelBubble属性 用于阻止事件冒泡。( cancelBubble = true阻止 false不阻止 ) 4. returnValue属性 阻止事件的默认行为。( returnValue = false阻止 ) 注意:非IE是event,IE8以下是window.event event=event || window.event查看全部
-
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不支持该事件查看全部
-
什么是事件对象?在触发DOM上的事件时都会产生一个对象 事件对象EVENT DOM中的事件对象中的常用属性 (1). type属性用于获取事件类型 ---click (2). target属性用于获取事件目标(元素) --[object HTMLInputElement] target.nodeName事件目标的节点名称----input (3). stopPropagation()方法 用于阻止事件冒泡 ---- 如果一个div里面有一个button,button和div都绑定了click事件,如果是事件冒泡(由内而外),那么点击button的时候,首先触发button的处理函数,然后触发div的处理函数。 如果有时候不想冒泡,也就是不希望div的事件被触发,那么需要阻止事件冒泡。 (4). preventDefault() 方法 阻止事件的默认行为 如果需要阻止a标签的默认属性--跳转,可以使用阻止事件的默认行为preventDefault()方法 <a href='#'>超链接</a>查看全部
-
2. DOM0级事件处理程序 (用得比较多) 较传统的方式:把一个函数赋值给一个事件处理程序的属性。 优点:简单,跨浏览器的优势 var btn2=document.getElementById("btn2");---先获取出元素,定义对象 //取得btn2按钮对象 btn2.onclick=function(){alert('这是通过DOM0级添加的事件!')}----让 事件以对象的属性 的形式出现。 //给btn2添加onclick属性 btn2.onclick=null;-----删除onclick属性。查看全部
举报
0/150
提交
取消