2020-11-16

事件

事件的三要素:

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;
				}
			}

 

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值