搜尋

首頁 >web前端 >js教程 >js中有哪些事件？ js常用事件的介紹

js中有哪些事件？ js常用事件的介紹

不言
不言原創
2018-09-18 10:08:1810375瀏覽

JavaScript讓我們有能力建立動態頁面。事件是可以被JavaScript偵測到的行為。網頁中的每個元素都可以產生某些可以觸發JavaScript函數的事件。那麼，js中有哪些事件呢？ 本篇文章將為大家介紹關於js中常用的事件。

話不多說，我們來直接進入正題。

一、js中常用事件之onclick事件

點擊事件（onclick並不是js中的方法，onclick只是瀏覽器提供js的一個dom接口，讓js可以操作dom，所以onclick大小寫都是沒問題的，像是HTML程式碼就不用區分大小寫）。

js中onclick事件的程式碼範例：

<%@pagelanguage="java"import="java.util.*"pageEncoding="UTF-8"%>
<!DOCTYPEHTMLPUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>JavaScript的一些常用方法</title>
<scripttype="text/javascript">
    functionmyFunction(){
       alert("测试onclick点击事件");
    }
    </script>
</head>
<body>
<center>
<buttononclick="myFunction()">点击这里</button>
</center>
</body>
</html>

說明：

onclick通常會在下列基本物件中產生：

button(按鈕物件)、checkbox(複選框)、radio(單選框)、reset buttons(重置按鈕)、submit buttons(提交按鈕)

二、js中常用事件之onload事件

可以body執行，f0c7b2fc31bf9ff08b8d4564177f61ce36cc49f0c466276486e50c850b7e4956,其中onload後面可以寫一個方法，如：onload="test()",然後在JavaScript中寫一個test()方法，則在頁面一開始加載的時候會先呼叫這個方法。

js中onload事件的程式碼範例：

<%@pagelanguage="java"import="java.util.*"pageEncoding="UTF-8"%>
<!DOCTYPEHTMLPUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>JavaScript的一些常用方法</title>
<scripttype="text/javascript">
    functiontest(){
       alert("测试onload方法");
    }
    </script>
</head>
<bodyonload="test()">
</body>
</html>

注意：此方法只能寫在6c04bd5ca3fcae76e30b72ad730ca86d標籤之中

# #三、js中常用事件之onchange事件

當內容改變時觸發。可用於文字方塊、列錶框等對象，此事件一般用於回應使用者修改內容所帶來的其他變更操作。

js中onchange事件的程式碼範例：

<%@pagelanguage="java"import="java.util.*"pageEncoding="UTF-8"%>
<!DOCTYPEHTMLPUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>JavaScript的一些常用方法</title>
<scripttype="text/javascript">
       functionupperCase(){
         varx = document.getElementById("fname").value;
         document.getElementById("fname").value = x.toUpperCase();
        }
     </script>
</head>
<body>
 <p>
 <labelfor="name">用户名：</label>
 <inputtype="text"id="fname"onchange="upperCase()"value=""/>
</p>
</body>
</html>

說明：當使用者向一個文字方塊輸入文字時，不會觸發onchange事件，只有使用者輸入結束後，按一下文字方塊以外的區域，使文字方塊失去焦點時才觸發該事件，如果是下拉框，則選擇結束後即觸發。

上例的效果是，當輸入框失去焦點時內容轉成大寫。發生這種情況是由於input必須是失去焦點才會偵測到內容發生改變。而change事件通常是用於下拉式選單select標籤。


四、js中常用事件之onblur事件和onfocus事件

當前元素失去焦點時觸發該事件，對應的是onfocus事件：得到焦點事件；onblur事件：元素失去焦點。


js中onblur事件與onfocus事件的程式碼範例：

<%@pagelanguage="java"import="java.util.*"pageEncoding="UTF-8"%>
<!DOCTYPEHTMLPUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>JavaScript的一些常用方法</title>
<scripttype="text/javascript">
  functionchkvalue(txt) {
  if(txt.value=="") alert("文本框里必须填写内容!");
  }
 functionsetStyle(x){
      document.getElementById(x).style.background="yellow"
 }
 </script>
