JS事件监听案例-优快云博客

本文链接：https://blog.youkuaiyun.com/huang2009303513/article/details/16961553

一个事件源可以有多个事件监听者。

实例代码如下：

 <title>lesson40.html</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
   <script  language="javascript" type="text/javascript">
  	
  		function test5(e)
  		{
  		    document.write('oh,test5');
  		    document.write('</br>');
  		}
  		function test4(e)
  		{
  			alert('ok,test4');
  		}
  	</script> 

  </head>
  
  <body>
    <div id="div1" class="style1">div1</div>
    <!--//点击按钮将传递给两个函数来处理。先调用test4，再调用test5  -->
    <input type="button"  value="黑色" onclick="test4(this),test5(this)"/>
  </body>

运行结果：

先抵用test4，再调用test5

不同的元素又不同的事件类型：

各种事件的演示：

<head>
    <title>lesson40.html</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
   <script  language="javascript" type="text/javascript">
  	
  		function test5(e)
  		{
  		    document.write('oh,test5');
  		    document.write('</br>');
  		}
  		function test4(e)
  		{
  			alert('ok,test4');
  		}
  		//当点击按钮或者输入框的时候，onfocus事件被激发。
  		function test6()
  		{
  		 window.alert("输入控被选择。");
  		}
  		
  		function test7()
  		{
  			//当页面加载的时候把鼠标定位到text输入框
  			document.getElementById("text1").onfocus();
  			
  		}
  		function test8()
  		{
  			alert("关闭页面。");
  		}
  		function test9()
  		{
  			alert("你真的要关闭页面页面。");
  		}
  	</script> 

  </head>
  
  <body  onload="test7()" onunload="test8()" onbeforeunload="test9()">
    <div id="div1" class="style1">div1</div>
    <!--//点击按钮将传递给两个函数来处理。先调用test4，再调用test5  -->
    <input type="button"  value="黑色" onclick="test4(this),test5(this)"/>
    <input type="text" id="text1" onfocus="test6()" />
  </body>

事件类型是oncontextmelu，不能用右键选择

onselectstart不能拷贝。

<head>
    <title>lesson40.html</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
   <script  language="javascript" type="text/javascript">
  	
  		function test5(e)
  		{
  		    document.write('oh,test5');
  		    document.write('</br>');
  		}
  		function test4(e)
  		{
  			alert('ok,test4');
  		}
  		//当点击按钮或者输入框的时候，onfocus事件被激发。
  		function test6()
  		{
  		 window.alert("输入控被选择。");
  		}
  		
  		function test7()
  		{
  			//当页面加载的时候把鼠标定位到text输入框
  			document.getElementById("text1").onfocus();
  			
  		}
  		function test8()
  		{
  			alert("关闭页面。");
  		}
  		function test9()
  		{
  			alert("你真的要关闭页面页面。");
  		}
  		function test10()
  		{
  		   alert("别点右键");
  		   return false;
  		}
  		
  		function test10()
  		{
  		   alert("不允许选择文字");
  		   return false;
  		}
  	</script> 

  </head>
  
  <body  onload="test7()" onselectstart="return test11()" oncontextmenu="return test10()" onunload="test8()" onbeforeunload="test9()">
    <div id="div1" class="style1">div1</div>
    <!--//点击按钮将传递给两个函数来处理。先调用test4，再调用test5  -->
    <input type="button"  value="黑色" onclick="test4(this),test5(this)"/>
    <input type="text" id="text1" onfocus="test6()" />
  </body>

韩顺平网页设计第四十讲