-
IE 事件处理程序
attachEvent() 添加事件
detachEvent() 删除事件
接收相同的两个参数：事件处理程序的名称和事件处理程序的函数
不使用第三参数的原因：IE8 以及更早的浏览器版本只支持事件冒泡！
查看全部 -
1、对于HTML事件来说，只能添加一个事件程序，且与JS的耦合过密，不利于后期的维护。
2、对于DOM0级事件，可以添加多个事件程序，但是只会执行最后一个事件。
3、对于DOM2级事件，同样可以添加多个事件程序，并且从上到下按顺序执行
DOM2级事件定义了两个方法：
用于处理指定和删除事件程序的操作，addEventListener（）和removeEventListener（）。
这两个方法都需要接收三个参数：
- 要处理的事件名
- 作为事件处理程序的函数
- 布尔值（true：捕获法，false：冒泡法）。
查看全部 -
DOM0级事件处理程序 （用得比较多）：先把元素取出来，然后为其属性添加一个事件的方法叫DOM0级处理程序。
DOM0级事件处理程序：
var y=document.getElementById('btn2'); 取得btn2按钮对象。
btn2.onclick=function(){
alert('这是通过DOM0级添加的事件！')
}
btn2.onclick=null; 删除onclick属性
查看全部 -
事件流与事件冒泡顺序相反，由最大的节点传递到最小的节点。
已采纳回答 / qq_倪洱_03939395
组织对象的事件,更符合网页的产品需求比如点击A只要在页面内跳转位置,不需要跳转页面,则需要拦截事件流进行阻止比如点击一个全选按钮,要选择所有的列表项,则要进行事件冒泡捕获列表的整个父div然后选中
查看全部 -
事件冒泡：事件最开始由最具体的元素（文档中嵌套层次最深的那个节点）接收，然后逐级向上传播至最不具体的那个节点（文档）。
查看全部 -
添加事件处理程序 addEventListener(要处理的事件名，作为事件处理程序的函数，bool)
查看全部 -
代码
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>下拉菜单</title>
<style type="text/css">
body,ul,li{ margin:0; padding:0; font-size:13px;}
ul,li{list-style: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;
background:url(xjt.png) no-repeat right center;}
#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'),
title=box.getElementsByTagName('cite')[0],
menu=box.getElementsByTagName('ul')[0],
as=box.getElementsByTagName('a'),
index=-1;
// 点击三角时
title.onclick=function(event){
// 执行脚本
event = event ? event : window.event;
if(event.stopPropagation) {
event.stopPropagation();
} else {
event.cancleBubble=true;
}
menu.style.display="block";
}
// 滑过滑过、离开、点击每个选项时
var addBg = function(ele) {
ele.style.background='#999';
}
var removeBg = function(ele) {
ele.style.background='#fff';
}
var removeBgs = function() {
for(var i=0, len= as.length;i<len;i++) {
removeBg(as[i]);
}
}
var closeMenu = function(){
index = -1;
menu.style.display="none";
}
for(var i=0, len= as.length;i<len;i++) {
as[i].onmouseover = function() {
removeBgs();
addBg(this);
}
as[i].onmouseout = function() {
// this.style.background='#fff';
removeBg(this);
}
as[i].onclick = function(e) {
e = e ? e: window.event;
if(e.stopPropagation) {
e.stopPropagation();
}
else {
e.cancleBubble=true;
}
title.innerHTML = this.innerHTML;
closeMenu();
}
}
document.onkeyup = function(e) {
if (menu.style.display === "none") {
return false;
}
var keyNum = e.keyCode,
len = as.length;
if(keyNum === 38) { //上方向
if (index <= 0) {
index = len;
}
index--;
removeBgs();
addBg(as[index]);
} else if(keyNum === 40) { //下方向
index++;
if (index >= len) {
index = 0;
}
removeBgs();
addBg(as[index]);
} else if(keyNum === 13) { //回车
if (index === -1) {
return false;
}
removeBgs();
as[index].click();
}
}
// 点击页面空白处时
document.onclick = function() {
closeMenu();
}
}
</script>
</head>
<body>
<div id="divselect">
<cite>请选择分类</cite>
<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 中的事件对象
type 属性：获取事件类型
srcElement属性：获取事件目标
cancelBubble属性：阻止事件冒泡
returnValue属性：阻止事件的默认行为
查看全部 -
事件对象（event）：在触发 DOM 上的事件时都会产生一个对象
DOM 中的事件对象
type 属性：用于获取事件类型
target 属性：用于获取事件目标
stopPropagation() 方法，阻止时间冒泡
preventDefault() 方法，阻止事件的默认行为
查看全部 -
跨浏览器的事件处理程序
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（）。
接收三个参数：要处理的事件名、作为事件处理程序的函数和 布尔值（true：捕获法，false：冒泡法）。
查看全部 -
DOM0级事件处理程序 （用得比较多）：先把元素取出来，然后为其属性添加一个事件的方法叫DOM0级处理程序。
DOM0级事件处理程序：
var y=document.getElementById('btn2'); 取得btn2按钮对象。
btn2.onclick=function(){
alert('这是通过DOM0级添加的事件！')
}
btn2.onclick=null; 删除onclick属性
查看全部 -
HTML事件处理程序(现在不建议使用了):事件直接加在HTML代码中
缺点：HTML和js代码高耦合，如果修改，就要修改两个地方--HTML元素内和script函数。查看全部 -
当在 子元素 与父元素同事添加onclick事件时, 注意考虑事件冒泡的情况
例如：子元素的onclick事件执行了隐藏某个元素的事件，但父元素的onclick执行了显示这个元素的事件、当触发事件冒泡时，浏览器会先触发子元素的onclick 再 触发 父元素的onclick 就会把这个元素先隐藏又显示了、就会看不到js执行效果
查看全部 -
事件捕获：不太具体的节点应该更早接收到事件，而最具体的节点最后接收到事件。
查看全部
举报