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：正在學習，有問題歡迎指出。