02-老马jQuery教程-jQuery事件处理

2023-03-06 15:00:33

1. 绑定简单事件

在DOM中DOM0级绑定事件的方式是直接给事件属性赋值，但是这样有个缺点就是每次指定的事件处理程序会把之前的覆盖掉。

jQuery简单绑定事件的方式，可以让我绑定多个事件处理程序跟DOM2级绑定事件的方式一样.

如果需要了解DOM的教程参考地址：https://chuanke.baidu.com/v5508922-239160-1771112.html

1.1 简单绑定click事件

语法格式：click([[data],fn])
参数：
- data 可以省略，给可传入到函数fn处理。可以通过事件处理程序的事件对象的data属性获取此值。
- fn 事件处理程序。fn的内部作用域中this指向当前的DOM对象（注意不是jQuery的包装对象)
返回值： jQuery的包装对象！！！（链式编程的原理)

// 例如：

$('#btn').click(function(){});

1.2 jQuery简单绑定事件方式和DOM0级的区别

DOM0级绑定事件的方式

var btn = document.getElementById('btn');

btn.onclick = function(e) {

  console.log(1);

}

// 第二次赋值会把之前的覆盖掉。

btn.onclick = function(e) {

  console.log(2);

}

jQuery简单绑定事件的方式

var btn = $('#btn');

btn.click(function(){

  console.log(1);

});

// 多次绑定click不会覆盖。

btn.click(function(){

  console.log(2);

})

总结：DOM0级绑定事件的方式只能指定一个事件处理程序，不能指定多个。jQuery的可以绑定多次，而且相互不干扰。

1.3 其他常用绑定简单事件的方法

方法名	实例	说明
`blur([[data],fn])`	`$("p").blur();`	当元素失去焦点时触发 blur 事件，这个函数会调用执行绑定到blur事件的所有函数，包括浏览器的默认行为。可以通过返回false来防止触发浏览器的默认行为。blur事件会在元素失去焦点的时候触发，既可以是鼠标行为，也可以是按tab键离开的
`focus([[data],fn])`	`$("p").focus();`	当元素获得焦点时，触发 focus 事件。
`focusin([data],fn)`	`$("p").focusin();`	当元素获得焦点时，触发 focusin 事件。当元素获得焦点时，触发 focusin 事件。
`focusout([data],fn)`	`$("p").focusout();`	当元素失去焦点时触发 focusout 事件。focusout事件跟blur事件区别在于，他可以在父元素上检测子元素失去焦点的情况
`change([[data],fn])`	`$('p').change();`	当元素的值发生改变时，会发生 change 事件该事件仅适用于文本域（text field），以及 textarea 和 select 元素。当用于 select 元素时，change 事件会在选择某个选项时发生。当用于 text field 或 text area 时，该事件会在元素失去焦点时发生
`mousedown([[data],fn])`	`$("p").mousedown(fn);`	当鼠标指针移动到元素上方，并按下鼠标按键时，会发生 mousedown 事件mousedown 与 click 事件不同，mousedown 事件仅需要按键被按下，而不需要松开即可发生
`mouseleave([[data],fn])`	`$("p").mouseleave(fn)`	当鼠标指针离开元素时，会发生 mouseleave 事件。该事件大多数时候会与mouseenter 事件一起使用。与 mouseout 事件不同，只有在鼠标指针离开被选元素时，才会触发 mouseleave 事件。如果鼠标指针离开任何子元素，同样会触发 mouseout 事件。
`resize([[data],fn])`	`$('p').resize(fn)`	当调整浏览器窗口的大小时，发生 resize 事件。
`scroll([[data],fn])`	`$('p').scroll(fn)`	当用户滚动指定的元素时，会发生 scroll 事件。scroll 事件适用于所有可滚动的元素和 window 对象（浏览器窗口）
`submit([[data],fn])`	`$("form").submit();`	当提交表单时，会发生 submit 事件。该事件只适用于表单元素。
`keydown([[data],fn])`	`$('p').keydown(fn);`	当键盘或按钮被按下时，发生 keydown 事件。注释：如果在文档元素上进行设置，则无论元素是否获得焦点，该事件都会发生。
`keyup([[data],fn])`	`$('p').keyup(fn);`	当按钮被松开时，发生 keyup 事件。它发生在当前获得焦点的元素上。注释：如果在文档元素上进行设置，则无论元素是否获得焦点，该事件都会发生。
`keypress([[data],fn])`	`$('p').keypress(fn);`	当键盘或按钮被按下时，发生 keypress 事件。keypress 事件与 keydown 事件类似。当按钮被按下时，会发生该事件。它发生在当前获得焦点的元素上。不过，与 keydown 事件不同，每插入一个字符，就会发生 keypress 事件。注释：如果在文档元素上进行设置，则无论元素是否获得焦点，该事件都会发生。
`load([[data],fn])`	`$(window).load(fn);`	当页面加载完成
`unload([[data],fn])`	`$(window).unload(fn);`	当页面卸载完成后，离开页面时。

