Learn Javascript
t4 DOM time event

定時事件、載入事件

函數addEventListener()

原始碼(ex_DOM_addEvent.html) 
<!DOCTYPE html>

<html>

<body >
 <p id="element">xx</p>
 <p onclick="f1(this)">yy</p>
 <script>
 function f1(e){
   console.log(e.target);
   console.log(event.name);
 }
var element = document.getElementById('element');

var user = {
 firstname: 'Wilson',
 greeting: function(){
   alert('My name is ' + this.firstname);
 }
};

element.addEventListener('click', user.greeting);

 </script>
</body>
</html>

form 事件

原始碼(ex_form_parameter1.html) 
<!DOCTYPE html>

<body >
<!-- target="_blank" 在另一個視窗開啟 
<form name="parameters" method="post" action="ex_form_parameter2.html" target="_blank">
但是debug 需要其他輔助工具 web sniffer ?
如果要測試php,直接安裝WAMP
-->
<form name="parameters" method="GET" action="ex_form_parameter2.html" >

      <p> Login: 
        <input type="text" name="login" value="me">
      </p>
      <p> Password: 
        <input type="text" name="password" value="123">
      </p>
      <p> 
        <input type="submit" name="submit" value="Send data">
      </p>
    </form>
</body>

原始碼(ex_form_parameter2.html) 
<!DOCTYPE html>

<body>
<h2>Received: </h2>
<p><b>login: </b> <span id="log" ></span></p>
<p><b>Password: </b><span id="pass"></span></p>
    
<p>&nbsp;</p>

<script language="JavaScript">

	function addComment()
	{
        //console.log(location.toString());
		var parameters = location.search.substring(1).split("&");
        if(parameters == ""){
		document.getElementById("log").innerHTML = "nothing";
		document.getElementById("pass").innerHTML = "nothing";
		
		}
		else {
		var temp = parameters[0].split("=");
		l = unescape(temp[1]);

		temp = parameters[1].split("=");
		c = unescape(temp[1]);

		document.getElementById("log").innerHTML = l;
		document.getElementById("pass").innerHTML = c;
		}
	}
addComment();

</script>

<form method="get" action="ex_form_parameter1.html">
  <input type="submit" name="submit" value="Return">
</form>

<form action="ex_form_parameter1.html">
  <input type="hidden" name="varname" value="12345" />
  <input type="submit" value="Send data">
</form>

</body>

時間事件

3秒後改成另一個觸發函數

💣 有些函數呼叫的時候,要代入函數名稱,但是有些必須要代入express,例如:
已知有函數:function sin(){}
htmlElement.addEventListener('click', sin);
v.s.
setTimeOut(sin(),3000)`
原始碼(ex_DOM_1.html) 
<!DOCTYPE html>

<html>
<head>
<script>
function click1(e){
 alert("my name click1")
}
function click2() {
 alert("my name click2") 
} 
function changeit(){
  document.getElementById("btn1").onclick=click2
}
</script>
</head>
<body>

<input id="btn1" name="k1" type="button" value="cc" onclick="click1(1,2)">
<script>
  setTimeout(changeit,3000) ;//note: !!! changeit沒有刮號,雖然是函數，這是錯的==> setTimeout(changeit(),300) 

</script>

</body>
</html>

前 後