版本

最新推荐文章于 2024-01-02 15:03:22 发布

戏命湖

最新推荐文章于 2024-01-02 15:03:22 发布

阅读量162

点赞数

本文链接：https://blog.csdn.net/qq_45627570/article/details/101265220

版权

	<script type="text/javascript">
		
		window.onload = function(){
			
			/*
			 * 点击按钮以后弹出一个内容
			 */
			//获取按钮对象
			var btn01 = document.getElementById("btn01");
			
			/*
			 * 使用 对象.事件 = 函数 的形式绑定响应函数，
			 * 	它只能同时为一个元素的一个事件绑定一个响应函数，
			 * 	不能绑定多个，如果绑定了多个，则后边会覆盖掉前边的
			 */
			
			//为btn01绑定一个单击响应函数
			btn01.onclick = function(){
				alert(1);
			};
			
			//为btn01绑定第二个响应函数
			/*btn01.onclick = function(){
				alert(2);
			};*/
			
			/*
			 * addEventListener()
			 * 	- 通过这个方法也可以为元素绑定响应函数
			 *  - 参数：
			 * 		1.事件的字符串，不要on
			 * 		2.回调函数，当事件触发时该函数会被调用
			 * 		3.是否在捕获阶段触发事件，需要一个布尔值，一般都传false
			 * 
			 * 使用addEventListener()可以同时为一个元素的相同事件同时绑定多个响应函数，
			 * 	这样当事件被触发时，响应函数将会按照函数的绑定顺序执行
			 * 
			 * 这个方法不支持IE8及以下的浏览器
			 */
			/*btn01.addEventListener("click",function(){
				alert(1);
			},false);
			
			btn01.addEventListener("click",function(){
				alert(2);
			},false);
			
			btn01.addEventListener("click",function(){
				alert(3);
			},false);*/
			
			/*
			 * attachEvent()
			 * 	- 在IE8中可以使用attachEvent()来绑定事件
			 *  - 参数：
			 * 		1.事件的字符串，要on
			 * 		2.回调函数
			 * 
			 *  - 这个方法也可以同时为一个事件绑定多个处理函数，
			 * 		不同的是它是后绑定先执行，执行顺序和addEventListener()相反
			 */
			/*btn01.attachEvent("onclick",function(){
				alert(1);
			});
			
			btn01.attachEvent("onclick",function(){
				alert(2);
			});
			
			btn01.attachEvent("onclick",function(){
				alert(3);
			});*/
			
			/*btn01.addEventListener("click",function(){
				alert(this);
			},false);*/
			
			/*btn01.attachEvent("onclick",function(){
				alert(this);
			});*/
			
			bind(btn01 , "click" , function(){
				alert(this);
			});
		
			
		};
		
		//定义一个函数，用来为指定元素绑定响应函数
		/*
		 * addEventListener()中的this，是绑定事件的对象
		 * attachEvent()中的this，是window
		 *  需要统一两个方法this
		 */
		/*
		 * 参数：
		 * 	obj 要绑定事件的对象
		 * 	eventStr 事件的字符串(不要on)
		 *  callback 回调函数
		 */
		function bind(obj , eventStr , callback){
			if(obj.addEventListener){
				//大部分浏览器兼容的方式
				obj.addEventListener(eventStr , callback , false);
			}else{
				/*
				 * this是谁由调用方式决定
				 * callback.call(obj)
				 */
				//IE8及以下
				obj.attachEvent("on"+eventStr , function(){
					//在匿名函数中调用回调函数
					callback.call(obj);
				});
			}
		}
		
	</script>
</head>
<body>
	
	<button id="btn01">点我一下</button>
</body>

戏命湖

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
版本

<script type="text/javascript"> window.onload = function(){ /* * 点击按钮以后弹出一个内容 */ //获取按钮对象 var btn01 = document.getElementById("btn01"); /* * 使用对象.事件 = 函数的...
复制链接

扫一扫