所有的简单事件的返回值都是调用此方法的jQuery包装对象。

1.4 触发这些简单事件

1.4.1 直接调用jQuery包装对象的简单绑定事件方法

$('#btn').click(); // 触发点击事件

$('#btn').dbclick(); // 触发双击事件

$('#btn').focus(); // 触发获取焦点事件

$('#btn').blur(); // 触发失去焦点事件

$('#btn').submit(); // 触发失去焦点事件

1.4.2 trigger触发事件

包装对象的trigger(type,[data])方法，可以帮助开发人员通过代码触发事件的执行，跟正常触发一样，会进行事件冒泡。

参数：
- type 触发的事件类型
- data 给事件处理程序的事件对象的额外�参数，数组类型
返回值：依然是jQuery的包装对象
实例：

//提交第一个表单，但不用submit()

$("form:first").trigger("submit")

//给一个事件传递参数

$("p").click( function (event, a, b) {

  // 一个普通的点击事件时，a和b是undefined类型

  // 如果用下面的语句触发，那么a指向"foo",而b指向"bar"

} ).trigger("click", ["foo", "bar"]);

1.4.3 触发事件处理程序执行

触发事件处理程序执行函数：riggerHandler(type, [data])

参数：
- type:要触发的事件类型
- data:传递给事件处理函数的附加参数
说明
这个特别的方法将会触发指定的事件类型上所有绑定的处理函数。但不会执行浏览器默认动作，也不会产生事件冒泡。
这个方法的行为表现与trigger类似，但有以下三个主要区别：
- 第一，他不会触发浏览器默认事件。
- 第二，只触发jQuery对象集合中第一个元素的事件处理函数。
- 第三，这个方法的返回的是事件处理函数的返回值，而不是据有可链性的jQuery对象。此外，如果最开始的jQuery对象集合为空，则这个方法返回 undefined 。
实例

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

2. 高级绑定事件方法

2.1 bind绑定事件的方式

语法：bind(type,[data],fn)，这个也是包装对象的方法。
含义：为每个匹配元素的特定事件绑定事件处理函数。在绑定事件之前，一定要确保页面中的DOM元素已经就绪。如果没有就绪或者后面动态添加的DOM元素则不会动态更新事件处理程序。

参数：

type: 含有一个或多个事件类型的字符串，由空格分隔多个事件。比如"click"或"submit"，还可以是自定义事件名。
data:作为event.data属性值传递给事件对象的额外数据对象
fn:绑定到每个匹配元素的事件上面的处理函数

实例：

$("form").bind("submit", function() {

  return false; // 取消默认操作。

})

// 同时绑定多个事件

$('#foo').bind('mouseenter mouseleave', function() {

  $(this).toggleClass('entered');

});

//同时绑定多个事件类型/处理程序

$("button").bind({

  click: function(){

    $("p").slideToggle();

  },

  mouseover: function(){

    $("body").css("background-color","red");

  },

  mouseout: function(){

    $("body").css("background-color","#FFFFFF");

  }

});

2.2 绑定事件只执行一次的事件处理程序

语法：$dom.one(type,[data],fn)

说明：为每一个匹配元素的特定事件（像click）绑定一个一次性的事件处理函数。在每个对象上，这个事件处理函数只会被执行一次。其他规则与bind()函数相同。这个事件处理函数会接收到一个事件对象，可以通过它来阻止（浏览器）默认的行为。如果既想取消默认的行为，又想阻止事件起泡，这个事件处理函数必须返回false.

参数：

type:添加到元素的一个或多个事件。由空格分隔多个事件。必须是有效的事件。
data:将要传递给事件处理函数的数据映射
fn:每当事件触发时执行的函数。

实例：

// 当所有段落被第一次点击的时候，显示所有其文本。

$("p").one("click", function(){

  alert( $(this).text() );

});

2.3 动态元素的绑定

语法： $dom.live(type, [data], fn)

说明：jQuery 给所有匹配的元素附加一个事件处理函数，即使这个元素是以后再添加进来的也有效。这个方法是基本是的 .bind() 方法的一个变体。使用 .bind() 时，选择器匹配的元素会附加一个事件处理函数，而以后再添加的元素则不会有。为此需要再使用一次 .bind() 才行。

参数:

