Ⅰ 原生js事件監聽有哪些方法,jq又有哪些,jq中這些方法有何區別
原生鍵盤監聽事件:按下一次按鍵,分為三個過程,按下—按住—松開
onkeydown:某個鍵被按下
onkeypress:某個鍵盤的鍵被按下或按住
onkeyup:某個鍵盤的鍵被松開
使用方法,一般來說,鍵盤監聽是直接在整個頁面文檔上進行監聽的,也就是document上
以下是原生的使用案例
//實際使用
document.onkeydown=function(e){ //對整個頁面文檔監聽
var keyNum=window.event ? e.keyCode :e.which; //獲取被按下的鍵值
//判斷如果用戶按下了回車鍵(keycody=13)
if(keyNum==13){
alert('您按下了回車');
}
//判斷如果用戶按下了空格鍵(keycode=32),
if(keyNum==32){
alert('您按下了空格');
}
}
剩下另外兩個按鍵方法同理
jquery的方式監聽鍵盤事件
jquery的也分為三個過程,但是在事件名稱上有所不同
keyup:某個鍵盤的鍵被松開
keydown:某個鍵被按下
keypress:某個鍵盤的鍵被按下或按住
Ⅱ js事件監聽 addEventListener()
用法:
參數:明鬧
useCapture設置為true時,會以事件捕獲的順序執行,為false時,會按照事件冒泡的順激睜罩序早物執行。
Ⅲ JS判斷視頻Video的播放、暫停、結束完成及獲取長度事件監聽處理
(1)HTML頁面視頻標簽大體如下
<video id="video"controls="controls">
<source src="./video/2.mp4" type="video/mp4" />
</video>
(2)視頻載入後獲取視頻的長度
varelevideo = document.getElementById("video");
elevideo.addEventListener('loadedmetadata', function () {//載入數據
//視頻的總長度 console.log(elevideo.ration);
});
(3)視頻開始播放
varelevideo = document.getElementById("video");
elevideo.addEventListener('play', function () {//播放開始執行的函數
console.log("開始播放");
});
(4) 視頻正在播放中
varelevideo = document.getElementById("video");
elevideo.addEventListener('playing', function () {//播放中console.log("播放中");
});
(5)視頻載入中
varelevideo = document.getElementById("video");
elevideo.addEventListener('waiting', function () {//載入
console.log("載入中");
});
(6)視頻暫停播放
varelevideo = document.getElementById("video");
elevideo.addEventListener('pause', function () {//暫停開始執行的函數
console.log("暫停播放");
});
(7)視頻結束播放
varelevideo = document.getElementById("video");
elevideo.addEventListener('ended', function () {//結束
console.log("播放結束");
}, false);
Ⅳ js中監聽iframe點擊事件
在js中,需要監聽iframe的點擊事件,但是因為瀏覽器的同源策略,是無法監聽到的,只能另闢蹊徑去解決它
注意,僅限於pc網站,意思就是必須要有滑鼠移入移出iframe的操作
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Detect IFrame Clicks</title>
<script src="./jquery-3.4.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var currentObj=Object
var isOverIFrame = false;
function processMouseOut(e) {
console.log('out iframe',e.target);
currentObj=e.target
isOverIFrame = false;
top.focus();
}
function processMouseOver(e) {
// log("IFrame mouse >> OVER << detected.");
console.log('in iframe',e.target);
currentObj=e.target
isOverIFrame = true;
}
function processIFrameClick(event) {
if(isOverIFrame) {
console.log('click iframe',event.target,currentObj);
}
}
function attachOnloadEvent(func, obj) {
if(typeof window.addEventListener != 'undefined') {
window.addEventListener('load', func, false);
} else if (typeof document.addEventListener != 'undefined') {
document.addEventListener('load', func, false);
} else if (typeof window.attachEvent != 'undefined') {
window.attachEvent('onload', func);
} else {
if (typeof window.onload == 'function') {
var oldonload = onload;
window.onload = function() {
oldonload();
func();
};
} else {
window.onload = func;
}
}
}
function init() {
var element = document.getElementsByTagName("iframe");
for (var i=0; i<element.length; i++) {
element[i].onmouseover = processMouseOver;
element[i].onmouseout = processMouseOut;
}
if (typeof window.attachEvent != 'undefined') {
top.attachEvent('onblur', processIFrameClick);
}
else if (typeof window.addEventListener != 'undefined') {
top.addEventListener('blur', processIFrameClick, false);
}
}
attachOnloadEvent(init);
});
</script>
</head>
<body>
<iframe src="https://www.hao123.com" width="80%" height="600px"></iframe>
<iframe src="https://www..com" width="80%" height="600px"></iframe>
</form>
</body>
</html>
復制上邊整段html,打開console控制台,即可解決這個問題,親測好用
Ⅳ js的監聽事件
<table id="table_id">
<tr>
<td><p>1,1</p></td>
<td><p>1,1</p></td>
<td><p>1,1</p></td>
<td><p>1,1</p></td>
</tr>
<tr>
<td><p>1,1</p></td>
<td><p>1,1</p></td>
<td><p>1,1</p></td>
<td><p>1,1</p></td>
</tr>
<tr>
<td><p>1,1</p></td>
<td><p>1,1</p></td>
<td><p>1,1</p></td>
<td><p>1,1</p></td>
</tr>
<tr>
<td><p>1,1</p></td>
<td><p>1,1</p></td>
<td><p>1,1</p></td>
<td><p>1,1</p></td>
</tr>
</table>
<p>kkkkkkkkkk</p>
<script type="text/javascript">
var tb=document.getElementById('table_id') //獲取到這個table,用其它方法也可以
ps=tb.getElementsByTagName("p"),
trs=tb.getElementsByTagName("tr")
trs.index=function(tr){
for(var i=0;i<this.length;i++){
if(this[i]===tr)return i
}
}
for(var i=0;i<ps.length;i++){
ps[i].onclick=function(){
var pp=this.parentNode.parentNode //要確定這樣的層次,table里的p全在tr->td->裡面
var tds=pp.getElementsByTagName("td")
tds.index=trs.index
alert(tds.index(this.parentNode)+"\n"+trs.index(pp))
}
}
</script>
索引已經有了,其中的規律你看下就明白了
Ⅵ js 怎麼監聽到頁面關閉或頁面跳轉事件
js 監聽到頁面關閉或頁面跳轉事件。
javascript捕獲窗口關閉事件有兩回種方法答 onbeforeunload(),onUnload() 用法有兩種:
1. function
window.onbeforeunload() { alert("遠標培訓為您關閉窗口")} function
window.onunload() { alert("遠標培訓為您關閉窗口")}
2.Onunload,onbeforeunload都是在刷新或關閉時調用,可以在<script>腳本中通過window.onunload來指定或者在<body>里指定。
區別在於onbeforeunload在onunload之前執行,它還可以阻止onunload的執行。
Ⅶ js為元素添加監聽事件
語法
element.addEventListener(event, function, useCapture);
第一個參數是事件的類型(比如 "click" 或 "mousedown")。
第二個參數是當事件發生時我們需要調用的函數。
第三個參數是布爾值,指定使用事件冒泡還是事件捕獲。此參數是可選的。
注意:請勿對事件使用 "on" 前綴;請使用 "click" 代替 "onclick"。
addEventListener可以對一個dom添加多個監聽器,並且會順序執行。
開發中,會遇到多個js文件都使用window.onload,然而只有最後一個綁定的生效,如下:
window.onload = func1();
window.onload = func2();
這時可以用addEventListener來解決:
window.addEventListener('load', func1);
window.addEventListener('load', func2);
Ⅷ js怎麼自定義事件,並能讓用on事件監聽
你這個問題全部內容應該是如下吧:
在視頻播放的時候,能夠用on監聽事件的觸發專,如下:
player.on('pause',function(){ console.log('視頻暫停屬');
})
player.on('ended',function(){ console.log('視頻結束')
})
這個是什麼原理,怎麼自定義類似pause、ended的事件,並能夠用on監聽?麻煩指教
相當於來說你要維護一個事件隊列。
player對象大概有這么些屬性
{ on: func(key, callback),
emit: func(key),
events: object
}
events是一個對象,數據結構如下:
{ pause: [func, func]
}
調用on函數時,把event的key以及callback添加到events中。
調用emit函數表示相應事件觸發,根據相應的key從events中獲取相應的callback數組,依次執行函數。
Ⅸ 如何用js監聽滾動條滾動事件
js監視滾動事件的函數是onscroll
js語法:element.onscroll = functionReference
html語法:<elementonscroll="myScript">
Ⅹ js如何監聽刷卡機的刷卡事件
第一種監聽方式,也是最普遍使用的方式,信襪凳是直接在代碼上載入事件,產生效果:
第二種監聽方式,是使滑旅用DOM的方式好猜獲取對象,並載入事件: