3种定义事件的方式
On事件名称:
优点:简单方便
缺点:只能一个事件调用1个函数。只有冒泡
h1.onclick = function(){ h1.style.backgroundColor = "deeppink" } |
AddEventlistener:
优点:同一事件可以调用多个函数,这个模式下,可以设置事件是捕获还是冒泡,默认是冒泡。
h1.addEventListener(事件的名称,事件调用起的函数,true/false(捕获/冒泡)) |
事件对象
每一个事件调用的执行函数,都会默认传入一个事件对象,这个对象会包含当次事件的相关信息。
冒泡事件
事件由最里面一层一层向上触发,直到HTML元素,那么这种事件模式就是冒泡事件。一般情况下就用冒泡。
捕获事件
由HTML开始一层一层向下出发,直到最小的子元素,那么这种事件模式就是捕获
点击事件、单击事件、双击事件
鼠标事件:鼠标移入、鼠标移出、鼠标悬浮
按键事件:按键按下、按键弹起、按键press
触屏事件touch
移动端的事件,跟点击事件不一样的地方在于,可以多点触控。
案例代码;
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #d1{ width: 600px; height: 400px; margin: 0 auto; background: skyblue; } </style> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> </head> <body>
<div id="d1"> 手机触屏颜色改变 </div> <script type="text/javascript"> var d1 = document.querySelector('#d1') console.log(d1)
//触屏事件是2009年以后才有相关的触屏事件。只能用ECMASCRIPT5,才能够实现。只能用addEventListener才能创建事件 //在触屏事件中想要获取触控点的位置,可以通过属性touches来获取多个点的触控位置。 //触屏开始事件 d1.addEventListener("touchstart",function(event){ console.log(event) }) //触摸移动事件 /*d1.addEventListener('touchmove',function(e){ console.log(e) }) //触摸结束事件 d1.addEventListener("touchend",function(e){ console.log(e) })*/
</script> </body> </html>
|
聚焦事件onfocus
当输入框被点击之后,光标在输入框闪动的时候,即为聚焦的事件。
案例:
var input1 = document.querySelector('#input1'); //聚焦事件 input1.onfocus = function(){ var alertDiv = document.createElement("div") alertDiv.className = "alert" alertDiv.innerHTML = "输入密码时候,请注意身旁无人" document.body.appendChild(alertDiv) } |
输入事件onInput
输入事件与按键事件的主要区别在于,输入事件会以输入框是否真正输入新的内容而触发事件。而按键事件是每次按键都会触发。
var d1 = document.querySelector('#d1') //输入事件 d1.oninput = function(e){ console.log(e) //假设密码当密码等于123456的时候,那么显示绿色的背景,说明密码输入是正确 console.log([d1]) if(d1.value=='123456'){ d1.style.background = "green" }else{ d1.style.background = "red" } document.querySelector('h1').innerHTML = d1.value } |
输入内容改变事件 onchange
//输入框内容变更事件,并且焦点失去之后才会触发 /*d1.onchange = function(e){ console.log(e) }*/ |
文档加载事件onload
文档或者是图片或者视频,都可以使用onload事件来进行判断内容是否加载完毕。图片想要获取宽高,必须等待图片加载完毕
案例:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <script type="text/javascript">
window.onload = function(){ //文档加载完毕 console.log('文档加载完毕') var d1 = document.querySelector('#d1') console.log(d1) }
var img = document.createElement("img") //在JavaScript里,加载属于异步。 img.src = 'img/img1.jfif' document.body.appendChild(img) console.log([img])
//调用记载完毕的事件 img.onload = function(){ console.log(img.width) console.log(img.height) }
</script> <div id="d1"> helloworld </div> </body> </html>
|
改变文档的5中方式
1、在元素的最后面追加子元素
//语法:父元素.appendChild(子元素对象)
2、在什么元素前面追加元素
//语法:父元素.insertBefore(插入的元素对象,参考对象)
document.insertBefore()
3、替换元素
//语法:父元素.replaceChild(替换的元素对象,被替换的元素对象)
document.replaceChild()
4、删除某个元素
//语法:父元素.removeChild(删除元素对象)
document.removeChild()
5、创建元素,并没有显示在页面上,都需要上面的appendChild/insertBefore/replaceChild任意一种来完成插入到页面结构中
//语法:document.createElement("元素标签的名称")
音频、视频
Audio音频
//audio常用的属性和方法
//play()播放、pause()暂停
//volume调节音量,设置的值是从0-1,0就相当于静音,1就是百分百的音量
//muted设置静音,true就静音,false不静音
//currentTime,获取和设置当前播放到什么位置
//onplay播放的事件
//onpause暂停事件
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .jdt{ width: 800px; height: 20px; line-height: 20px; background: #ccc; margin: 0 auto; display: flex;
align-items: center; } .jd{ width: 20px; height: 18px; background: deepskyblue; } </style> </head> <body> <!-- src="音频的网络资源地址" controls ="设置音频是否显示控制器"
--> <audio src="img/M500004PPCIB1Mq36U.mp3"></audio>
<div class="btn"> 播放 </div>
<div class="next"> 下一首 </div>
<div class="jdt"> <div class="jd">0%</div> </div>
<script type="text/javascript"> //audio常用的属性和方法 //play()播放、pause()暂停 //volume调节音量,设置的值是从0-1,0就相当于静音,1就是百分百的音量 //muted设置静音,true就静音,false不静音 //currentTime,获取和设置当前播放到什么位置
//onplay播放的事件 //onpause暂停事件
var a1 = document.querySelector('audio') console.log(a1) var jd = document.querySelector('.jd')
var btn = document.querySelector('.btn') btn.onclick = function(){ console.log(a1) if(btn.innerHTML.trim()=="播放"){ a1.play() btn.innerHTML = "暂停" }else{ a1.pause() btn.innerHTML = "播放" } } var interTime = null;
a1.onplay = function(e){ console.log('onplay') console.log(e)
interTime = setInterval(function(){ //获取当前的事件 var currentTime = a1.currentTime //获取当前播放进度的百分比 var num = parseInt((currentTime/a1.duration)*100) console.log(num)
var width = 800*num/100; jd.style.width = width + 'px'
jd.innerHTML = num +'%' },1000)
}
a1.onpause = function(){ clearInterval(interTime) } // a1.onplaying = function(e){ // console.log('onplaying') // console.log(e) // }
//更改歌曲 var next = document.querySelector('.next') next.onclick = function(){ a1.src = 'img/zjl.wav' a1.play() } </script> </body> </html>
|
Video视频
/* muted:静音 play():播放 pause():暂停 volume:音量 currentTime:当前播放的世界 loop:是否循环播放 duration:播放总时间 //onplay播放的事件 //onpause暂停事件 webkitRequestFullScreen():设置全屏播放,仅用于谷歌浏览器。 |
来源:https://www.cnblogs.com/xfbb/p/10976592.html