type:一个或多个事件类型，由空格分隔多个事件。
data:传递给事件处理函数的附加参数
fn:要从每个匹配元素的事件中反绑定的事件处理函数

实例:

// 先绑定事件

$('.clickme').live('click', function() {

  alert("Live handler called.");

});

// 然后再添加一个新元素：

$('body').append('<div class="clickme">Another target</div>');

2.4 事件委托绑定

语法： $dom.delegate(selector,[type],[data],fn)

说明：指定的元素（属于被选元素的子元素）添加一个或多个事件处理程序，并规定当这些事件发生时运行的函数。使用 delegate() 方法的事件处理程序适用于当前或未来的元素（比如由脚本创建的新元素）在选择元素上绑定一个或多个事件的事件处理函数。on()方法绑定事件处理程序到当前选定的jQuery对象中的元素。on汇总了bind和live两种绑定事件的方式。可以支持一般的bind方法或者委托的方法。

参数:

selector:选择器字符串，用于过滤器触发事件的元素。
type:附加到元素的一个或多个事件。由空格分隔多个事件值。必须是有效的事件。
data:传递到函数的额外数据
fn:当事件发生时运行的函数

实例:

<!-- HTML 代码 -->

<div style="background-color:red">

  <p>这是一个段落。</p>

  <button>请点击这里</button>

</div>

// jQuery 代码:

$("div").delegate("button","click",function(){

  $("p").slideToggle();

});

以后推荐大家使用on的方式

2.5 大一统的on绑定事件方法

语法： $dom.on(events,[selector],[data],fn)

说明：在选择元素上绑定一个或多个事件的事件处理函数。on()方法绑定事件处理程序到当前选定的jQuery对象中的元素。on汇总了bind和live两种绑定事件的方式。可以支持一般的bind方法或者委托的方法。

参数:

events:一个或多个用空格分隔的事件类型和可选的命名空间，如"click"或"keydown.myPlugin" 。
selector:一个选择器字符串用于过滤器的触发事件的选择器元素的后代。如果选择的< null或省略，当它到达选定的元素，事件总是触发。
data:当一个事件被触发时要传递event.data给事件处理函数。
fn:该事件被触发时执行的函数。 false 值也可以做一个函数的简写，返回false。

实例:

// �bind绑定事件

$("p").on("click", function(){

  alert( $(this).text() );

});

// 事件委托

$('div').on('click', 'p', function(e){

  console.log(this.innerHTML);

})

以后推荐大家使用on的方式

2.6 解绑事件

2.6.1 解绑bind绑定事件。

语法：$dom.unbind(type,[fn])

如果没有参数，则删除所有绑定的事件。
如果提供了事件类型作为参数，则只删除该类型的绑定事件。
如果把在绑定时传递的处理函数作为第二个参数，则只有这个特定的事件处理函数会被删除。

实例：

// 解绑所有事件

$("p").unbind()

// 将段落的click事件取消绑定

$("p").unbind( "click" )

// 删除特定函数的绑定，将函数作为第二个参数传入

var foo = function () {

  // 处理某个事件的代码

};

$("p").bind("click", foo); // ... 当点击段落的时候会触发 foo 

$("p").unbind("click", foo); // ... 再也不会被触发 foo

2.6.2 解绑live的事件（die)

语法： $dom.die(type, [fn])

元素中删除先前用.live()绑定的所有事件.(此方法与live正好完全相反。)

参数说明：

如果不带参数，则所有绑定的live事件都会被移除。
如果提供了type参数，那么会移除对应的live事件。
如果也指定了第二个参数function,则只移出指定的事件处理函数。

实例：

function aClick() {

    $("div").show().fadeOut("slow");

}

$("#unbind").click(function () {

    $("#theone").die("click", aClick)

});

2.6.3 解绑delegate绑定的事件（undelegate）

语法： undelegate([selector,[type],fn])

删除由 delegate() 方法添加的一个或多个事件处理程序。

参数说明：

selector:需要删除事件处理程序的选择器。
type:需要删除处理函数的一个或多个事件类型。由空格分隔多个事件值。必须是有效的事件。
fn:要删除的具体事件处理函数。

实例：

// 从p元素删除由 delegate() 方法添加的所有事件处理器：

$("p").undelegate();

// 从p元素删除由 delegate() 方法添加的所有click事件处理器：

$("p").undelegate( "click" )

// 从form元素删除由 delegate() 方法添加的".whatever"命名空间：

var foo = function () {

  //.....

};

//用delegate() 方法给click事件增加".whatever"命名空间

$("form").delegate(":button", "click.whatever", foo);

