-
事件冒泡讲解得非常到位,清淅!老师讲课质量真好,继续关注!查看全部
-
事件封装在对象中,功能封装在方法中。 单独存成文件 做Util工具 在IE中: 几乎都是属性存在的 1) event || window.event (IE 8以前) 2) srcElement属性: 用于获取目标 event.target || event.srcElement 3) cancleBubble属性: 用于阻止事件冒泡 4) returnValue属性: 用于阻止事件的默认行为 false表示阻止事件的默认行为查看全部
-
跨浏览器的事件处理程序
var eventUtil={ //添加句柄 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;//DOM0级事件处理程序判断 } }, //删除句柄 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;//DOM0级事件处理程序判断 } } } eventUtil.addHandler(btn3,'click',showMes); eventUtil.removeHandler(btn3,'click',showMes);
查看全部 -
跨浏览器解决——》添加句柄:
这里为什么添加句柄?
句柄一般什么时候使用
句柄是什么?
句柄的格式一般如何?
调用的格式?
查看全部 -
1、任何能够跟着鼠标移动的东西 都要有一个前提:绝对定位
2、鼠标事件都是在浏览器窗口中的特定位置上发生的。这个位置信息保存在事件的clientX和clientY属性中。所有浏览器都支持这两个属性,它们的值表示事件发生时鼠标指针在视口中的水平和垂直坐标。不包括页面滚动的距离。
3、js ie10以下版本不支持document.getElementsByClassName
4、js封装getClass方法,获取class
5、实现随鼠标拖动,需要让窗口的坐标随着鼠标移动,鼠标的坐标保存在时间的clientX和clientY两个属性中。
6、onmousedown鼠标按下 窗口和鼠标的位置同步;
element.style.left/top=clientX/Y+'px';
onmousemove当鼠标指针在元素内部移动时重复地触发2.在指定区域(整个QQ面板)按下——页面随光标移动,即页面的坐标与光标坐标一致——释放鼠标是停止移动
3.clientX与clentY能够获取鼠标的光标位置;onmousedown鼠标按下事件;移动要用到onmousemove事件,当鼠标指针在元素内部移动时重复的触发;clientX与clentY是event这个对象的属性,非ie用event,ie用window.event
查看全部 -
IE中的事件对象
(非IE的事件对象用event,IE8之前用window.event)
IE中的事件对象
1.type属性 用于获取事件类型
2.srcElement属性 用于获取事件目标
IE和其它浏览器兼容:
event = event||window.event (IE8之前的浏览器用window.event)
var ele = event.target ||event.srcElement
3.ancelBubble属性 用于阻止事件冒泡。
true表示阻止冒泡,false表示不阻止冒泡。
4.returnValue属性 用于阻止事件的默认行为。注意:判断不要判断方法,判断属性。例如:if(event.propagation)设置false为阻止事件的默认行为。(ie中基本都是属性,没有方法)
查看全部 -
DOM2级事件处理程序
DOM2级事件处理程序
一、定义了两个方法:
addEventListener()添加事件
removeEventListener()移除事件
btn3.addEventListener('click',showMes,false);
三个参数设置:事件名称,处理方法(函数),布尔值-----冒泡(false)或捕获(true)
二、注意:
1.事件名称全都不加on了,onclickclick——事件名称要加引号“”
2.处理方法中的函数只写函数名,不加括号——不加括号才是函数,加了括号是运行函数
3.false 兼容所有浏览器-----事件冒泡流——布尔值是不需要加引号“”的
4.通过addEventListener添加的事件只能通过removeEventListener来删除——参数要一样
btn.removeEventListener(参数);//参数必须和btn.addEventListener的一致,删除事件
三、其他
dom0级和dom2级事件处理程序 可以给一个事件绑定多个函数,事件触发的时候会按照绑定顺序执行各个函数。
btn3.addEventListener('click',showMes,false);
btn3.addEventListener('click',showMes,function(){alert(this.value);},false);
//不可以这样添加两个函数,怀疑其本意为:
//Btn3.addEventListener('click',showmessage1/function(){alert("这是匿名函数")},false);
四、缺点:IE不支持该事件查看全部 -
DOM0级事件处理程序 (用得比较多):先把元素取出来,然后为其属性添加一个事件的方法叫DOM0级处理程序。
它是一种较传统的方式:把一个函数赋值给一个事件处理程序的属性。
优点:简单,跨浏览器的优势
var btn2=document.getElementById("btn2");---先获取出元素,定义对象 //取得btn2按钮对象
btn2.onclick=function(){alert('这是通过DOM0级添加的事件!')}----让 事件以对象的属性 的形式出现。 //给btn2添加onclick属性查看全部 -
HTML事件处理程序(现在不建议使用了):事件直接加在HTML代码中
缺点:HTML和js代码高耦合,如果修改,就要修改两个地方--HTML元素内和script函数。查看全部 -
DOM2级事件处理程序
DOM2级事件处理程序 一、定义了两个方法: addEventListener()添加事件 removeEventListener()移除事件 btn3.addEventListener('click',showMes,false); 三个参数设置:事件名称,处理方法(函数),布尔值-----冒泡(false)或捕获(true) 二、注意: 1.事件名称全都不加on了,onclick→click——事件名称要加引号“” 2.处理方法中的函数只写函数名,不加括号——不加括号才是函数,加了括号是运行函数 3.false 兼容所有浏览器-----事件冒泡流——布尔值是不需要加引号“”的 4.通过addEventListener添加的事件只能通过removeEventListener来删除——参数要一样 btn.removeEventListener(参数);//参数必须和btn.addEventListener的一致,删除事件 三、其他 dom0级和dom2级事件处理程序 可以给一个事件绑定多个函数,事件触发的时候会按照绑定顺序执行各个函数。 btn3.addEventListener('click',showMes,false); btn3.addEventListener('click',showMes,function(){alert(this.value);},false); //不可以这样添加两个函数,怀疑其本意为: //Btn3.addEventListener('click',showmessage1/function(){alert("这是匿名函数")},false); 四、缺点:IE不支持该事件
查看全部 -
1.DOM2级事件处理程序: DOM2级事件定义了两个方法,用于处理指定和删除事件处理程序的操作: addEventLisener()(添加事件监听程序)和removeEventListner()。 输入参数:要处理的事件名(如'click'事件(去掉'on'))、作为事件处理程序的函数、布尔值(false--冒泡阶段--最大限度兼容个浏览器)。 2."this"--引用被触发的元素。 3.IE8不支持该DOM2事件处理程序。查看全部
-
DOM0级事件处理程序 (用得比较多),先把元素取出来,然后为其属性添加一个事件的方法叫DOM0级处理程序。 较传统的方式:把一个函数赋值给一个事件处理程序的属性。 优点:简单,跨浏览器的优势 var btn2=document.getElementById("btn2");---先获取出元素,定义对象 //取得btn2按钮对象 btn2.onclick=function(){alert('这是通过DOM0级添加的事件!')}----让 事件以对象的属性 的形式出现。 //给btn2添加onclick属性 btn2.onclick=null;-----删除onclick属性,即卸载事件查看全部
-
事件处理程序: 1,HTML事件处理程序; 2,DOM0级事件处理程序; 3,DOM2级事件处理程序;(定义了两个方法:用于处理指定和删除事件处理程序的操作addEventListener()和removeEventListener()。他们都接受三个参数:要处理的事件名、作为事件处理程序的函数、布尔值) 4,IE事件处理程序;(attachEvent()添加事件,DetachEvent()删除事件。他们接受相同的两个参数:事件处理程序的名称和事件处理程序的函数) 5,跨浏览器的事件处理程序;查看全部
-
坚持做到没漏洞查看全部
-
拖拽->鼠标跟随 1、绑定鼠标点击事件 2、获取鼠标坐标:clientX clientY (所有浏览器都支持此属性) 3、为容器元素绑定onmousemove (表明可拖拽元素只在容器元素内可拖拽) 4、将拖拽元素设置成绝对定位 5、在onmousemove中改变拖拽元素的left、top (注意left、top的算法) 6、设置left、top限定,禁止元素拖出窗口 7、当前浏览器窗口宽度document.documentElement.clientWidth或document.body.clientWidth 8、拖拽元素绑定onmouseup事件,在此事件中注销onmousemove事件,完成元素拖拽的释放效果 注意可以把left、top理解成x轴、y轴查看全部
举报