Java教程

JavaScript实现点击一个事件后，触发另一个事件

本文主要是介绍JavaScript实现点击一个事件后，触发另一个事件，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

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：正在学习，有问题欢迎指出。

这篇关于JavaScript实现点击一个事件后，触发另一个事件的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
您可能喜欢
栏目导航