-
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>下拉菜单</title> <style type="text/css"> .sjx{ position: absolute; left:160px; top:9px; width:0; border-top:8px solid #a9c0b4; border-left:8px solid white; border-right:8px solid white; cursor: pointer; } body,ul,li{ margin:0; padding:0; font-size:13px;} ul,li{list-style:none;} ul{display:none;} #divselect{width:186px; margin:80px auto; position:relative; z-index:10000;} #divselect cite{width:150px; height:24px;line-height:24px; display:block; color:#807a62; cursor:pointer;font-style:normal; padding-left:4px; padding-right:30px; border:1px solid #333333;} #divselect ul{width:184px;border:1px solid #333333; background-color:#ffffff; position:absolute; z-index:20000; margin-top:-1px; display:none;} #divselect ul li{height:24px; line-height:24px;} #divselect ul li a{display:block; height:24px; color:#333333; text-decoration:none; padding-left:10px; padding-right:10px;} </style> <script type="text/javascript"> window.onload=function(){ var box=document.getElementById('divselect'), sjx=document.getElementById('sjx'), menu=box.getElementsByTagName('ul')[0], lis=box.getElementsByTagName('a'), cite=box.getElementsByTagName('cite')[0]; index=-1; // 点击三角时 sjx.onclick=function(event){ // 执行脚本 event=event||window.event; event.stopPropagation(); menu.style.display='block'; } // 滑过滑过、离开、点击每个选项时 for(var i=0,l=lis.length;i<l;i++){ lis[i].onmouseover = function () { this.style.background = '#a9c0b4'; } lis[i].onmouseout = function () { this.style.background = '#FFF'; } lis[i].onclick=function(){ cite.innerHTML=this.innerHTML; } } // 键盘事件 var index=-1; document.onkeyup=function(event){ for(var i=0,l=lis.length;i<l;i++){ lis[i].style.background = '#FFF'; } //向下 if(event.keyCode==40){ index++; if(index>=0&&index<=4){ lis[index].style.background = '#a9c0b4'; } else{ index=4; lis[index].style.background = '#FFF'; } } //向上 else if(event.keyCode==38){ index--; if(index>=0&&index<=4) { lis[index].style.background = '#a9c0b4'; } else{ index=0; lis[index].style.background = '#a9c0b4'; } } //回车 else if(event.keyCode==13){ cite.innerHTML=lis[index].innerHTML; } console.log(index); } // 点击页面空白处时 document.onclick=function(){ // 执行脚本 menu.style.display='none'; } } </script> </head> <body> <div id="divselect"> <cite>请选择分类</cite><div class="sjx"id="sjx"></div> <ul> <li id="li"><a href="javascript:;" selectid="1">ASP开发</a></li> <li><a href="javascript:;" selectid="2">NET开发</a></li> <li><a href="javascript:;" selectid="3">PHP开发</a></li> <li><a href="javascript:;" selectid="4">Javascript开发</a></li> <li><a href="javascript:;" selectid="5">Java特效</a></li> </ul> </div> </body> </html>查看全部 -
ie 中的事件对象
1 type属性用于获取事件类型
2 srcElement属性 用于获取事件的目标
3 cancelBubble属性 用于阻止事件冒泡 设置为true表示阻止冒泡 设置为false表示不阻止冒泡
4 returnValue 属性 用于阻止事件的默认行为 设置为false 表示阻止事件的默认行为
查看全部 -
1.function evtHandler(e) { //使用e可以获取事件对象且兼容FF、Chrome、IE，为啥要用e || window.event进行判断？ } //全局event对象在FF下不能获取，属于浏览器兼容性问题，在IE6.0以及chrome下都可以获取 2.cancelBubble 阻止冒泡 IE查看全部
-
跨浏览器的事件处理程序
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、对于HTML事件来说，只能添加一个事件程序，且与JS的耦合过密，不利于后期的维护。
2、对于DOM0级事件，可以添加多个事件程序，但是只会执行最后一个事件。
3、对于DOM2级事件，同样可以添加多个事件程序，并且从上到下按顺序执行
DOM2级事件定义了两个方法：
用于处理指定和删除事件程序的操作，addEventListener（）和removeEventListener（）。
接收三个参数：要处理的事件名、作为事件处理程序的函数和布尔值。
查看全部 -
dom中和ie中的event属性，比如获取dom中的事件目标event.target,在ie中则要用event.srcElement
查看全部 -
把事件封装在对象里面，把功能封装在方法里面。
查看全部 -
1.首先分析实现原理；然后分析要取出的对象，进行取出；再给对象绑定事件；
2.分析各种事件，并对其件进行函数封装；
3.块的里面的文字（状态、下）不见了：用负缩进把他们搞到窗口之外了，当代码注释使用。
4.在适当的地方阻止事件冒泡：
ul父元为div，点击li时希望ul隐藏，点击div时希望其显示，在点击li后会冒泡到div ,因而需要阻止冒泡；
注意区分onmousedown和onclick，只能阻止相对应类型事件。
重点：利用事件冒泡实现切换状态菜单；当一个块内包含众多事件时，必须要注意到事件冒泡的影响。
5.在其他任何地方点击，要使列表隐藏：document.onclick是代表在页面的任何地方点击事件。
document下的子元素还有一个onclick事件，所以要注意事件冒泡的影响；查看全部 -
console.log
主要是方便你调式javascript用的,你可以看到你在页面中输出的内容。
相比alert他的优点是：
他能看到结构化的东西，如果是alert，淡出一个对象就是[object object],但是console能看到对象的内容。
console不会打断你页面的操作，如果用alert弹出来内容，那么页面就死了，但是console输出内容后你页面还可以正常操作。
console里面的内容非常丰富，你可以在控制台输入：console，然后就可看到它有网页的各种提示。
键盘事件
onkeydown：按下键盘上任意键时触发，（按住不放会重复触发）
onkeypress：按下键盘上的字符键时触发
onkeyup：释放键盘上的键时触发,（即按住不会重复触发）
keyCode：event对象的keyCode属性用于得到键盘对应键的键码值，回车键为13。
定时器：
注意：使用timer前一定要进行初始化=====>var timer[];
timer=setInterval(function(){},50)：每隔50ms执行一次函数
clearInterval(定时器名)：清除定时器，再加定时器前需清除原来的定时器，防止多个定时器叠加
随机数：
Math.random()：生成0-1的随机数
Math.floor()：向下取整查看全部 -
var arr = ['三星手机','小米1','小米2','苹果','魅族','50元话费','谢谢光临','血压仪','100元代金券','慕课网职业路径'];
var timer;
var flag = 0;
window.onload = function(){
var play = document.getElementById('play');
var stop = document.getElementById('stop');
//鼠标抽奖
play.onclick = playFun;
stop.onclick = stopFun;
//键盘抽奖
document.onkeyup = function(event){
event = event || window.event;
if(event.keyCode == 13){
if(flag == 0){
playFun();
}else if(flag == 1){
stopFun();
}
}
}
}
function playFun() {
var title = document.getElementById('title');
var play = document.getElementById('play');
if(flag==0){
timer = setInterval(function(){
var random = Math.floor(Math.random()*arr.length);
title.innerHTML = arr[random];
},100)
play.style.background="#333"
flag = 1;
}
}
function stopFun(){
clearInterval(timer);
flag = 0；
play.style.background="#113"
}查看全部 -
keyDown:当用户按下键盘上的任意键时触发，而且如果按住不放的话，会重复触发此事件
keyPress:当用户按下键盘上的字符键时触发，而且如果按住不放的话，会重复触发此事件
keyUp:当用户释放键盘上的键时触发var data=['Phone5','Ipad','三星笔记本','佳能相机','惠普打印机','谢谢参与','50元充值卡','1000元超市购物券'],
timer=null;
window.onload=function(){
var play=document.getElementById('play'),
stop=document.getElementById('stop');
// 开始抽奖
play.onclick=playFun;
function playFun(){
var title=document.getElementById('title');
var play=document.getElementById('play');
clearInterval(timer);
timer=setInterval(function(){
var random=Math.floor(Math.random()*data.length);
title.innerHTML=data[random];
},50);
play.style.background='#999';
}
PS:
css{cursor:pointer}定義光標為手型
js:console.log("random")//打印random
Math.floor(Math.random()*數組的長度8)//0~7之間的隨機數取整
JavaScript can "display" data in different ways:
Writing into an alert box, using window.alert().
Writing into the HTML output using document.write().
Writing into an HTML element, using innerHTML.
Writing into the browser console, using console.log().查看全部 -
拖拽->鼠标跟随
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轴element.offsetTop 返回元素的垂直偏移位置。<br>
<br>
element.offsetLeft 返回元素的水平偏移位置。
相对于浏览器窗口查看全部 -
在IE10之前的游览器不支持document.getElementByClassName()。因此为了解决游览器不兼容的问题，首先我们需要封装一个获取类名的方法（这个面板的样式大部分是用class写的）
// 封装一个取类名方法
function getClasses(clsName,parent){
var oParent = parent ? document.getElementById(parent) : document,
eles = [],
elements = oParent.getElementsByTagName("*");
for(var i=0,j=elements.length;i<j;i++){
if(elements[i].className === clsName){
eles.push(elements[i]);
}
}
return eles;
}查看全部 -
什么是事件对象？在触发DOM上的事件时都会产生一个对象
事件对象event
①DOM中的事件对象 属性
（1）、type属性用于获取事件类型
（2）、target属性用于获取事件目标
（3）、stopPropagation()方法 用于阻止事件冒泡
（4）、preventDefault() 方法 阻止事件的默认行为,例如<a href="#" ></a>如果一个div里面有一个button，button和div都绑定了click事件，如果是事件冒泡，那么点击button的时候，首先触发button的处理函数，然后触发div的处理函数。（由内而外）
如果有时候不想冒泡，也就是不希望div的事件被触发，那么需要阻止事件冒泡。stopPropagation()方法
如果需要阻止a标签的默认属性跳转，可以使用阻止事件的默认行为preventDefault()方法查看全部 -
事件处理程序：
1，HTML事件处理程序；
2，DOM0级事件处理程序；
3，DOM2级事件处理程序；（定义了两个方法：用于处理指定和删除事件处理程序的操作addEventListener()和removeEventListener()。他们都接受三个参数：要处理的事件名、作为事件处理程序的函数、布尔值）
4，IE事件处理程序；（attachEvent()添加事件，DetachEvent()删除事件。他们接受相同的两个参数：事件处理程序的名称和事件处理程序的函数）
5，跨浏览器的事件处理程序；查看全部
举报