【JavaScript】JavaScript基础(三)

【JavaScript】JavaScript基础(三)


3. ECMAScipt(续)

   j. JS中的事件

    ①常用的事件

  • onload加载完成事件:页面加载完成之后,常用于做页面js代码初始化操作
  • onclick单击事件:常用于按钮的点击响应操作。
  • onblur失去焦点事件:常用用于输入框失去焦点后验证其输入内容是否合法。
  • onchange内容发生改变事件:常用于下拉列表和输入框内容发生改变后操作
  • onsubmit 表单提交事件:常用于表单提交前,验证所有表单项是否合法。

    ②事件的注册

     事件的注册又分为静态注册和动态注册两种。

  •    什么是事件的注册(绑定)?
        其实就是告诉浏览器,当事件响应后要执行哪些操作代码,叫事件注册或事件绑定。
  •    静态注册事件:通过html标签的事件属性直接赋于事件响应后的代码,这种方式我们叫静态注册。
  •    动态注册事件:是指先通过js代码得到标签的dom对象,然后再通过dom对象.事件名=function()这种形式赋于事件响应后的代码,叫动态注册。
    • 动态注册基本步骤:
      1、获取标签对象
      2、标签对象.事件名=function(){ }

    ③onload加载完成事件

  •     静态注册onload事件

    <script type="text/javascript">
    	function onloadFunc() {
    		alert('静态注册onload事件');
    		alert('2444');
    	}
    </script>
    
    <body onload="onloadFunc()">
    
  •     动态注册onload事件

    <script type="text/javascript">
    	window.onload = function(){
    		alert('静态注册onload事件');
    		alert('2555');
    	}
    </script>
    

    ④onclick单机事件

  •     静态注册onclick事件

    <script type="text/javascript">
    	function onclickFunc() {
    		alert('静态注册onclick事件');
    		alert('2444');
    	}
    </script>
    
    <body>
    	<button onclick="onclickFunc()">按钮1</button>
    </body>
    
  •     动态注册onclick事件

    <script type="text/javascript">
    	window.onload = function() {
    		var btnObj = document.getElementById("btn02");
    		btnObj.onclick = function() {
    			alert('动态注册onclick事件');
    			alert('2555');
    		}
    	}
    </script>
    
    <body>
    	<button id="btn02">按钮2</button>
    </body>
    

      *document获取该页面所有元素对象


    ⑤onblur失去焦点事件

  •     静态注册onblur事件

    <script type="text/javascript">
    	function onblurFunc() {
    		console.log("静态注册失去焦点事件");
    	}
    </script>
    
    <body>
    	用户名:<input type="text" onblur="onblurFunc();">
    </body>
    
  •     动态注册onblur事件

    <script type="text/javascript">
    	window.onload = function() {
    		var nameObj = document.getElementById("name");
    		nameObj.onblur = function() {
    			console.log('动态注册失去焦点事件');
    		}
    	}
    </script>
    
    <body>
    	用户名:<input type="text" id="name">
    </body>
    

      *console.log() 控制台打印信息。


    ⑥onchange内容发生改变事件

  •     静态注册onchange事件

    <script type="text/javascript">
    	function onchangeFunc() {
    		alert("数字改变了");
    	}
    </script>
    
    <body>
    	<select onchange="onchangeFunc();">选一个数字
    		<option>1</option>
    		<option>2</option>
    		<option>3</option>
    		<option>4</option>
    	</select>
    </body>
    
  •     动态注册onchange事件

    <script type="text/javascript">
    	window.onload = function() {
    		var selObj = document.getElementById("sel");
    		selObj.onchange = function() {
    			alert('数字也改变了');
    		}
    	}
    </script>
    
    <select id="sel">
    

    ⑦onsubmit表单提交事件

  •     静态注册onsubmit事件

    (例子:内容不合法,阻止表单提交)

    <script type="text/javascript">
    	function onsubmitFunc() {
    		alert("静态注册表单提交事件————发现不合法");
    		return false;
    	}
    </script>
    
    <body>
    	<form action="http://localhost:8080" method="get"
    		onsubmit="return onsubmitFunc();">
    		<input type="submit" value="静态注册"/>
    	</form>
    </body>
    
  •     动态注册onsubmit事件

    <script type="text/javascript">
    	 window.onload = function() {
    		var formObj = document.getElementById("form02");
    		formObj.onsubmit = function() {
    			alert('动态注册表单提交事件————发现不合法');
    			return false;
    		}
    	} 
    </script>
    
    <body>
    	<form action="http://localhost:8080" method="get"
    		id="form02">
    		<input type="submit" value="动态注册"/>
    	</form>
    </body>
    
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 大白 设计师: CSDN官方博客
应支付0元
点击重新获取
扫码支付

支付成功即可阅读