看代码, 如下:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript">
// inner的响应函数
var clickInner = function(e){
alert(1.1);
};
// banner的响应函数
var clickBanner = function(e){
alert(2.1);
}
// body的响应行数
var clickBody = function(e){
alert(3.1);
}
// 注册事件响应
var addEventHandler = function(){
var inner = document.getElementById('inner');
var banner = document.getElementById('banner');
var cancelEvevntBtn = document.getElementById('cancelEvevnt');
if(inner.addEventListener){
inner.addEventListener('click',clickInner,true);
banner.addEventListener('click',clickBanner,true);
document.body.addEventListener('click',clickBody,true);
}else if(inner.attachEvent){
inner.attachEvent('onclick',clickInner);
}
}
// 删除事件响应
var removeEventHandler = function(){
var inner = document.getElementById('inner');
var banner = document.getElementById('banner');
var cancelEvevntBtn = document.getElementById('cancelEvevnt');
if(inner.removeEventListener){
inner.removeEventListener('click',clickInner,true);
banner.removeEventListener('click',clickBanner,true);
document.body.removeEventListener('click',clickBody,true);
}else if(inner.detachEvent){
inner.detachEvent('onclick',clickInner);
}
}
// 删除捕获事件响应,IE不知捕获事件流,所以IE下无效
var removeCapEventHandler = function(){
var banner = document.getElementById('banner');
if(banner.removeEventListener){
banner.removeEventListener('click',clickBanner,true);
banner.addEventListener('click',function(e){
alert(2.1);
e.stopPropagation();
},true);
}
}
// 删除冒泡的事件响应
var removeBubEventHandler = function(){
window.clickHandlerOnDiv = function(e){
alert(2);
var ev = e || event;
if(ev.stopPropagation){
ev.stopPropagation();
}else {
ev.cancelBubble = true;
}
}
}
// 给按钮增加响应事件
document.onreadystatechange = function () {
if(document.readyState=="complete") {
var addBtn = document.getElementById('addEvent');
var removeBtn = document.getElementById('removeEvent');
var removeCaptureEvent = document.getElementById('removeCaptureEvent');
var removeBubbleEvent = document.getElementById('removeBubbleEvent');
if(addBtn.addEventListener){
addBtn.addEventListener('click',addEventHandler,false);
removeBtn.addEventListener('click',removeEventHandler,false);
removeCaptureEvent.addEventListener('click',removeCapEventHandler,false);
removeBubbleEvent.addEventListener('click',removeBubEventHandler,false);
}else if(addBtn.attachEvent){
addBtn.attachEvent('onclick',addEventHandler);
removeBtn.attachEvent('onclick',removeEventHandler);
removeBubbleEvent.attachEvent('onclick',removeBubEventHandler);
}
}
}
clickHandlerOnBody = function(e){
alert(3);
}
clickHandlerOnDiv = function(e){
alert(2);
}
clickHandlerOnInner = function(e){
alert(1);
}
</script>
<title>Demo System</title>
</head>
<body id="body" onclick="clickHandlerOnBody()">
body
<div id='banner' style="width:100px;height:100px;background-color:red;"
onclick="clickHandlerOnDiv(event)">
banner
<div id='inner' style="width:50px;height:50px;background-color:yellow;"
onclick="clickHandlerOnInner()">inner</div>
</div>
<br>
<input id="addEvent" value="添加事件监听" type="button"/>
<input id="removeEvent" value="取消事件监听" type="button"/>
<input id="removeCaptureEvent" value="停止捕获事件流" type="button"/>
<input id="removeBubbleEvent" value="停止冒泡事件流" type="button"/>
</body>
</html>
对部分代码进行说明:
1.var ev = e || event;
firefox将消息对象作为参数传递到响应函数(e),而IE则定义为全局变量event(window下)。
2.window.clickHandlerOnDiv
全局方法可用通过这种方式进行重写。
3.clickHandlerOnDiv(event)
通过HTML注册事件响应也是可以传递参数的。
分享到:
相关推荐
DOM事件(ppt)DOM事件(ppt)DOM事件(ppt)DOM事件(ppt)DOM事件(ppt)DOM事件(ppt)DOM事件(ppt)DOM事件(ppt)DOM事件(ppt)DOM事件(ppt)DOM事件(ppt)DOM事件(ppt)DOM事件(ppt)DOM事件(ppt)DOM...
JavaScript之DOM事件(源代码)JavaScript之DOM事件(源代码)JavaScript之DOM事件(源代码)JavaScript之DOM事件(源代码)JavaScript之DOM事件(源代码)JavaScript之DOM事件(源代码)JavaScript之DOM事件(源...
删除DOM节点删除DOM节点删除DOM节点删除DOM节点删除DOM节点删除DOM节点删除DOM节点删除DOM节点删除DOM节点删除DOM节点删除DOM节点删除DOM节点删除DOM节点删除DOM节点删除DOM节点删除DOM节点删除DOM节点删除DOM节点...
web前端的朋友们,经常会遇到给由后台返回的数据遍历生成的DOM绑定事件,但是总是绑定不上,那是因为把事件直接绑定到了动态生成的DOM上了,正确的方式是利用事件冒泡给其父元素绑定,这样才能解决问题的哦!
DOM事件总结(教辅)DOM事件总结(教辅)DOM事件总结(教辅)DOM事件总结(教辅)DOM事件总结(教辅)DOM事件总结(教辅)DOM事件总结(教辅)DOM事件总结(教辅)DOM事件总结(教辅)DOM事件总结(教辅)DOM事件...
HTML DOM 事件允许Javascript在HTML文档元素中注册不同事件处理程序。...事件通常与函数结合使用,函数不会在事件发生前被执行! (如用户点击按钮)。 提示: 在 W3C 2 级 DOM 事件中规范了事件模型。
原生JavaScript,对数据表格进行操作,使用DOM实现数据的动态操作,包括增加、删除、查询、修改。
目录(一)定义(二)HTML事件处理函数① 特点② 缺点(三)DOM0级事件处理函数① 使用② 删除③ 缺点(四)DOM2级事件处理函数① 使用② 删除③ 注意 (一)定义 事件就是用户或者浏览器自身执行的某种行为,例如...
javascript为DOM绑定事件 兼容 学习笔记
JS添加/删除事件在IE和支持dom浏览器分别为:attachEvent(ie中的添加事件),detachEvent(ie中的删除事件),addEventListener(支持dom浏览器中的添加事件),removeEventListener(支持dom浏览器中的删除事件)...
使用dom4j实现权限分配
这还不是一个简单的React实现,主要用例是直接使用单个函数和JSX来创建实际的dom,但是可以选择使用组件生命周期挂钩。
主要介绍了JQuery中DOM实现事件移除的方法,涉及jQuery中unbind方法移除事件绑定的相关技巧,需要的朋友可以参考下
用js操作DOM来实现的分页!绝对的有用,只需改改就能变出很多的花样!
chrome根据dom找到dom上的事件.zip
原生js操作dom实现上下左右移动.docx
超全面javaweb教程第6天-_12_使用dom4j实现删除节点的操作
Via.js: 实现在一个Web Worker中使用DOM
该示例实现MAVEN来进行创建的,实现了dom4j操作XML文件,包括创建XML、动态创建XML节点、更新XML节点、删除XML节点。