-
JavaScript 和 HTML 之间的交互都是通过事件来实现的。
查看全部 -
事件是文档或浏览器窗口中发生的一些特定的交互瞬间。
查看全部 -
//阻止事件冒泡
<a href="event.html" id="go">跳转</a>
function stopGoto(event){
event.stopPropagation();
event.preventDefault();
}
var go=document.getElementById('go');
eventUtil.addHandler(go,'click',stopGoto);
查看全部 -
function showMes(){ alert(event.target.nodeName); event.stopPropagation(); //stopPropagation()方法 用于阻止事件冒泡 }查看全部 -
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{margin:0;padding:0;}
.head{font-size:12px;padding:6px 0 0 10px;}
#login_box{width:300px;height:150px;background:#eee;
border:1px solid #ccc;position:absolute;left:50%;top:50%;margin-left:-150px;margin-top:-75px;display:none;}
#login_box p{height:20px;border-bottom:1px solid #ccc;font-size:12px;padding:6px 0 0 5px;font-weight:bold;}
#close{width:14px;height:14px;background:url(close.png) no-repeat;position:absolute;right:4px;top:6px;border:1px solid #ccc;}
</style>
<script>
window.onload=function(){
var login_btn=document.getElementById('login'),
login_box=document.getElementById('login_box'),
close=document.getElementById('close');
// 封装添加事件监听程序
function addEvent(ele,type,hander){
// 执行代码
if(ele.addEventListener){
ele.addEventListener(type,hander,false);
}else if(ele.attchEvent){
ele.attchEvent('on'+type,hander);
}else{
ele['on'+type] = hander;
}
}
// 显示登录层函数
function showLogin(){
// 执行代码
login_box.style.display = "block";
}
// 隐藏登录层函数
function hideLogin(){
// 执行代码
login_box.style.display = "none";
}
//点击登录按钮显示登录层
addEvent(login_btn,'click',showLogin)
// 执行代码
//点击关闭按钮隐藏登录层
addEvent(close,'click',hideLogin)
// 执行代码
}
</script>
</head>
<body>
<div class="head">亲，您好！<input type="button" value="登 录" id="login"></div>
<div id="login_box">
<p>用户登录</p><span id="close"></span>
</div>
</body>
</html>
查看全部 -
第四章节听不懂，需要重新学习和多练习
重点：注意需要阻止冒泡和不需要阻止冒泡的情况
查看全部 -
回家重新练习查看全部
-
本节主要内容查看全部 -
if(event.stopPropagation)千万不能写成 if(event.stopPropagation（）)
此处是以属性的形式进行判断。
查看全部 -
此处的event是非IE浏览器的事件对象
具体指？
return event？event:window.event;
三元运算符 ？作用是判断？前的语句是否为真,为真则执行中间的语句,否则执行后面的语句
查看全部 -
3-1DOM中的事件对象
需要重学，基本上没看懂。
查看全部 -
跨浏览器解决——》添加句柄：
这里为什么添加句柄？
句柄一般什么时候使用
句柄是什么？
句柄的格式一般如何？
调用的格式？
查看全部 -
<!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 表示阻止事件的默认行为
查看全部 -
事件对象
什么是事件对象？在触发DOM上的事件时都会产生一个对象 事件对象event
1 DOM中的事件对象
（1） type属性，用户 获取事件类型
（2） target属性 用于获取事件目标
（3 ）stopPropagation() 方法 用于阻止事件冒泡
（4 ）preventDefault（）阻止事件的默认行为
hubbles 属性 canselable 属性
查看全部
举报