jQuery mouseover事件
當滑鼠指標進入元素內時mouseover事件就會被觸發。
任何HTML元素都可以接受此事件。
mouseover事件具有冒泡功能,比如滑鼠進入匹配元素的子元素也會觸發事件,這往往不是我們所需要的,可以使用mouseenter事件來規避此問題。
語法結構一:
[JavaScript] 純文字檢視 複製程式碼.mouseover(handler(eventObject))
引數解析:
(1).handler:事件處理函式;eventObject是傳遞給事件處理函式的時間物件。
jQuery1.0版本新增。
語法機構二:
[JavaScript] 純文字檢視 複製程式碼.mouseover([eventData ], handler(eventObject))
引數解析:
(1).eventData:可選,當一個事件被觸發時,要傳遞給event.data的資料。
(2).handler:事件處理函式;eventObject是傳遞給事件處理函式的時間物件。
jQuery1.4.3版本新增。
語法結構三:
[JavaScript] 純文字檢視 複製程式碼.mouseover()
引數解析:
不傳遞引數,呼叫此方法會執行事件處理函式。
jQuery1.0版本新增。
程式碼例項:
[HTML] 純文字檢視 複製程式碼執行程式碼<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style> #box { width:200px; height:100px; background-color:#ccc; } #ant { width:100px; height:50px; background-color:#ff0000 } </style> <script src="https://code.jquery.com/jquery-3.0.0.js"></script> <script type="text/javascript"> $(document).ready(function () { var count = 0; $("#box").mouseover(function () { count = count + 1; $("#result").text(count); }) }) </script> </head> <body> <div id="box"> <div id="ant"></div> </div> <div id="result"></div> </body> </html>
在父元素上註冊事件處理函式,把滑鼠移入子元素也會觸發事件。
[HTML] 純文字檢視 複製程式碼執行程式碼<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style> #box { width:200px; height:100px; background-color:#ccc; } #ant { width:100px; height:50px; background-color:#ff0000 } </style> <script src="https://code.jquery.com/jquery-3.0.0.js"></script> <script type="text/javascript"> $(document).ready(function () { var num = { count:0 }; $("#box").mouseover(num,function (ev) { ev.data.count = ev.data.count + 1; $("#result").text(ev.data.count); }) }) </script> </head> <body> <div id="box"> <div id="ant"></div> </div> <div id="result"></div> </body> </html>
相關文章
- JavaScript mouseover 事件JavaScript事件
- jQuery中hover與mouseover與mouseenter的區別jQuery
- 防止滑鼠移出移入子元素觸發mouseout和mouseover事件事件
- jquery事件jQuery事件
- jQuery 事件jQuery事件
- jQuery 事件方法jQuery事件
- jQuery 事件冒泡jQuery事件
- jQuery hover事件jQuery事件
- jQuery事件物件jQuery事件物件
- jQuery mousemove 事件jQuery事件
- jQuery mouseup事件jQuery事件
- jQuery mousedown事件jQuery事件
- jQuery mouseout 事件jQuery事件
- jQuery mouseenter事件jQuery事件
- jQuery dblclick事件jQuery事件
- jQuery click事件jQuery事件
- jQuery submit事件jQueryMIT事件
- jQuery change事件jQuery事件
- jQuery focusout事件jQuery事件
- jQuery focusin事件jQuery事件
- jQuery blur事件jQuery事件
- jQuery focus事件jQuery事件
- jQuery scroll事件jQuery事件
- jQuery resize事件jQuery事件
- jQuery error事件jQueryError事件
- jQuery----事件jQuery事件
- jQuery 事件(二) 表單事件jQuery事件
- mouseenter與mouseover區別
- 區別mouseover與mouseenter?
- 36. jQuery 事件jQuery事件
- jQuery事件監聽jQuery事件
- jQuery 事件委託jQuery事件
- jQuery contextmenu事件jQueryContext事件
- jQuery mouseleave事件jQuery事件
- jQuery keyup事件jQuery事件
- jQuery keypress事件jQuery事件
- jQuery keydown事件jQuery事件
- jQuery select事件jQuery事件