2020-11-16

最新推荐文章于 2024-09-16 08:47:17 发布

王敏0000

最新推荐文章于 2024-09-16 08:47:17 发布

阅读量78

点赞数

分类专栏： js基础文章标签： javascript

本文链接：https://blog.csdn.net/w962684575/article/details/109717613

版权

js基础专栏收录该内容

6 篇文章 0 订阅

订阅专栏

事件

事件的三要素：

1.事件源 2.事件类型 3.事件处理程序

事件的使用

1.在标签内通过属性使用事件

<input type="text" onclick="script:alert('行内代码')">

2.通过js注册事件

事件源.时间类型=function（）{}

<body>
  <input type="text" value="默认内容">
  <script>
     var ip = document.getElementsByTagName("input");
     ip.onclick=function(){
       document.write("默认内容");
      }
  </script>
</body>

事件源.addEventListener("事件类型",处理程序,布尔值);

事件类型:字符串,不加on

处理程序: 匿名函数或调用函数

布尔值:

<body>
  <input type="text" value="默认内容">
  <script>
     var ip = document.getElementsByTagName("input");
     ip.addEventListener("mouseover",ipOnmouse,false);
     function ipOnmouse(){
				document.write("匿名函数");
			}
      
  </script>
</body>

有兼容性的注册事件函数

function addEvent(element,eventType,funName,broad){
	if(element.addEventListener){
		element.addEventListener(eventType,funName,broad);
	}else if(element.attachEvent){
	    element.attachEvent("on"+eventType,funName);
	}else{
	    element["on"+eventType] = funName;
	}
 }

移除事件

事件源.时间类型=“null”；

<body>
  <input type="text" value="默认内容">
  <script>
     var ip = document.getElementsByTagName("input");
     ip.addEventListener("mouseover",ipOnmouse,false);
     function ipOnmouse(){
				document.write("匿名函数");
			}
      ip.mouseover=“null”；
  </script>
</body>

事件源.removeEventListener(“事件类型”);

<body>
  <input type="text" value="默认内容">
  <script>
     var ip = document.getElementsByTagName("input");
     ip.addEventListener("mouseover",ipOnmouse,false);
     function ipOnmouse(){
				document.write("匿名函数");
			}
      ip.removeEventListener("mouseover",ipOnmouse,false);
  </script>
</body>

事件源.detachEvent(“事件类型”); 只能使用IE浏览器

有兼容性的移除事件函数

function removeEvent(element,eventType,funName,broad){
				if(element.removeEventListener){
					element.removeEventListener(eventType,funName,broad);
				}else if(element.detachEvent){
					element.detachEvent("on"+eventType,funName);
				}else{
					element["on"+eventType] = null;
				}
			}