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

时间 2019-12-07

标签 jquery 事件动画栏目 JQuery 繁體版

原文原文链接

1、事件

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

1.1.1 执行时机

$(document).ready()方法注册的事件处理程序，在DOM彻底就绪时就能够被调用，可是，这并不意味着这些元素关联的文件都已经下载完毕，若是脚本中要获取图片的长度与宽度等属性，请不要用此方法。html
window.onload方法是在网页中全部的元素（包括元素的全部关联文件）彻底加载到浏览器后才执行，即JS此时才能够访问网页中的任何元素。jquery

1.1.2 屡次使用

$(document).ready()方法浏览器

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

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

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

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

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

window.onloadide

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

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

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

虽然这样的能解决某些问题，但仍是不能知足某些需求。例若有多个js文件，每一个文件都要用到window.onload方法，这种状况下用上面的方法就会很是麻烦，而$(document).ready()就能够处理这些状况。this

1.2 事件绑定`bind`

bind(type [, data], fn)spa

type：事件类型，包括click、mousedown等。code
data：做为event.data属性传递给事件对象的额外数据对象，可选。htm
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事件。