jQuery事件--浏览器事件

最新推荐文章于 2024-07-30 11:51:58 发布

三知之灵

最新推荐文章于 2024-07-30 11:51:58 发布

阅读量1.9k

点赞数

分类专栏： JQuery

本文链接：https://blog.csdn.net/tjj3027/article/details/79419940

版权

JQuery 专栏收录该内容

39 篇文章 1 订阅

订阅专栏

浏览器事件

事件列表

方法	说明
scroll([[data],fn])	当用户滚动指定的元素时，会发生 scroll 事件。
resize([[data],fn])	当调整浏览器窗口的大小时，发生 resize 事件。
~~error([[data],fn])~~^3.0-	当元素遇到错误（没有正确载入）时，发生 error 事件。

事件说明

.scroll(）

语法

.scroll()
.scroll(fn）
.scroll([data],fn)

scroll 事件适用于所有可滚动的元素和 window 对象（浏览器窗口）。

参数说明

参数	说明
fn	Function类型在每一个匹配元素的scroll事件中绑定的处理函数。
data	Object类型一个对象,它包含的数据键值对映射将被传递给事件处理程序

这个函数的前两个用法是 .bind(‘scroll’, handler) 的快捷方式，第3个不带参数的用法是 .trigger(‘scroll’) 的快捷方式。

当用户在元素内执行了滚动操作，就会在这个元素上触发scroll事件。它适用于window对象，但也可以是可滚动frames与CSS overflow属性设置为scroll的元素（或auto时，元素的显示高度小于其内容高度）。

举例&说明

HTML：

<div id="target" style="overflow: scroll; width: 200px; height: 100px;">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit,
  sed do eiusmod tempor incididunt ut labore et dolore magna
  aliqua. Ut enim ad minim veniam, quis nostrud exercitation
  ullamco laboris nisi ut aliquip ex ea commodo consequat.
  Duis aute irure dolor in reprehenderit in voluptate velit
  esse cillum dolore eu fugiat nulla pariatur. Excepteur
  sint occaecat cupidatat non proident, sunt in culpa qui
  officia deserunt mollit anim id est laborum.
</div>
<div id="other">
  Trigger the handler
</div>
<div id="log"></div>

scroll事件处理函数可以绑定到这个元素：

$('#target').scroll(function() {
  $('#log').append('<div>Handler for .scroll() called.</div>');
});

调用不带参数的 .scroll() 方法，手动触发这个事件：

$('#other').click(function() {
  $('#target').scroll();
});

每当元素的滚动位置的变化时，该元素就会触发scroll事件，不管什么原因。鼠标点击或拖动滚动条，拖动里面的元素，按箭头键，或使用鼠标的滚轮都可能导致触发此事件。

注意事项：
.select()方法只是作为.on( “select”, handler )的一个速记写法，移除该事件可以使用.off( “select” )

页面滚动时触发一系列动作：

<!DOCTYPE html>
<html>
<head>
  <style>
  div { color:blue; }
  p { color:green; }
  span { color:red; display:none; }
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <div>Try scrolling the iframe.</div>
  <p>Paragraph - <span>Scroll happened!</span></p>
<script>
$("p").clone().appendTo(document.body);
$("p").clone().appendTo(document.body);
$("p").clone().appendTo(document.body);
$(window).scroll(function () {
  $("span").css("display", "inline").fadeOut("slow");
});
</script>

</body>
</html>

.resize (）

当浏览器window的尺寸改变时，window元素上绑定的resize事件将被触发

$(window).resize(function() {
  $('#log').append('<div>Handler for .resize() called.</div>');
});

只要在浏览器窗口的大小改变时，根据不同的浏览器，该消息被追加到<div id="log">一次或多次

resize 事件处理中的代码，不应该依赖于事件被调用的次数。由于不同浏览器对该事件实现的方式不同，该事件被调用的时机也不同。例如，对于 Internet Explorer 或基于 WebKit 的浏览器（例如，Safari 和 Chrome）而言，resize 事件在窗口改变的过程中，会被连续调用。在某些浏览器，如 Opera，该事件只在调整窗口大小操作结束时被调用。

.resize()方法只是作为.on( “resize”, handler )的一个速记写法，移除该事件可以使用.off( “resize” )。

语法

.resize()
.resize(fn）
.resize([data],fn)

参数说明

参数	说明
fn	Function类型 resize事件中绑定的处理函数。
data	Object类型一个对象,它包含的数据键值对映射将被传递给事件处理程序

.resize(fn）用法是 .bind(‘resize’, handler) ; .resize()用法是 .trigger(‘resize’)

返回值

.resize()返回jQuery

举例&说明

当窗口大小改变时（或改变后），查看窗口的宽度:

$(window).resize(function() {
  $('body').prepend('<div>' + $(window).width() + '</div>');
});

.error (）

这个函数会调用所有绑定到error事件上的函数，包括在对应元素上的浏览器默认行为。可以通过在某个绑定的函数中返回false来防止触发浏览器的默认行为。error事件通常可以在元素由于点击或者tab导航失去焦点时触发。

对于error事件，没有一个公众的标准。在大多数浏览器中，当页面的JavaScript发生错误时，window对象会触发error事件;当图像的src属性无效时，比如文件不存在或者图像数据错误时，也会触发图像对象的error事件。

如果异常是由window对象抛出，事件处理函数将会被传入三个参数：
1. 描述事件的信息 (“varName is not defined”, “missing operator in expression”, 等等.),
2. 包含错误的文档的完整URL
3. 异常发生的行数如果事件处理函数返回true，则表示事件已经被处理，浏览器将认为没有异常。

.error()方法只是作为.on( “error”, handler )的一个速记写法，移除该事件可以使用.off( “error” )。

语法

.error (fn）

添加的版本: 1.0，过时版本: 1.8, 删除版本: 3.0

.error ([data],fn)

添加的版本: 1.4.3，过时版本: 1.8, 删除版本: 3.0

参数说明

参数	说明
fn	Function类型 error 事件中绑定的处理函数。
data	任意类型一个对象,它包含的数据键值对映射将被传递给事件处理程序

从jQuery 1.8 开始， .error() 方法已被宣告过时。使用.on( “error”, handler )来代替
将事件处理程序附加到error事件。

error事件被发送到元素，比如一张图片被引用，由浏览器加载。如果没有正确载入，这个事件就会被调用。

例子，考虑一个简单的图像页面：

<img alt="Book" id="book" />

事件处理器可以绑定到图像上：

$('#book')
  .error(function() {
    alert('Handler for .error() called.')
  })
  .attr("src", "missing.png");

如果图像无法加载（例如，因为目前所提供的URL不存在），警告显示：Handler for .error() called.

这个事件处理程序必须在浏览器触发error事件之前绑定，这就是为什么示例绑定的处理函数后设置src属性。此外，当页面保存到本地的时候此事件可能无法正确触发。由于error依赖于正常的HTTP状态码，如果URL使用file:协议，它通常不会被触发。

一个jQuery的 error 事件处理器不应该附加到 window 对象上。当一个脚本错误的时候，浏览器就会触发 window 的 error 事件。无论如何， window 的 error 事件接收不同的参数和返回值与传统的事件不一样。若要绑定 window 的 error 事件，请使用window.onerror代替。

举例&说明

要使用其他图片替换所有丢失的图片，您可以使用一个内部更新src属性的回调函数,传递给.error()。注意要确保替换图像存在; 否则error 事件将无限期的触发。

// 如果 missing.png 丢失, 那么将被替换为 replacement.png
$( "img" )
  .error(function() {
    $( this ).attr( "src", "replacement.png" );
  })
  .attr( "src", "missing.png" );