js事件监听-addEventListener (w3c标准) 和 attachEvent(ie)
2024-08-25 19:16:13
研究了一个小时,没看懂这两个属性
window.onload = function(){
var oDiv = document.getElementById("J_myDiv"); //找到对象
oDiv.onclick = function(){ //设置事件监听函数
alert("click");
}
}
缺点:1.添加单一事件
2.不能删除事件
第二:IE中监听函数
var oDiv; function fnClick(){
alert("click me");
oDiv.detachEvent("onclick",fnClick);//删除监听函数
} window.onload = function(){
oDiv = document.getElementById("J_myDiv");//找到对象
oDiv.attachEvent("onclick",fnClick); //添加监听函数
}
第三:标准DOM监听函数
var oDiv; function fnClick1(){
alert("click1");
// oDiv.removeEventListener("click",fnClick2,false); //删除监听函数2
} function fnClick2(){
alert("click2");
} window.onload = function(){ oDiv = document.getElementById("J_myDiv"); //找到对象
oDiv.addEventListener("click",fnClick1,false); //添加监听函数1
oDiv.addEventListener("click",fnClick2,false); //添加监听函数2 }
第四:从js实例来看事件监听 参看:http://imethan.com/?p=208
第五:从实例来看JS的事件监听学习笔记(事件监听绑定、ff/IE不同的处理机制兼容总结)参看:http://hi.baidu.com/dou917/blog/item/40219f37e6e3deee1b4cff67.html
第六:代码总结
<script language="javascript">
//Javascript 事件演示
window.onload = function(){
var hideBox = function(event){
document.getElementById('status_show').style.display = 'none';
document.getElementById('status_hide').style.display = 'block';
};
var showBox = function(event){
document.getElementById('status_show').style.display = 'block';
document.getElementById('status_hide').style.display = 'none';
stopEvent(event);
};
var stopEvent = function(event){
e = event || window.event;
if(e.stopPropagation){
e.stopPropagation();
}else {
e.cancelBubble = true;
}
};
if(document.addEventListener){
document.addEventListener('click', hideBox, false);
document.getElementById('status_hide').addEventListener('click', showBox, false);
document.getElementById('status_show').addEventListener('click', stopEvent, false);
}else {
//For IE
document.attachEvent('onclick', hideBox);
document.getElementById('status_hide').attachEvent('onclick', showBox);
document.getElementById('status_show').attachEvent('onclick', stopEvent, showBox);
}
};
</script>
最新文章
- airflow 优化
- 答:SQLServer DBA 三十问之六:Job信息我们可以通过哪些表获取;系统正在运行的语句可以通过哪些视图获取;如何获取某个T-SQL语句的IO、Time等信息;
- [转]Centos7下caffe的安装
- UITableView中的cell的优化
- Linux 网络编程详解九
- (转)The 9 Deep Learning Papers You Need To Know About (Understanding CNNs Part 3)
- 百度地图Api之自定义标注:(获得标注的经纬度和中心经纬度即缩放度)
- GC算法 垃圾收集器
- nginx优化之请求直接返回json数据
- docker 1.12.3版本搭建私有仓库,上传镜像报错:server gave HTTP response to HTTPS client”
- 设置Ubuntu 10.10版本的软件源
- Linux下安装单机版zookeeper(和dubbo配合验证)和redis(用图形化界面连接验证)
- hdu2612 Find a way BFS
- ionic2中使用datetime组件如何默认设置当前时间?
- 非交互式一句话添加root用户
- Delphi启动数据库连接属性对话框
- 【leeetcode】125-Valid Palindrome
- 解决Android 7.0 App内切换语言不生效的问题
- ZOJ2481 Unique Ascending Array 2017-04-18 23:08 33人阅读 评论(0) 收藏
- GO基本数据结构练习:数组,切片,映射
热门文章
- (转)poj1182食物链
- ubuntu 下面手动安装jdk
- asp.net的ajax以及json
- .net下灰度模式图像
- iphone/ipad/iOS on Linux Debian7/ubuntu12.04/linuxmint13/ubuntu14.04 compiling from source
- Linux 内核源码中likely()和unlikely()
- Tungsten Replicator学习总结
- 游戏排行榜-Python实现
- 【翻译】在Mac上使用VSCode创建你的第一个Asp.Net Core应用
- spring-mvc + shiro框架整合(sonne_game网站开发04)