Ⅰ 原生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的方式好猜获取对象,并加载事件: