1、通過標簽內部添加事件
(1)onclick事件:單擊事件
(2)ondbclick事件:雙擊事件
(3)onload事件:只能在body中使用,入口函數里有:window. 。onload=function( ){ }
(4)onchange事件:改變事件
(5)onblur事件和onfocus事件:失去焦點和聚焦
(6)onscroll事件:滾動倫
(7)鼠標相關事件:
----------------------onmouseover移到對象上方是就觸發事件,同一區域無論怎么移動就只觸發一次
----------------------onmouseout鼠標離開對象觸發事件調用函數
----------------------onmousemove移到對象上方是就處罰事件調用函數同一區域鼠標移動一次就觸發一次,一般不常用
----------------------onmouseup鼠標抬起觸發事件
----------------------onmousedown鼠標按下觸發事件電泳函數
舉例說明:
<body>
<div id="one" onclick="dianji()">點擊事件</div>
<div id="one" ondblclick="shuangji()">雙擊事件</div>
改變事件:<input type="text" id="" name="" value="" placeholder="請輸入賬號" onchange="change()"/><br>
失去焦點:<input type="text" id="" name="" value="" placeholder="失去焦點" onblur="sqjd()"/><br>
獲得焦點:<input type="text" id="" name="" value="" placeholder="獲得焦點" onfocus="hdjd()"/><br>
<div id="mouse" class="mouse1" onmouseover="over()">鼠標移動到某對象范圍的上方時,觸發事件調用函數。注意:在同一個區域中,無論怎樣移動都只觸發一次函數。</div>
<div id="mouse" class="mouse2" onmouseout="out()">鼠標離開某對象范圍時,觸發事件調用函數。</div>
<div id="mouse" class="mouse3" onmousemove="move()">鼠標移動到某對象范圍的上方時,觸發事件調用函數。注意:在同一個區域中,只要鼠標動一次就觸發一次事件。</div>
<div id="mouse" class="mouse4" onmousedown="down()">當鼠標按下鍵時觸發事件</div>
<div id="mouse" class="mouse5" onmouseup="up()">當鼠標松開時觸發事件</div>
2、通過for循環添加事件
<div class="nav"><!--通過循環給多個元素添加事件-->
<div class="na">首頁</div>
<div class="na">概況</div>
<div class="na">師資</div>
<div class="na">交流</div>
<div class="na">訪客</div>
<script type="text/javascript">
window.onload=function () {
}
//通過循環給多個元素添加事件
var nam=document.getElementsByClassName("na");
for(var i=0;i<nam.length;i++){
nam[i].onmouseover=function(){
this.style.backgroundColor="red";
this.style.color="white";
}//鼠標上去背景由棕色變成紅色,字體由黑色變成白色
nam[i].onmouseout=function(){
this.style.backgroundColor="blue";
this.style.color="black";
}
}
</script>
3、通過addEventListener() 方法 監聽事件函數
<body>
<button id="bt">添加監聽事件點我</button><br><br><!--通過addEvenListener()方法 監聽事件函數-->
</body>
<script type="text/javascript">
window.onload=function () {
}
var btm=document.getElementById("bt");
btm.addEventListener("click",aa);
function aa(){
alert("我是監聽點擊事件")
}
</script>