EventListener

最新推荐文章于 2025-03-10 23:54:40 发布

原创最新推荐文章于 2025-03-10 23:54:40 发布 · 693 阅读

文章标签：

#addEventListener

js 专栏收录该内容

10 篇文章

订阅专栏

本文深入探讨了JavaScript中事件绑定的方法，包括传统的onclick属性绑定、addEventListener监听器的使用及其与removeEventListener的配合，以及如何手动触发事件。通过具体代码示例，解析了不同绑定方式的执行顺序和事件的冒泡与捕获过程。

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>

		<script>
			function test1() {
				var butt = document.getElementById("a-id");
				var img = document.getElementById("img-id");
				butt.onclick = function() {
					alert('弹1');
				}
				//第二次的onclick会覆盖第一次的
				butt.onclick = function(e) {
					alert('弹2');
					img.src = this.href;

					//阻止默认事件1,让浏览器停止继续执行默认行为
					e.preventDefault();
					//阻止默认事件2
					//return false;//等于event.preventDefault();加event.stopPropagation();(冒泡终止)
				}
				
			}

			/*  它允许给一个事件注册多个监听器,同时支持移除监听事件,按顺序触发
	            removeEventListener() 不能移除匿名函数,且待删的外部函数不能带参数.因addEventListener中的触发函数不可加括号;
	            useCaption 用于描述是冒泡还是捕获。默认值是false，即冒泡传递。 
	                        当值为true，就是捕获传递。 
			*/
			function click1(e) {
				alert('弹1');
			}

			function test2() {
				var img = document.getElementById("img-id");
				var butt = document.getElementById("a-id");

				//添加
				butt.addEventListener('click', click1);
				//移除
				butt.removeEventListener('click', click1);

				butt.addEventListener('click', function(e) {
					e.preventDefault(); //阻止默认事件
					alert('弹2');
					img.src = this.href;
					//	return false; //这里使用false不行
				}, false);
			}

			//test4
			//如何手动触发监听事件:https://www.cnblogs.com/tiger95/p/6962059.html
			function test4() {
				//手动触发onclick事件
				var butt = document.getElementById("a-id");
				//如果onclick在前,addlistener在后,则按顺序执行各自的事件
				//如果addlistener在前,onclick在后,则onclick不会执行
				//addlistener的手动触发方法为dispatchEvent
				//onclick属性绑定事件的手动触发可以直接onclick()或者dispatchEvent调用
				butt.onclick = function() {
					alert('弹1111');
				}
//				butt.onclick();				

				//手动触发监听事件//如果混用的话,onclick不会被监听事件覆盖
				butt.addEventListener('click', function() {
					alert('弹2222');
				});

				//手动触发事件  
				//IE的
				if(butt.fireEvent) {
					butt.fireEvent('click');
				} else {
//					chrome,firefox
					var ev = document.createEvent("HTMLEvents");
					ev.initEvent("click", false, true);
					butt.dispatchEvent(ev);
				}
				
				 // jquery触发
                 // butt.trigger('change');

			}

	
			window.onload = function() {
				//test1();
				//test2();
				
				test4();
			}

			//兼容性
			//IE8及更早版本和Opear 7.0及更早版本不支持addEventListener()和removeEventListener(),对于这类浏览器我们可以使用detachEvent()来移除事件。
			function addEvent(content, funcName) {
				if(content.addEventListener) {
					content.addEventListener(event, funcName);
				} else if(content.attchEvent) {
					content.attchEvent(event, funcName);
				}
			}
		</script>
	</head>

	<body>
		<!--addeventListener它允许给一个事件注册多个监听器  DOM core,而类似onclick为html-dom
		-->

		<a href="/JS_Demo2/img/1.jpg" id="a-id">点我</a>
		<img id="img-id" />

		<input />
	</body>

</html>