事件 | 易学教程

3种定义事件的方式

On事件名称：

优点：简单方便

缺点：只能一个事件调用1个函数。只有冒泡

h1.onclick = function(){

h1.style.backgroundColor = "deeppink"

}

AddEventlistener:

优点：同一事件可以调用多个函数，这个模式下，可以设置事件是捕获还是冒泡，默认是冒泡。

h1.addEventListener(事件的名称,事件调用起的函数，true/false(捕获/冒泡))

事件对象

每一个事件调用的执行函数，都会默认传入一个事件对象，这个对象会包含当次事件的相关信息。

冒泡事件

事件由最里面一层一层向上触发，直到HTML元素，那么这种事件模式就是冒泡事件。一般情况下就用冒泡。

捕获事件

由HTML开始一层一层向下出发，直到最小的子元素，那么这种事件模式就是捕获

点击事件、单击事件、双击事件

鼠标事件：鼠标移入、鼠标移出、鼠标悬浮

按键事件：按键按下、按键弹起、按键press

触屏事件touch

移动端的事件，跟点击事件不一样的地方在于，可以多点触控。

案例代码；

<!DOCTYPE html>

<html>

<head>

#d1{

width: 600px;

height: 400px;

margin: 0 auto;

background: skyblue;

}

</style>

</head>

<body>

手机触屏颜色改变

</div>

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>

</head>

<body>

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>

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>

.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 ="设置音频是否显示控制器"

-->

播放

</div>

下一首

</div>

</div>

//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

标签

html代码

queryselector