JavaScript(js)處理的HTML事件、鍵盤事件、鼠標(biāo)事件簡單示例
更新時間：2019年11月19日 09:17:56 作者：xuehyunyu
這篇文章主要介紹了JavaScript(js)處理的HTML事件、鍵盤事件、鼠標(biāo)事件,結(jié)合實例形式分析了JavaScript針對HTML事件、鍵盤事件及鼠標(biāo)事件的簡單處理方法,需要的朋友可以參考下
本文實例講述了JavaScript(js)處理的HTML事件、鍵盤事件、鼠標(biāo)事件。分享給大家供大家參考，具體如下：
示例代碼：
HTML文件：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML文件</title>
<script>
window.οnlοad=function () {
var d=document.getElementById('d');
//內(nèi)容發(fā)生改變，并焦點(diǎn)發(fā)生改變，才可以監(jiān)聽到
d.οnchange=function () {
alert('內(nèi)容發(fā)生改變')
}
}
</script>
</head>
<body>
<input type="text" id="d" value="">
</body>
</html>
鍵盤事件：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>鍵盤事件</title>
<script>
window.οnlοad=function () {
window.οnkeypress=function (e) {
// alert(e.key)//彈出按鍵對應(yīng)的字母
// alert(e.keyCode)
if (e.charCode==103){
alert('G鍵被點(diǎn)擊')
}
}
}
</script>
</head>
<body>
</body>
</html>
鼠標(biāo)事件：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>鼠標(biāo)事件</title>
<script>
window.οnlοad=function () {
var input=document.getElementById('b');
input.οnclick=function () {
alert('按鈕被點(diǎn)擊了');
}
var c= document.getElementById('c');
c.οndblclick=function () {
alert('雙擊')
}
}
</script>
</head>
<body>
<input type="button" id="b" value="點(diǎn)擊">
<input type="button" id="c" value="雙擊">
</body>
</html>
PS：這里再為大家附上javascript系統(tǒng)自帶事件參考表供大家參考查詢：
javascript事件與功能說明大全：
http://tools.jb51.net/table/javascript_event
更多關(guān)于JavaScript相關(guān)內(nèi)容可查看本站專題：《JavaScript事件相關(guān)操作與技巧大全》、《JavaScript常用函數(shù)技巧匯總》、《javascript面向?qū)ο笕腴T教程》、《JavaScript錯誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》
希望本文所述對大家JavaScript程序設(shè)計有所幫助。
相關(guān)文章
TypeScript環(huán)境搭建的實現(xiàn)步驟
本文主要介紹了TypeScript環(huán)境搭建的實現(xiàn)步驟，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-01-01
這篇文章主要為大家詳細(xì)介紹了js實現(xiàn)上傳圖片到服務(wù)器，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-04-04 
JavaScript關(guān)鍵字this的使用方法詳解
與其他語言相比,函數(shù)的 this 關(guān)鍵字在 JavaScript 中的表現(xiàn)略有不同,此外,在嚴(yán)格模式和非嚴(yán)格模式之間也會有一些差別,本文就給大家講解一下JavaScript關(guān)鍵字中的this,需要的朋友可以參考下
2023-08-08 
JavaScript實現(xiàn)隨機(jī)點(diǎn)名器
這篇文章主要為大家詳細(xì)介紹了JavaScript實現(xiàn)隨機(jī)點(diǎn)名器，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2020-03-03 
這篇文章主要介紹了eslint 的三大通用規(guī)則詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2019-05-05 
在開發(fā)中，變量名，函數(shù)名一般要做到清晰明了，盡量做到看名字就能讓人知道你的意圖，所以變量和函數(shù)命名是挺重要，今天來看看如果較優(yōu)雅的方式給變量和函數(shù)命名。
2021-05-05 
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)的圖片保存功能,結(jié)合實例形式分析了微信小程序wx.downloadFile({})及wx.saveImageToPhotosAlbum({})函數(shù)圖片保存功能相關(guān)使用技巧,需要的朋友可以參考下
2019-04-04 
javascript 延遲加載技術(shù)(lazyload)簡單實現(xiàn)
延遲加載技術(shù)(簡稱lazyload)并不是新技術(shù), 它是js程序員對網(wǎng)頁性能優(yōu)化的一種方案.
2011-01-01 
layui+ssm實現(xiàn)數(shù)據(jù)表格雙擊編輯更新數(shù)據(jù)功能
在使用layui加載后端數(shù)據(jù)請求時,對數(shù)據(jù)選項框進(jìn)行雙擊即可實現(xiàn)數(shù)據(jù)的輸入編輯更改,本文結(jié)合示例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧
2023-12-12