事件

扶醉桌前 提交于 2020-03-27 19:05:31

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-10就相当于静音,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-10就相当于静音,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():设置全屏播放,仅用于谷歌浏览器。

 

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!