當前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
【JavaScript】JS事件机制学习
生活随笔
收集整理的這篇文章主要介紹了
【JavaScript】JS事件机制学习
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
常用的事件
通過事件機制，達到與用戶的交互，與java的swing交互類似。
主要是結合js的函數使用。
當你添加一個事件之后沒有達到想要的效果時，就要檢查一下是不是給HTML標簽添加了合適的事件，以及是否有其他的方式可以更好的達到這種效果。（靠經驗）
避免事件之間的沖突（雙擊、單擊不能同時存在）
- 單 / 雙擊事件
- 鼠標事件
- 鍵盤事件
- 交點事件
- 頁面加載事件
- 值改變事件
示例1
<html><head><title>js的事件機制學習1</title><meta charset="UTF-8"/><!--js的事件機制：解釋：當我們的行為動作滿足了一定的條件后，會觸發某類事務的執行。作用：主要是結合js的函數來使用。內容:1、單雙擊事件單擊：onclick 當鼠標單擊的時候會觸發雙擊：ondblclick 當鼠標雙擊的時候會被觸發2、鼠標事件onmouseover 當鼠標懸停在某個HTML元素上的時候觸發onmousemove 當鼠標在某個HTML元素上移動的時候觸發onmouseout 當鼠標在某個HTML元素上移出的時候觸發3、鍵盤事件onkeyup 當鍵盤在某個HTML元素上彈起的時候觸發onkeydown 當鍵盤在某個HTML元素上下壓的時候觸發4、焦點事件onfocus 當某個HTML元素獲取焦點的時候觸發onblur 當某個HTML元素失去焦點的時候觸發5、頁面加載事件 onload 當頁面加載成功后觸發。注意:js中添加事件的第一種方式：在HTML上直接使用事件屬性進行添加，屬性值為所監聽執行的函數。js中的事件只有在當前HTML元素上有效。一個HTML元素可以添加多個不同的事件。一個事件可以監聽觸發多個函數的執行,但是不同的函數要使用分號間隔--><!--聲明js代碼域--><script type="text/javascript">/*聲明js函數*///單擊事件function testOnclick(){alert("我是單擊");}//測試雙擊function testOndblclick(){alert("我是雙擊");}//鼠標事件function testOnmouseover(){alert("我是鼠標懸停事件");}function testOnmousemove(){alert("我被移動了");}function testOnmouseout(){alert("我被移出了");}//鍵盤事件function testOnkeyup(){alert("我是鍵盤彈起事件");}function testOnkeydown(){alert("我是鍵盤按下事件");}//焦點事件function testOnfocus(){document.getElementById("showdiv").innerHTML="哈哈";alert("我是獲取焦點事件");}function testOnblur(){alert("我是失去焦點事件");}//頁面加載function testOnload(){alert("我是頁面加載事件");}//測試function test(){alert("測試一個事件的多個函數執行");}</script><style type="text/css">#showdiv{width: 300px;height: 300px;border: solid 1px;}</style></head><body onload="testOnload()"><h3>js的事件機制學習1</h3><hr /><input type="button" name="" id="" value="測試單擊" onclick="testOnclick();test();" /><input type="button" name="" id="" value="測試雙擊" ondblclick="testOndblclick();" /><hr /><br /><br /><div id="showdiv" onmouseover="testOnmouseover();" onmousemove="testOnmousemove()" onmouseout="testOnmouseout()"></div><hr />鍵盤事件學習： <br />鍵盤彈起事件：<input type="text" name="" id="" value="" onkeyup="testOnkeyup();"/><br /><br />鍵盤下壓事件： <input type="text" name="" id="" value="" onkeydown="testOnkeydown()"/><hr />焦點事件學習：<br />獲取焦點： <input type="text" name="" id="" value="" onfocus="testOnfocus();"/><br /><br />失去焦點： <input type="text" name="" id="" value="" onblur="testOnblur();"/></body> </html>示例2
事件的阻斷
<html><head><title>js的事件機制二</title><meta charset="UTF-8"/><!--js的事件機制學習2：1、給合適的HTML標簽添加合適的事件onchange----select下拉框onload------body標簽單雙擊-------用戶會進行點擊動作的HTML元素鼠標事件------用戶會進行鼠標移動操作的。鍵盤事件------用戶會進行鍵盤操作的HTML元素。2、給HTML元素添加多個事件時，注意事件之間的沖突舉個栗子：單擊和雙擊當事件的觸發條件包含相同部分的時候，會產生事件之間的沖突。3、事件的阻斷當事件所監聽的函數的將返回值返回給事件時：false：則會阻斷當前事件所在的HTML標簽的功能true:則繼續執行當前事件所在的HTML標簽的功能4、超鏈接調用js函數<a href="javascript:函數名()">調用js函數</a> --><script type="text/javascript">//值改變事件function testOnchange(){alert("我被改變了");}//單擊事件function testOnclick(){alert("今天天氣真好，不冷不熱，賊適合學習");}//雙擊事件function testOndblclick(){alert("老師說的對");}//事件的阻斷function testA(){alert("事件的阻斷");return true;}//超鏈接調用js函數function testHref(){alert("我是超鏈接調用");}</script></head><body><h3>js的事件機制二</h3><hr />值改變事件: <input type="text" name="" id="" value="" onchange="testOnchange();"/><br /><br /><select name="" id="" onchange="testOnchange();"><option value="">北京</option><option value="">上海</option><option value="">廣州</option></select><hr />事件的沖突：<br /><input type="button" name="" id="" value="事件的沖突" onclick="testOnclick()" ondblclick="testOndblclick()"/><hr />事件的阻斷：先走onclick事件觸發的js事件，然后再走href的超鏈接。 如果js代碼的返回值為false，則事件被阻斷。<br /><a href="http://www.baidu.com" target="_blank" onclick="return testA()">百度一下</a><hr />超鏈接調用js函數:<a href="javascript:testHref()">調用js函數</a></body> </html>總結
以上是生活随笔為你收集整理的【JavaScript】JS事件机制学习的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 【JavaScript】JS的变量、数组
- 下一篇： 【JavaScript】Window对象