（jQuery） jQuery中的事件与动画（上）

2024年4月19日 175次阅读 来源: kimi013

一、事件

1.1 $(document).ready()与window.onload的比较

1.1.1 执行时机

  • $(document).ready()方法注册的事件处理程序，在DOM完全就绪时就可以被调用，但是，这并不意味着这些元素关联的文件都已经下载完毕，如果脚本中要获取图片的长度与宽度等属性，请不要用此方法。

  • window.onload方法是在网页中所有的元素（包括元素的所有关联文件）完全加载到浏览器后才执行，即JS此时才可以访问网页中的任何元素。

1.1.2 多次使用

  • $(document).ready()方法

function one() {
  alert('one');
}

function two() {
  alert('two');
}

$(document).ready(function() {
  one();
});

$(document).ready(function() {
  two();
});

运行代码后，会先弹出字符串one对话框，然后再弹出字符串two对话框。

  • window.onload

// 省略one与two函数的声明
window.onload = one;
window.onload = two;

运行代码后，只弹出字符串two对话框。因为load事件一次只能保存对一个函数的引用，它会自动用后面的函数覆盖前面的函数。因此不能在现在的行为上添加新的行为。
可以用下面的方法：

window.onload = function () {
  one();
  two();
}

虽然这样的能解决某些问题，但还是不能满足某些需求。例如有多个js文件，每个文件都要用到window.onload方法，这种情况下用上面的方法就会非常麻烦，而$(document).ready()就可以处理这些情况。

1.2 事件绑定bind

bind(type [, data], fn)

  • type：事件类型，包括click、mousedown等。

  • data：作为event.data属性传递给事件对象的额外数据对象，可选。

  • fn：用来绑定的处理函数。

$(function() {
  $('#panel h5.header').bind('mouseover', function(event) {
    $(this).next().show();
  }).bind('mouseout', function(event) {
    $(this).next().hide();
  });
});

1.3 合成事件

1.3.1 hover()方法

hover(enterFn, leaveFn)

hover()方法用于模拟光标悬停事件。当光标移动到元素上时，会触发指定的第一个函数（enterFn)，当光标移出这个元素时，会触发指定的第二个函数（leaveFn)。hover()方法替代的是bind('mouseenter')与bind('mouseleave')。

$(function() {
  $('.#panel h5.header').hover(function() {
    $(this).next().show();
  }, function() {
    $(this).next().hide();
  });
});

1.4 事件冒泡

1.4.1 什么是冒泡

<body>
  <div class = "content">
    <span></span>
  </div>
</body>
// 为span绑定事件
$('span').bind('click', function(event) {
  alert('Span is clicked.');
});
// 为div绑定事件
$('.content').bind('click', function(event) {
  alert('Div is clicked.');
});
// 为body绑定事件
$('body').bind('click', function(event) {
  alert('Body is clicked.');
});

当点击<span>元素时，<span>、<div>、<body>元素的click事件依次被触发。
事件会按照DOM的层次结构像水泡一样不断向上直至顶端。

1.4.2 事件冒泡引发的问题

  • 停止事件冒泡
    事件冒泡会引起预料之外的效果。可用stopPropagation()方法来停止冒泡。

$('span').bind('click', function(event) {
  event.stopPropagation();
  alert('Span is clicked.');
});

此时点击<span>元素时，只会执行<span>的click事件。

  • 阻止默认行为
    可用preventDefault()方法来阻止元素的默认行为。

举例，在项目中，经常需要验证表单，在单击“提交”按钮时，验证表单内容，例如某元素是否是必填字段，某元素长度是否够6位等，当表单不符合提交条件时，要阻止表单的提交（默认行为）。

$(function() {
  $('#sub').bind('click', function(event) {
    var username = $('#username').val();
    if (username === '') {
      $('#msg').html('<p>文框的值不能为空</p>');
      event.preventDefault();
    }
  });
});

如果想同时对事件对象停止冒泡和默认行为，可以在事件处理函数return false。这是对在事件对象上同时调用stopPropagation()方法和event.preventDefault()。

  • 事件捕获
    事件捕获和事件冒泡是刚好相反的两个过程，事件捕获是从最顶端往下开始触发。

并非所有主流浏览器都支持事件捕获，并且这个缺陷无法通过js来修复。

1.6 移除事件

`unbind([type], [data]);

第一个参数是事件类型，第二个参数是将要移除的函数：

  • 如果没有参数，则删除所有绑定的事件。

  • 如果提供了事件类型作为参数，则只删除该类型的绑定事件。

  • 如果把绑定时传递的函数作为第二个参数，则只有这个特定的事件处理函数会被删除。

1.7 one()方法

one(type, [data], fn)

one()方法的结构与bind()方法类似，使方法也与bind()方法相同。使用one()方法为元素绑定事件后，只在第一次触发事件时，处理函数才执行，之后的触发毫无作用。

1.8 模拟操作

trigger(type, [data])

  • 第一个参数是要触发的事件类型

  • 第二个参数是要传递给事件处理函数的附加数据

1.8.1 常用模拟

使用trigger()方法

$('#btn').trigger('click');
// or
$('#btn).click();

1.8.2 触发自定义事件

$('#btn').bind('myClick', function () {
  // do sth
});

$('#btn').trigger('myClick');

1.8.3 传递数据

// 获取数据
$('#btn').bind('myClick', function(event, msg1, msg2) {
  $('#test').append('<p>' + msg1 + msg2 + '</p>'); 
});

// 传递两个数据
$('#btn').trigger('myClick', ['我的自定义', '事件']);

1.8.4 执行默认操作

trigger()方法触发事件后，会执行浏览器默认操作。
如果只想触发绑定的事件，而不想执行浏览器的默认操作，可以使用triggerHandler()方法。

$('input').triggerHandler('focus');

1.9 其他用法

1.9.1 绑定多个事件类型

$(function() {
  $('div').bind('mouseover mouseout', function(event) {
    $(this).toggleClass('over');
  });
});

1.9.2 添加事件命名空间，便于管理

$(function() {
  $('div').bind('click.plugin', function(event) {
    $('body').append('<p>click event</p>');
  });
  $('div').bind('mouseover.plugin', function (event) {
    $('body').append('<p>mouseover event</p>');
  })
  $('div').bind('dbclick', function(event) {
    $('body').append('<p>dbclick event</p>');
  });
  $('button').bind('click', function(event) {
    $('div').unbind('.plugin');
  });
});

点击<button>元素后，.plugin的命名空间被删除，而dbclick事件依然存在。

1.9.3 相同事件名称，不同命名空间执行方法

$(function() {
  $('div').bind('click', function(event) {
    $('body').append('<p>click event</p>');
  });
  $('div').bind('click.plugin', function(event) {
    $('body').append('<p>click.plugin event</p>');
  });
  $('button').bind('click', function(event) {
    $('div').trigger('click!'); // 注意click后面的叹号
  });
});

trigger('click!')中叹号的作用是只触发click事件，不触发click.plugin事件。

    原文作者：kimi013
    原文地址: https://segmentfault.com/a/1190000006889542
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