开发者社区> leonwuv> 正文

js 绑定事件的几种方法 addEventListener()

简介: 看代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>添加事件的几种方法</title> <style type="text/css"> div{ width: 200px; height: 1
+关注继续查看

看代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>添加事件的几种方法</title>
		<style type="text/css">
			div{
				width: 200px;
				height: 100px;
				background: #CCCCCC;
				border: 1px solid #008000;
				/*display: inline-block;*/
				float: left;
				margin-top: 0;
			}
		</style>
	</head>
	<body>
		<div id="box1" onclick="event1()"></div>
		<div id="box2"></div>
		<div id="box3"></div>
		<div id="box4"></div>
	</body>
	<script type="text/javascript">
		var box1 = document.getElementById("box1"); 
		var box2 = document.getElementById("box2"); 
		var box3 = document.getElementById("box3"); 
		var box4 = document.getElementById("box4"); 
		
		//行内绑定点击事件
		function event1(){		 	
			box1.innerHTML = "你点我了";
		}
		
		//节点绑定点击事件
		box2.onclick = function(){
			this.innerHTML = "你点我了";
		}
		box2.onclick = function(){
			this.innerHTML += "<br>" + "你点我了哦";
		}
		
		//2级DOM事件绑定   绑定的处理函数都会执行   顺序<strong><span style="color:#ff0000;">由前向后</span></strong>依次执行
		box3.addEventListener("click",function(){
			this.innerHTML = "你点我了"
		},false);
		box3.addEventListener("click",function(){
			this.innerHTML += "<br>" +"你点我了哦"
		},false);
		
//		IE绑定事件     绑定的函数都会执行   顺序<strong><span style="color:#ff6666;">由后向前</span></strong>依次执行
			//现在好多浏览器已经不支持了  坑!!!!!
		if(box4.attachEvent){
			box4.attachEvent("onclick",function(){
				this.innerHTML = "你点我了";
			});
			box4.attachEvent("onclick",function(){
				this.innerHTML += "<br>" + "你点我了啊"
			});
		}
		
	<span style="white-space:pre">	</span> if (window.attachEvent) {
            <span style="white-space:pre">		</span>alert("支持attachEvent");
       <span style="white-space:pre">		</span> } else {
            <span style="white-space:pre">		</span>alert("不支持attachEvent");
       <span style="white-space:pre">		</span> }		
		
		
		
	</script>
</html>

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
ListView嵌套webView 事件冲突解决
如图,红色部分为WebView,作为ListView头部存在,测试视频(h5)要左右滑动,ListView要上下滑动,保证视频控件和下面评论部分可以显示,但是这个时候就存在WebView横向滑动和ListView竖向滑动之间的冲突。
1091 0
DataGridView中绑定List泛型的问题
1、数据绑定的问题:  当DataGridView的DataSource绑定的为DataTable时,当DataTable的内容发生改变时,DataGridView中的内容会自动跟随DataTable改变而不用重新绑定数据源;   而把List绑定到DataGridView则不然,当List的内容发生改变是,需要先设置DataGridView的DataSource属性为new List(),   然后再把作过改动的List重新赋于DataGridView的DataSource。
653 0
snk
Angular vs React vs Vue vs UISYS 的事件绑定方式对比(新手必看)
web三大框架和 airoot uisys 都给大家介绍了一番。在事件绑定上都很棒,除了angluar 有些小伙伴会疑问,angluar为啥那么复杂,其实 angluar 设计之初就为大型企业项目考虑了很多,而且他的组件是最成熟的,React 和 Vue 毕竟不是做成google 那么复杂,所以angluar开始学的时候,感觉有点“脱裤子放屁的感觉”,但是你学深入了,你就明白作者的困境了。
1132 0
印象最深的一个bug——排查修复问题事件BEX引发的谷歌浏览器闪退崩溃异常
本文记录了目前修复的千千万万个项目的BUG中印象最深的一次BUG,由于问题事件BEX引发的谷歌浏览器闪退崩溃的异常问题.这个BUG因为其不可复现性导致特别难以发现和解决,正是由于这一次的BUG解决过程,让我了解到了一位攻城狮在项目开发维护过程中实际经验的重要性,多思考,多实践,多多积累经验,才是一位攻城狮的成长之路.
29457 0
jQuery学习笔记之DOM操作、事件绑定(2)
jQuery学习笔记之DOM操作、事件绑定(2) ————————————————————学习目录———————————————————————— 4.DOM操作 5.事件绑定 源码地址: https://github.com/iyun/jQueryDemo.git ————————————————————学习目录———————————————————————
1473 0
WPF ContextMenu 在MVVM模式中绑定 Command及使用CommandParameter传参
原文:WPF ContextMenu 在MVVM模式中绑定 Command及使用CommandParameter传参 ContextMenu无论定义在.cs或.xaml文件中,都不继承父级的DataContext,所以如果要绑定父级的DataContext,直接DataContext=“{Bind...
2464 0
+关注
leonwuv
Code is my life!
61
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
JS零基础入门教程(上册)
立即下载
性能优化方法论
立即下载
手把手学习日志服务SLS,云启实验室实战指南
立即下载