當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

Js中的事件

發布時間：2025/5/22 编程问答 26 豆豆

生活随笔收集整理的這篇文章主要介紹了 Js中的事件小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

事件

事件源

事件行為

1、js中常用的事件

onclick 鼠標點擊某個對象

onchange 用戶改變域的內容

Code：省市聯動

<body>

</select>

</select>

</body>

var select = document.getElementById("city");

select.onchange = function(){

var optionVal = select.value;

switch(optionVal){

case 'bj':

var area = document.getElementById("area");

area.innerHTML = "<option>海淀</option><option>朝陽</option><option>東城</option>";

break;

case 'tj':

var area = document.getElementById("area");

area.innerHTML = "<option>南開</option><option>西青</option><option>河西</option>";

break;

case 'sh':

var area = document.getElementById("area");

area.innerHTML = "<option>浦東</option><option>楊浦</option>";

break;

default:

alert("error");

}

};

</script>

? ?

onfocus 元素獲得焦點

onblur 元素失去焦點

Code：當獲得焦點的時候，提示輸入的內容格式，

當失去焦點的時候，提示輸入有誤

<body>

? ?

? ?

</body>

? ?

var txt = document.getElementById("txt");

txt.onfocus = function(){

//友好提示

var span = document.getElementById("action");

span.innerHTML = "用戶名格式最小8位";

span.style.color = "green";

};

txt.onblur = function(){

//錯誤提示

var span = document.getElementById("action");

span.innerHTML = "對不起格式不正確";

span.style.color = "red";

};

</script>

onmouseover 鼠標被移到某元素之上

onmouseup 某個鼠標按鍵被松開

Code:div元素鼠標移入變為綠色移出恢復原色

#d1{background-color: red;width:200px;height: 200px;}

</style>

</head>

<body>

</body>

var div = document.getElementById("d1");

div.onmouseover = function(){

this.style.backgroundColor = "green";

};

div.onmouseout = function(){

this.style.backgroundColor = "red";

};

</script>

onload 某個頁面或圖像被完成加載

Code:等到頁面加載完畢在執行onload事件所指向的函數

window.onload = function(){

var span = document.getElementById("span");

//alert(span);

span.innerHTML = "hello js";

};

</script>

</head>

<body>

</body>

2、事件的綁定方式

(1)將事件和響應行為都內嵌到html標簽中

Code:

(2)將事件內嵌到html中而響應行為用函數進行封裝

Code:

function fn(){

alert("yyy");

}

</script>

(3)將事件和響應行為與html標簽完全分離

Code:

var btn = document.getElementById("btn");

btn.onclick = function(){

alert("zzz");

};

</script>

this關鍵字

this經過事件的函數進行傳遞的是html標簽對象

Code：

<body>

</body>

? ?

function fn(obj){

alert(obj.name);

}

</script>

阻止事件的默認行為

IE：window.event.returnValue = false;

W3c: 傳遞過來的事件對象.stopPropagation();

Code：

<body>

</body>

? ?

function fn(e){

//ie：window.event.returnValue = false;

//W3c：傳遞過來的事件對象.preventDefault();

//W3c標準

if(e&&e.preventDefault){

alert("w3c");

e.preventDefault();

//IE標簽

}else{

alert("ie");

window.event.returnValue = false;

}

</script>

阻止事件的傳播

IE：window.event.cancelBubble = true;

W3c: 傳遞過來的事件對象.stopPropagation();

Code：

<body>

</div>

</body>

function fn1(){

alert("fn1");

}

function fn2(e){

alert("fn2");

//阻止事件的傳播

if(e&&e.stopPropagation){

alert("w3c");

e.stopPropagation();

//IE標簽

}else{

alert("ie");

window.event.cancelBubble = true;

}

</script>

? ?

轉載于:https://www.cnblogs.com/YuTaiYin/p/6721188.html

《新程序員》：云原生和全面數字化實踐50位技術專家共同創作，文字、視頻、音頻交互閱讀

總結

以上是生活随笔為你收集整理的Js中的事件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

事件
js