JavaScript实现点击一个事件后，触发另一个事件
有道H5作业题：点击一个全屏按钮实现视频的全屏显示。
实现这个功能是一个点击的动作一共两个事件：1、点击这个全屏按钮的onclick事件；2、视频全屏播放的事件
实现代码：
下面是HTML代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>helloworld</title>
</head>
<body>
<figure style="text-align: center">
<figcaption style="margin: 10px">DIY视频播放器</figcaption>
<video id="video" src="fun.mp4" style="width: 500px;" onclick="fullScreen(this)">
<span>您的浏览器不支持video标签，请换个浏览器试一下吧</span>
</video>
<div>
<progress id="progress" value="0" max="100" style="width: 450px"></progress>
<span id="curTime">00:00</span>/<span id="totalTime">01:31</span>
</div>
<div>
<button id="btn_play">播放</button>
<button id="btn_pause">暂停</button>
<button id="btn_muted">静音</button>
<button id="btn_fullScreen">全屏</button>
<input type="range" value='0.1' nae="range" id="btn_volume" min="0" max="1" step='0.1'>
<button id="btn_go">加速</button>
<button id="btn_back">减速</button>
<button id="go_five">快进5s</button>
<button id="back_five">后退5s</button>
</div>
</figure>
</body>
</html>
下面是js代码：
//全屏
function fullScreen(ele){
if(ele.mozRequestFullScreen){
ele.mozRequestFullScreen();//火狐浏览器
}else if(ele.webkitRequestFullscreen){
ele.webkitRequestFullscreen();//谷歌浏览器
}else if(ele.oRequestFullscreen){
ele.oRequestFullscreen(); //opera浏览器
}else if(ele.msRequestFullscreen){
ele.msRequestFullscreen(); //ie浏览器
}else if(ele.requestFullscreen){
ele.requestFullscreen();
}
}
//视频全屏
document.getElementById("btn_fullScreen").onclick = function(){
/*
*createEvent("myEvent")
*创建一个事件对象，名字为evt，类型为HTMLEvent
*/
var evt = document.createEvent("HTMLEvents");
/*
*initEvent("click", true, true)
*实例化创建好的事件对象
* 第一个参数：事件类型（就好像是click还是submit）
* 第二个参数：是否冒泡
* 第三个参数：是否阻止浏览器默认行为（例如阻止submit事件提交表单）
*/
evt.initEvent("click", true, true);
/*
*触发自定义事件
*/
document.getElementById("video").dispatchEvent(evt);
}
btn_fullScreen.onclick这个就是第一个点击全屏按钮这个事件onclick="fullScreen(this)"就是我们想要视频播放事件
这就实现了通过点击全屏按钮，触发视频全屏播放的功能。
最后，还有一个更简便的方式
document.getElementById("btn_fullScreen").onclick = function(){
fullScreen(video);
}
直接全屏Ps：正在学习，有问题欢迎指出。