事件
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()：设置全屏播放，仅用于谷歌浏览器。 |
