JS事件
2016-02-25 10:39
447 查看
// 封装添加事件监听程序
function addEvent(ele,type,hander){
if(ele.addEvenetListener){
ele.addEventListener(type,hander,false);
} else if(ele.attachEvent){
ele.attachEvent('on'+type,hander)
}else{
ele['on'+type]=hander;
}
}
//封装删除事件监听程序
function removeEvent(ele,type,hander){
if(ele.removeEventListener){
ele.removeEventListener(type,hander,false);
}else if(ele.detachEvent){
ele.detachEvent('on'+type,hander);
}else{
ele.['on'+type]=null;
}
}
阻止特定事件的默认行为:点击链接不跳转
<body>
<a href="001.html" id="mylink">点击</a>
<script type="text/javascript">
var link=document.getElementById("mylink");
link.onclick=function(e){
if(e.preventDefault){
e.preventDefault();
}else{
e.returnValue=false;
}
}
</script>
</body>
阻止事件冒泡
<body>
<input type="button" id="btn" value="denglu">
<script>
var btn=document.getElementById("btn");
btn.onclick=function(e){
alert("hello");
if(e.stopPropagation){
e.stopPropagation();
}
else{
e.cancelBubble=true;
}
}
document.body.onclick=function(e){
alert("body is clicked");
}
</script>
</body>
如果不添加e.stopPropagation();就会在单击时弹出两个警告框。添加之后,由于阻止冒泡行为,click事件根本不会传播到document.body,因此就不会触发注册在这个元素上的 onclick事件处理程序。
跨浏览器程序
var EventUtil = {
addHandler: function(element, type, handler){
//省略的代码
},
getEvent: function(event){
return event ? event : window.event;
},
getTarget: function(event){
return event.target || event.srcElement;
},
preventDefault: function(event){
if (event.preventDefault){
event.preventDefault();
} else {
event.returnValue = false;
}
},
removeHandler: function(element, type, handler){
//省略的代码
},
stopPropagation: function(event){
[b]if (event.stopPropagation){
event.stopPropagation();
} else {
event.cancelBubble = true;
}
}
};[/b]
function addEvent(ele,type,hander){
if(ele.addEvenetListener){
ele.addEventListener(type,hander,false);
} else if(ele.attachEvent){
ele.attachEvent('on'+type,hander)
}else{
ele['on'+type]=hander;
}
}
//封装删除事件监听程序
function removeEvent(ele,type,hander){
if(ele.removeEventListener){
ele.removeEventListener(type,hander,false);
}else if(ele.detachEvent){
ele.detachEvent('on'+type,hander);
}else{
ele.['on'+type]=null;
}
}
阻止特定事件的默认行为:点击链接不跳转
<body>
<a href="001.html" id="mylink">点击</a>
<script type="text/javascript">
var link=document.getElementById("mylink");
link.onclick=function(e){
if(e.preventDefault){
e.preventDefault();
}else{
e.returnValue=false;
}
}
</script>
</body>
阻止事件冒泡
<body>
<input type="button" id="btn" value="denglu">
<script>
var btn=document.getElementById("btn");
btn.onclick=function(e){
alert("hello");
if(e.stopPropagation){
e.stopPropagation();
}
else{
e.cancelBubble=true;
}
}
document.body.onclick=function(e){
alert("body is clicked");
}
</script>
</body>
如果不添加e.stopPropagation();就会在单击时弹出两个警告框。添加之后,由于阻止冒泡行为,click事件根本不会传播到document.body,因此就不会触发注册在这个元素上的 onclick事件处理程序。
跨浏览器程序
var EventUtil = {
addHandler: function(element, type, handler){
//省略的代码
},
getEvent: function(event){
return event ? event : window.event;
},
getTarget: function(event){
return event.target || event.srcElement;
},
preventDefault: function(event){
if (event.preventDefault){
event.preventDefault();
} else {
event.returnValue = false;
}
},
removeHandler: function(element, type, handler){
//省略的代码
},
stopPropagation: function(event){
[b]if (event.stopPropagation){
event.stopPropagation();
} else {
event.cancelBubble = true;
}
}
};[/b]
相关文章推荐
- json数据的相互转换
- 第一章 JavaScript基础
- 彻底理解js中this的指向,不必硬背。
- JavaScript代码因逗号不规范导致IE不兼容的问题
- javascript原生dom操作方法
- JS对json对象的调用成员2种方式
- JSP界面全选删除
- JavaScript-1.最简单的程序之网页弹出对话框,显示为Warning---ShinePans
- 【HTML/JS】Pdf.js使用教程
- Js变量定义——fn里 var与不var的区别
- js刷新iframe页面的方法(兼容主流)
- JSP访问Hadoop 图片存储服务
- 写四个理解JS闭包的例子
- JS为表格每行添加点击事件
- 如何实现两个JSP数据的传输
- JSP 遍历ResultSet中的数据并转化为表格
- javascript高级编笔记第四章 第五章
- JS编程艺术笔记(3)-动态创建标记
- JS根据浏览器窗口大小实时动态改变网页文字大小的方法
- js 页面刷新location.reload和location.replace的区别小结