$("form").delegate("input[type='text']", "keypress.whatever", foo);

2.6.4 解绑on的事件 (off)

语法：off(events,[selector],[fn])

如果一个简单的事件名称，比如提供"click"，所有这种类型的事件（包括直接和委派）从jQuery设置的元素上删除。

要删除特定的委派事件处理程序，提供一个selector 的参数。选择器字符串必须是完全匹配递到.on()事件处理程序附加的选择器。要删除非委托元素上的所有事件，使用特殊值 "**" 。

处理程序也可以删除handler参数指定名称的函数。

实例：

// 解绑所有的on的事件

$("p").off()

// 解绑所有的p的委托click事件，所有子元素都被取消绑定

$("p").off( "click", "**" )

// 解绑具体的某个事件处理程序

var foo = function () {

  // code to handle some kind of event

};

$("body").on("click", "p", foo);

// ... foo will no longer be called.

$("body").off("click", "p", foo);

3. 事件对象

在DOM学习的时候我们很痛的一点就是早期的ie版本的浏览器和最新标准的浏览器的事件对象的获取及事件对象的属性直接都有些兼容问题。

事件对象获取兼容。

IE678：window.event
标准浏览器直接从事件处理程序的参数中获得事件对象e
e = e || window.event;

在jQuery的事件处理程序中，可以直接获取�事件对象，所有浏览器都兼容。

3.1 事件对象的属性介绍

event.type 获取到事件的类型
event.target 获取到触发事件的元素。jQuery对其封装后，避免了各个浏览器不同标准的差异。
event.currentTarget 在事件冒泡阶段中的当前DOM元素
event.delegateTarget 此属性是最经常有用是通过过.delegate() 或.on()附加委派的事件，事件处理程序附加在正在处理的元素的祖先上。
event.data 当前执行的处理程序被绑定的时候传递的参数。
event.pageX和event.pageY 该方法的作用是获取光标相对于页面的x坐标和y坐标。
event.result 这个属性包含了当前事件事件最后触发的那个处理函数的返回值，除非值是 undefined
event.which 针对键盘和鼠标事件，这个属性能确定你到底按的是哪个键或按钮。event.which 将 event.keyCode 和 event.charCode 标准化了。推荐用 event.which 来监视键盘输入。值是unicode编码。

3.2 事件对象的方法介绍

event.preventDefault()

阻止默认事件行为的触发。

event.stopPropagation()

防止事件冒泡到DOM树上，也就是不触发的任何前辈元素上的事件处理函数。

4. 自定义事件

jQuery对象的的on方法不仅仅能绑定DOM中已经定义的事件，而且还可以注册和触发非标准事件也就是自定义的事件。

绑定自定义事件：

var $btn = $('#btn');

// 绑定自定义事件myevent

$btn.on('myevent', function(e, a, b, c){

  console.log(e.type, a, b, c);

});

// 触发自定义事件，并给自定义事件传递参数

$btn.trigger('myevent', [1, 2, 3]);

// =>myevent 1 2 3

5. 事件命名空间

如果一个dom标签上添加的事件非常多的时候，有时候需要进行对这些事件做一些分类和统一处理。那么对绑定的事件分类就需要用到事件的命名空间。

$(function () {

  // 给按钮绑定多个jQuery的事件

  // 给按钮绑定点击事件，后面的.和demo就是命名空间

  $('#btn').on('click.demo', function (e) {

    console.log('click.demo');

  });

  // 绑定点击事件不带命名空间

  $('#btn').on('click', function (e) {

    console.log('click');

  });

  // 绑定blur事件带demo命名空间

  $('#btn').on('blur.demo', function (e) {

    console.log('blur.demo');

  });

  // $('#btn').off('.demo'); // 解绑所有的demo命名空间的事件  click.demo 和blur.demo

  // $('#btn').trigger('click');  // 触发所有的click事件，包括所有的命名空间的

  // $('#btn').trigger('click.demo');  // 只触发click.demo命名空间的事件

});

6. 合成事件

6.1 合成鼠标进入和离开的hover方法

jQuery为鼠标进入和离开提供了一个简便的绑定事件的方法hover(enter, leave)。hover方法接受两个参数，第一个参数是鼠标进入的事件处理程序，第二个是鼠标离开的事件处理程序。

用法:

$(function(){

  $('tr').hover(function(e){

    $(this).css('backgroundColor', '#ccc');

  },function(e){

    $(this).css('backgroundColor', '#fff');

  });

})

联系老马

对应视频地址：https://chuanke.baidu.com/s5508922.html
老马qq： 515154084
老马微信：请扫码

微信：Flydragon_malun 或者18911865673

码农公寓