当前页面的脚本发生错误 为空或不是对象 【JavaScript 教程】事件——其他常见事件

11/28 08:20:33 来源网站:辅助卡盟网

上面的代码将scroll事件的触发频率,限制在一秒一次。

lodash函数库提供了现成的throttle函数,可以直接使用。

window.addEventListener('scroll', _.throttle(callback, 1000));

本书前面介绍过debounce的概念,throttle与它区别在于,throttle是“节流”,确保一段时间内只执行一次,而debounce是“防抖”,要连续操作结束后再执行。以网页滚动为例,debounce要等到用户停止滚动后才执行,throttle则是如果用户一直在滚动网页,那么在滚动过程中还是会执行。

4.2、resize 事件

resize事件在改变浏览器窗口大小时触发,主要发生在window对象上面。

var resizeMethod = function () {
if (document.body.clientWidth < 768) {
console.log('移动设备的视口');
}
};

window.addEventListener('resize', resizeMethod, true);

该事件也会连续地大量触发,所以最好像上面的scroll事件一样,通过throttle函数控制事件触发频率。

4.3、fullscreenchange 事件,fullscreenerror 事件

fullscreenchange事件在进入或退出全屏状态时触发,该事件发生在document对象上面。

document.addEventListener('fullscreenchange', function (event) {
console.log(document.fullscreenElement);
});

fullscreenerror事件在浏览器无法切换到全屏状态时触发。

5、剪贴板事件

以下三个事件属于剪贴板操作的相关事件。

这三个事件都是ClipboardEvent接口的实例。ClipboardEvent有一个实例属性clipboardData当前页面的脚本发生错误 为空或不是对象,是一个 DataTransfer 对象,存放剪贴的数据。具体的 API 接口和操作方法,请参见《拖拉事件》的 DataTransfer 对象部分。

document.addEventListener('copy', function (e) {
e.clipboardData.setData('text/plain', 'Hello, world!');
e.clipboardData.setData('text/html', 'Hello, world!');
e.preventDefault();
});

上面的代码使得复制进入剪贴板的,都是开发者指定的数据,而不是用户想要拷贝的数据。

6、焦点事件

焦点事件发生在元素节点和document对象上面,与获得或失去焦点相关。它主要包括以下四个事件。

这四个事件都继承了FocusEvent接口。FocusEvent实例具有以下属性。

由于focus和blur事件不会冒泡,只能在捕获阶段触发,所以addEventListener方法的第三个参数需要设为true。

form.addEventListener('focus', function (event) {
event.target.style.background = 'pink';
}, true);

form.addEventListener('blur', function (event) {
event.target.style.background = '';
}, true);

    暂无相关资讯
当前页面的脚本发生错误 为空或不是对象 【JavaScript 教程】事件——其他常见事件