</head>
<body>
失去焦点：
 <inputtype="text"name="name"value=""size="30"onblur="chkvalue(this)"><br>
得到焦点：
    <inputtype="text"id="name"value=""size="30"onfocus="setStyle(this.id)">
</body>
</html>

五、js中常用事件之onscroll事件

#視窗滾動事件：當頁面滾動時呼叫函數。此事件寫在方法的外面，且函數名稱後面不加括號，例如window.onscroll=move。

js中onscroll事件的程式碼範例：

<%@pagelanguage="java"import="java.util.*"pageEncoding="UTF-8"%>
<!DOCTYPEHTMLPUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>JavaScript的一些常用方法</title>
<scripttype="text/javascript">
  functionmove() {
  alert("页面滚动时调用");
  }
window.onscroll = move;
 </script>
</head>
<body>
测试onscroll方法<BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>
测试onscroll方法<BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>
测试onscroll方法<BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>
测试onscroll方法<BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>
</body>
</html>

#六、js中常用事件之onsubmit事件##屬於< ;form>表單元素，寫在ff9c23ada1bcecdd1a0fb5d5a0f18437表單標籤內。語法：onsubmit=”return 函式名稱()”。

js中onsubmit事件的程式碼範例：

<%@pagelanguage="java"import="java.util.*"pageEncoding="UTF-8"%>
<!DOCTYPEHTMLPUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>JavaScript的一些常用方法</title>
<scripttype="text/javascript">
  functionmove() {
  alert("测试onsubmit........"+testForm.name.value);
  }
 </script>
</head>
<body>
<formaction=""method="post"name="testForm"onsubmit="returnmove()">
    <inputtype="text"name="name"value="">
    <br>
    <inputtype="submit"name="submit"value="测试onsubmit"/>
</form>
</body>
</html>

七、js中常用事件滑鼠相關的事件

Onmouseover:滑鼠移動到某個物件範圍的上方時，觸發事件呼叫函數。注意：在同一個區域中，無論怎樣移動都只會觸發一次函數。

Onmouseout:滑鼠離開某個物件範圍時，觸發事件呼叫函數。

Onmousemove:滑鼠移動到某個物件範圍的上方時，觸發事件呼叫函數。注意：在同一個區域中，只要滑鼠動一次就觸發一次事件。

程式碼範例：

<%@pagelanguage="java"import="java.util.*"pageEncoding="UTF-8"%>
<!DOCTYPEHTMLPUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>JavaScript的一些常用方法</title>
<scripttype="text/javascript">
functionbigImg(x)
{
x.style.height="180px";
x.style.width="180px";
}
functionnormalImg(x)
{
x.style.height="128px";
x.style.width="128px";
}
</script>
</head>
<body>
<imgonmousemove="bigImg(this)"onmouseout="normalImg(this)"border="0"src="images/defaultAvatar.gif"alt="Smiley">
</body>
</html>

Onmouseup:當滑鼠放開時觸發事件

Onmousedown:當滑鼠按下鍵時觸發事件

程式碼範例：

<%@pagelanguage="java"import="java.util.*"pageEncoding="UTF-8"%>
<!DOCTYPEHTMLPUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>JavaScript的一些常用方法</title>
<scripttype="text/javascript">
functionmouseDown(){
    document.getElementById("p1").style.color="red";
}
functionmouseUp(){
    document.getElementById("p1").style.color="green";
}
</script>
</head>
<body>
<pid="p1"onmousedown="mouseDown()"onmouseup="mouseUp()">
请点击文本！mouseDown()函数当鼠标按钮在段落上被按下时触发。此函数把文本颜色设置为红色mouseUp(。) 函数在鼠标按钮被释放时触发。mouseUp() 函数把文本的颜色设置为绿色。
</p>
</body>
</html>
以上就是本篇文章的全部內容，更多關於js事件的內容可以參考

js開發手冊

。

以上是js中有哪些事件？ js常用事件的介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
上一篇：javascript中的六種資料型別是什麼？ js的資料型別和常見隱式轉換邏輯（介紹）下一篇：javascript中的六種資料型別是什麼？ js的資料型別和常見隱式轉換邏輯（介紹）

相關文章

看更多