Javascript创建自定义事件

问题描述：

因此，我制作了一个tampermonkey脚本，并且我想创建一个事件侦听器来侦听视频宽度发生更改的时间，特别是当视频制作为全屏时。这就是我现在所拥有的：Javascript创建自定义事件

var htmlVideos = document.getElementsByTagName('video'); 
function checkVidWidth() { 
    for (i = 0; i < htmlVideos.length; i++) { 
     if ($(htmlVideos[i]).width() != vidWidths[i]) { 
      vidWidths[i] = $(htmlVideos[i]).width(); 
      checkVidChange(true); 
      return; 
     } 
    } 
} 
setInterval(checkVidWidth, 3);

vidWidths是视频的宽度之前的其他地方定义的数组。但我不想使用setInterval我想创建一个当$（htmlVideos [i]）。width（）更改时发生的事件。感谢您的帮助！

用户如何触发视频去全屏？有没有按钮？为什么不把一个事件附加到按钮上？然后你可以得到视频的宽度，看看它是否比按钮被点击之前更大。 –

@SamEaton它应该可以在任何带有视频的网站上工作，所以我不能只将一个事件处理程序附加到使视频全屏的按钮上，除非你知道解决方法？ – Scottiphus

答

这些事件已经存在 - 不需要构建自己的逻辑来实现这一点，当然也不需要每隔3秒运行一次代码。

可以使用fullscreenchange事件，像这样使用jQuery：

$('video').on('fullscreenchange webkitfullscreenchange mozfullscreenchange', function(e) { 
    var videoIsFullScreen = document.fullScreen || document.mozFullScreen || document.webkitIsFullScreen; 
    if (videoIsFullScreen) { 
     // video is full screen, do something...  
    } 
    else { 
     // video was full screen, has now been restored to default size 
    } 
});

请注意，我也势必将WebKit和完全兼容事件的MOZ变化。

我只是试图添加到我的脚本，但没有雪茄。这是否适用于最新版本的Chrome？ – Scottiphus

答

您可以使用全屏模式改变事件检测全屏：

$(document).on('webkitfullscreenchange mozfullscreenchange fullscreenchange MSFullscreenChange',

并使用调整EVET检测宽度变化

$('#video').resize(function() { 

    });

编辑

Resize事件CAN应用在使用jquery的窗口以外的元素上，请检查example。

我对$（...）。resize（）的理解是，它只适用于窗口，而不是单独的元素。 – Scottiphus

Javascript创建自定义事件

相关推荐