js 绑定事件的几种方法 addEventListener（）

最新推荐文章于 2024-05-16 14:23:07 发布
最新推荐文章于 2024-05-16 14:23:07 发布
阅读量533 收藏
点赞数
文章标签： javascript ViewUI
原文链接：https://yq.aliyun.com/articles/91353
版权

看代码

<!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" οnclick="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>

weixin_33712881
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
关于JavaScript中事件绑定的方法总结
11-28
在这篇文章中，我们将深入探讨三种主要的JavaScript事件绑定方法，以及jQuery中的几种事件处理方式。 1. **在DOM元素中直接绑定** 这种方法是在HTML元素内部通过`onXXX`属性来指定事件处理函数。例如，我们可以...
JavaScript Dom 绑定事件操作实例详解
10-16
以下是对JavaScript DOM绑定事件的详细讲解，包括几种常见的绑定方式及其应用场景。 1. **直接在HTML中绑定事件** 这是最基础的事件绑定方式，直接在HTML元素的属性中指定事件处理函数。 ```html (this)'> ``` ...
JS addEventListener多次绑定同一事件，触发多次
weixin_54607676的博客
05-22 1400
在控制台打印出来的结果是两次，但我们不想要它打印两次，我们想不管监听几次，在触发事件执行的时候，只执行一遍handleAction 函数。
普通绑定事件和用 addEventListener 添加事件有什么区别？
NewDayStudy的博客
11-28 5862
一、onclick 添加事件不能绑定多个事件，后面绑定的会覆盖前面的。              二、addEventListener 能添加多个事件绑定，按顺序执行。              三、addEventListener方式，不支持低版本的IE。（attachEvent 支持IE）。     四、普通方式绑定事件后，不可以取消。addEventListener绑定
addEventListener与onclick
qq_43320218的博客
08-14 926
<ul id="test"> <li>a1</li> <li>a2</li> <li>a3</li> </ul> <a href="https://baidu.com" id='aa'>百度</a> <script> // 事件冒泡机制，点击li会弹出对应的li的内容 do.
在ES6类中绑定事件
目尽地平线
08-19 1万+
如何在ES6的类中写事件回调函数？如何访问类的this变量 ？如何隐藏事件回调函数，使外部不能访问
js(jquery)绑定点击事件
热门推荐
美丽的泡沫
07-22 2万+
test 第一种 $("#test").click(function(event) { /* Act on the event */}); 第二种 document.getElementById('#foo').addEventListener('click', function() { /* Act on the event */}, false); 第三种 html
js常见的几种封装方法，方便调用
01-08
它首先检查`ele`对象是否支持`addEventListener`方法，如果支持则使用标准方式添加事件，否则使用IE的旧版方式`attachEvent`。 3. **阻止事件冒泡**： `stopBubble(eve)`函数用于阻止事件冒泡。如果浏览器支持`...
JS事件绑定的常用方式实例总结
01-19
常用的事件绑定的几种方式有三种： 直接在 dom 元素上进行绑定。 用 on 绑定。 用 addEventListener、attachEvent 绑定。 一、直接在 dom 元素上进行绑定 <input id=btn1 type=button onclick=test(); /> ...
javascript 浏览器判断 绑定事件 arguments 转换数组 数组遍历
10-29
在JavaScript中，有两种主要的事件绑定方法：`attachEvent`（适用于IE）和`addEventListener`（适用于非IE的现代浏览器）。`_jsc.util.addEvent`函数是一个跨浏览器的事件绑定函数，它会根据浏览器类型选择合适的...
JS-绑定事件3种方法
SYQ15544423296的博客
06-30 8315
JS-绑定事件3种方法
web前端学习（四十一）——JavaScript DOM EventListener（添加与移除监听事件）
★★光亭★★
02-22 1万+
web前端学习（四十一）——JavaScript DOM EventListener（添加与移除监听事件）
JavaScript中事件绑定的方法
subsistent的博客
02-16 890
在JavaScript的学习中，我们经常会遇到JavaScript的事件机制，例如，事件绑定、事件监听、事件委托（事件代理）等。这些名词是什么意思呢，有什么作用呢？
javascript的addEventListener() 方法
qq_32666545的博客
08-19 3805
...
用于标注js脚本的html标签是,js addListener 的封装 用于给标签注册事件
weixin_31974659的博客
06-22 431
在web开发中经常会用js jquery给html标记注册事件，其实就是添加监听：由于很常用，简单封装一个代码片，需要的可以复制下去直接使用function addListener(element, e, fn) {if (element.addEventListener) {element.addEventListener(e, fn, false);} else {element.attach...
JavaScript事件绑定的三种方式
qq_45745362的博客
11-11 306
【代码】JavaScript事件绑定的三种方式。
【js】js绑定事件的三种方法
michiko98的博客
01-02 3720
js 绑定事件 原生js
JavaScript单击事件的绑定
weixin_43228946的博客
08-21 1148
第一种：btn.onclick = function(){}; 第二种：btn.addEventListener("click", function () { }, false); 第三种：btn01.attachEvent("onclick",function(){ }); 现在我们就先看看这三种单击事件的区别： 第一种，使用 对象.事件 = 函数 的形式绑定响应函数，这种同时一个元素绑定一个响应函数，如果绑定好几个，那么后面就会覆盖前面的函数事件。第二种，是通过监听事件addEventListener实
Vue进阶（九十五）：addEventListener() 监听事件_vue addeventlistener
最新发布
2401_84617477的博客
05-16 626
我在成长过程中也是一路摸爬滚打，没有任何人的指点，所以走的很艰难。例如在大三的时候，如果有个学长可以阶段性的指点一二，如果有已经工作的师兄可以告诉我工作上需要什么，我应该前面的三年可以缩短一半；后来去面试bat，失败了有5、6次，每次也不知道具体是什么原因，都是靠面试回忆去猜测可能是哪方面的问题，回来学习和完善，当你真正去招人的时候，你就会知道面试记录是多么重要，面试官可以从面试记录里看到你的成长，总是去面试，总是没有成长，就会被定义为缺乏潜力。
js绑定点击事件的方法
06-28
在 JavaScript 中，绑定点击事件的方法有很多种。...需要注意的是，以上几种方法中，函数名或事件处理函数都应该在代码中先定义好。此外，为了避免事件冲突或重复绑定，应注意使用正确的事件委托和事件绑定方式。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值