-
事件对象查看全部
-
移动:onmousemove查看全部
-
鼠标按下，onmousedown查看全部
-
document.documentElement.clientWidth 是指可视窗口的宽度<br> document.documentElement.clientHeight 是指可视窗口的高度 原理：拖动的时候，光标位置在哪，面板位置就在哪，面板的坐标通过左上角的点来确定。 分析并解决Bug 1、确定光标在屏幕中的位置：clientheight/width 2、确定面板的位置：offsetwidth/height 3、面板的移动位置限制：四个方向 4、删除事件，mouseup方法查看全部
-
function getByClass(clsName,parent){//先得到它的名字，可以把它父元素也传过来 var oParent=parent?document.getElementById(parent):document, eles=[], elements=oParent.getElementsByTagName('*');//获取oParent所有元素 for(var i=0;i<elements.length;i++){//获取我们想要的元素存入数组eles[] if(elements[i].className==clsName){ eles.push(elements[i]); } } return eles;//把数组返回 } window.onload=drag; function drag(){ var oTitle=getByClass('login_logo_webqq','loginPanel')[0]; oTitle.onmousedown=fnDown;//当鼠标按下的时候触发fnDown } function fnDown(){ var oDrag=document.getElementById('loginPanel'); document.onmousemove=function(event){ event = event|| window.event; oDrag.style.left=event.clientX+'px';//X坐标 oDrag.style.top=event.clientY+'px';//Y坐标 } }查看全部
-
ClientX,ClientY.查看全部
-
IE中的事件对象： 1.type属性用于获取事件类型 2.srcElement属性用于获取事件的目标 3.cancelBubble属性用于阻止事件冒泡（设置为true表示阻止冒泡，flase表示不阻止冒泡） 4.retrueValue属性用于阻止事件的默认行为（设置为fasle表示阻止事件的默认行为） 把多个事件封装到一个对象里面，再把每个功能封装到对应方法里面，建议将封装的对象写到成单独的js文件，然后在需要的文件中引用。 {getEvent:function(event){ //ie8以前的事件对象为window.event return event?event:window.event; }, getType:function(event){ return event.type; }, getElement:function(event){ //非IE:event.target，IE:event.srcElement return event.target || event.srcElement; }, preventDefault:function(event){ //判断对象方法是否存在时,要将方法当做属性来判断[函数名后不加小括号:if(对象.方法函数)],很多方法没有返回值, //即使有返回值也不一定是布尔值,当if(方法函数())时会出现不可预料的结果 if(event.preventDefault){ event.preventDefault(); //非IE方法处理 }else{ event.returnValue=false; //IE属性处理 } }, stopPropagation:function(event){ if(event.stopPropagation){ event.stopPropagation(); //非IE方法处理 }else{ event.cancelBubble=true; //IE属性处理 } }}查看全部
-
function showGoto(event){ event.preventDefault(); //preventDefault()方法阻止事件的默认行为 event.stopPropagation(); } var eventUtil = { //添加句柄 addHandler:function(element,type,handler){ if(element.addEventListener){element.addEventListener(type,handler,false);} // DOM2级事件处理程序 else if(element.attachEvent){element.attachEvent('on'+type,handler);} // IE事件处理程序 else{element['on'+type]=handler;} // DOM0级事件处理程序 }, //删除句柄 removeHandler:function(element,type,handler){ if(element.removeEventListener){element.removeEventListener(type,handler,false);} // DOM2级事件处理程序 else if(element.detachEvent){element.detachEvent('on'+type,handler);} // IE事件处理程序 else{element['on'+type]=null;} //DOM0级事件处理程序 } } var btn3=document.getElementById("btn3"); var box=document.getElementById("box"); var goTo=document.getElementById("goTo"); eventUtil.addHandler(btn3,'click',showMessage); eventUtil.addHandler(box,'click',showBox); eventUtil.addHandler(goTo,'click',showGoto); </script>查看全部
-
什么是事件对象？在触发DOM上的事件时都会产生一个对象 例：function show(event){……} 参数event接收的就是事件传过来的对象 事件对象EVENT ①DOM中的事件对象 属性 （1）type属性用于获取事件类型 （2）target属性用于获取事件目标 （3）stopPropagation()方法 用于阻止事件冒泡 （4）preventDefault() 方法 阻止事件的默认行为 如果一个div里面有一个button，button和div都绑定了click事件，如果是事件冒泡，那么点击button的时候，首先触发button的处理函数，然后触发div的处理函数。（由内而外） 如果有时候不想冒泡，也就是不希望div的事件被触发，那么需要阻止事件冒泡，用stopPropagation()方法。 如果需要阻止a标签的默认属性跳转，可以使用阻止事件的默认行为preventDefault()方法。 <div id="box"> <input type="button" value="按钮1" id="btn1" /> <input type="button" value="按钮2" id="btn2" /> <input type="button" value="按钮3" id="btn3" /> <a href="https://www.baidu.com/" id="goTo">跳转</a> </div> <script> function showMessage(event){ //参数event接收的就是事件传过来的对象 alert(event.type); //type属性用于获取事件类型，此处输出：click //alert(event.target); //target属性用于获取事件目标，此处输出：[object HTMLInputElement] //alert(event.target.nodeName); //输出元素节点名称：input event.stopPropagation(); //stopPropagation()方法用于阻止事件冒泡 } function showBox(){ alert("这是盒子box"); }查看全部
-
IE11已经删除废除了attachEvent,可用addEventListener； element.onclick===element['onclick'],中括号与点表达相同含义，不能用点连接字符串。 var eventUtil={ addEventHandler:function(element,type,handler){//如这里type用click比较方便 if(element.addEventListner){ element.addEventListner(type,handler,false); }else if(element.attachEvent){ element.attachEvent('on'+type,handler); }else{ element.['on'+type]=handler;//这里element['on'+type]===.element.'on'+type,但是后者的语法错误 } } removeEventHandler:function(element,type,handler){//如这里type用click比较方便 if(element.removeEventListner){ element.removeEventListner(type,handler,false); }else if(element.detachEvent){ element.detachEvent('on'+type,handler); }else{ element.['on'+type]=null;//这里element['on'+type]===.element.'on'+type,但是后者的语法错误 } } }查看全部
-
stopPropagation()阻止冒泡 preventDefault()阻止默认行为查看全部
-
事件处理程序查看全部
-
三种事件处理程序： 一：HTML： 直接把代码写在标签内，写在HTML结构里；或把函数名写在HTML结构里。这种情 况因为HTML和JS高度耦合，不方便修改； 二：DOM0级事件处理程序：把一个函数赋值给一个事件处理程序的属性. 1.先用 getElementById() 取得相应元素,并定义好名称；如：var btn2=documentById("btn2"); 2.再给以上变量添加一个属性并给出该事件的函数，如：btn2.onclick=function(){alert("这是通过DOM0级添加的事件"）；} 3.如要删除该事件则：btn2.onclick=null; 三：DOM2级事件处理程序： 定义了两个方法：addEventListener()和removeEventListener()。 （）里是三个参数：要处理的事件名、作为事件处理程序的函数、布尔值（一般用false，即为冒泡事件处理程序） 例如：1：依然先取出该元素：var btn3=document.ElementById("btn3")； 2：添加事件：btn3.addEventListener("click",showMes,false)(注：要把所有带on 的事件名前的on去掉；showMes是被引用的一个函数名。） 3：删除事件：btn3.removeEventListener("click",showMes,false)（注：添加进去什么样的参数，删除也是一样的参数，而且通过Event添加的事件必须通过Event删除）。 4：一个元素添加多次事件（DOM0级也可以）：btn3.addEventListener("click",function(){alert(this.vaule)},false)(注，这里的this是引用目前这个元素btn3的vaule属性的值，然后被alert弹出）；查看全部
-
事件处理程序 1、HTML事件处理程序(缺点多，已摒弃) 直接在元素上添加事件 <input type="button" onclick="message()">………… function message(){…………} 2、DOM 0级事件： （目前用的较多） 在JS上获取元素对象再绑定事件 (1)通过var btn=document.getElementById('btn')获取元素； (2)通过btn.onclick=function(){alert('Hello')}在元素上添加事件；查看全部
-
直接把事件加载到html结构中的元素上的事件方法：叫做HTML事件 HTML事件的缺点 html事件处理程序： 若添加在js代码中：与js代码紧密耦合，修改需要修改两个地方，这是它的缺点查看全部
举报
0/150
提交
取消