事件jQuery,事件简单的情况说明的范文

jQuery事件

bind();

参数一：要绑定事件函数的事件名。

参数二：要绑定的事件函数（事件函数名），如果将来有可能删除该绑定的函数，则必须传函数名。

bind()方法可以通过链式调用的形式连续多次调用，进而个同一标签的同一事件（不同事件）添加不同的事件函数。

on('事件名',fn);

one('事件名',fn);该方法绑定的事件函数只能被触发一次。

unbind();

参数一：要解绑事件函数的事件名（如果只传这一个参数，则该事件名中绑定的函数全部解除）。

参数二：要解除绑定的事件函数名。

off();

注意：bind()和unbind()在3.0后已经被on()和off()取代。

事件简写本质就是简化给标签添加事件函数的操作，标准的添加事件方法：on/bind/one,类似于js的DOM2级添加事件函数操作；事件简写类似于DOM0级的事件绑定操作。

jq事件简写绑定事件函数的技术实现原理：

1、jq给每一个事件名定义了同名的函数，用户调用的事件简写形式，就是在调用这个和事件名同名的函数

2、同名函数内部实现原理：当用户调用了该函数，首先获取该函数的函数名（函数名代表的是事件名），在函数内部通过on把通过参数传进来的函数绑定在函数名对应的事件上。

blur(fn)：失去焦点时触发该方法。

focus(fn)：当鼠标或tab按钮让元素获得焦点时，触发该函数。

change(fn)：表单元素失去焦点（单选框、复选框、下拉菜单标签被选中即可触发，不需等待失去焦点），触发该事件。

click(fn)：鼠标点击时触发该事件。

dbclick(fn)：双击元素时触发该事件（注意：把click和dbclick用于同一个元素会产生问题）。

$(window).scroll(fn)：当页面滚动时触发事件。

hover(fn1,fn2):鼠标移入触发fn1函数，鼠标移出触发fn2函数。

复合事件：toggle().在1.8之前中，复合了奇、偶次点击事件，在1.9之后的版本中toggle方法用于jq的动画

toggle（）方法在1.8之前的版本中需要两个函数类型作为参数，奇数次点击触发第一个函数，偶数次店家触发第二个函数。

事件对象的获取：在事件触发的函数中传递event参数。

event.type:事件类型

event.target:触发事件的元素

e.currentTarget:事件绑定在哪个元素上

event.pageX:鼠标相对于文档的左侧坐标

event.pageY:鼠标相对于文档的顶部坐标

e.preventDefault():取消标签事件，如a标签的页面跳转。

e.stopPropagation():阻止事件冒泡

1、阻止事件冒泡

stopPropagation()方法

2、阻止默认行为

preventDefault()方法

注意：1、return false 在jQuery中是即阻止事件冒泡又阻止默认行为

　2、jQuery不支持事件捕获

解密jQuery事件核心：

相关问答

Q1: jquery中有哪些基础事件方法

jquery基础事件，包括绑定事件、简写事件、复合事件；

一．绑定事件

jQuery 通过.bind()方法来为元素绑定这些事件。

形式：

bind(type, [data], fn)

参数：

type 表示一个或多个类型的事件名字符串；

[data]是可选的，作为 event.data 属性值传递一个额外的数据，这个数据是一个字符串、一个数字、一个数组或一个对象；

fn 表示绑定到指定元素的处理函数。

二、简写事件

为了使开发者更加方便的绑定事件，jQuery 封装了常用的事件以便节约更多的代码。 称之为简写事件。简写事件，绑定方法如下图，

三、复合事件

jQuery 提供了许多最常用的事件效果， 组合一些功能实现了一些复合事件， 比如切换功 能、智能加载等。

扩展资料

1、绑定事件fn函数

1)使用点击事件

$('input').bind('click', function () {//点击按钮后执行匿名函数

　alert('点击！');

});

2)普通处理函数

$('input').bind('click', fn); //执行普通函数式无须圆括号

function fn() {

alert('点击！');

}

2、简写事件函数

1）.mouseover()和.mouseout()表示鼠标移入和移出的时候触发。而.mouseenter()和.mouseleave()表示鼠标穿过和穿出的时候触发。

2）.keydown()、.keyup()返回的是键码，而.keypress()返回的是字符编码。

3）.focus()和.blur()分别表示光标激活和丢失，事件触发时机是当前元素。而.focusin()和.focusout()也表示光标激活和丢失，但事件触发时机可以是子元素。

3、复合事件示例，背景移入移出切换效果

$('div').hover(function () {

  $(this).css('background', 'black');     //mouseenter 效果

  }, function () {

  $(this).css('background', 'red');      //mouseleave 效果，可省略

});

参考资料

jQuery官方网站-事件

Q2: jQuery事件冒泡及解决办法

什么是事件冒泡：在一个对象上触发某类事件（比如onclick事件），如果次对象定义了此事件的处理程序，那么此事件就会调用这个处理程序，如果没有定义此事件处理程序或者事件返回true，那么这个事件会向这个对象的父级对象传播，从里到外，直至它被处理（父级对象所有同类事件都将被激活），或者它到达了对象层次的最顶层，即document对象（有些浏览器是window）。

事件冒泡的作用：事件冒泡允许多个操作被集中处理（把事件处理器添加到一个父级元素上，避免把事件处理器添加到多个子级元素上），它还可以让你在对象层的不同级别捕获事件。

阻止事件冒泡：事件冒泡机制有时候是不需要的，需要阻止掉，通过 event.stopPropagation() 来阻止

$(function(){

})

代合并阻止操作：实际开发中，一般把阻止冒泡和阻止默认行为合并起来写，合并写法可以用.

// event.stopPropagation();

// event.preventDefault();

// 合并写法：

return false;

事件委托就是利用冒泡的原理，把事件加到父级上，通过判断事件来源的子集，执行相应的操作，事件委托首先可以极大减少事件绑定次数，提高性能；其次可以让新加入的子元素也可以拥有相同的操作。

一般绑定事件的写法：bind

事件委托的写法：

如果我们要取消事件的委托：

//ev.delegateTarge 委托的对象

$(ev.delegateTarge).undelegatee();

//如果是上面的两种例子可使用//$list.undelegate();

创建节点： ('div')

var ('div这是一个div元素/div');

插入节点:

1、append()和appendTo()：在现存元素的内部，从后面插入元素

2、prepend()和prependTo()：在现存元素的内部，从前面插入元素

3、after()和insertAfter()：在现存元素的外部，从后面插入元素

4、before()和insertBefore()：在现存元素的外部，从前面插入元素

删除节点

$('#div1').remove();

Q3: 怎样用jquery写一个事件？

用jquery写一个事件的操作如下：

1、用confirm输入以下代码：

if(confirm("确定要删除数据吗"))

{

}else{

}

2、用组件jBox(需要下载jquery.jBox-2.3.min.js，并引入)

$.jBox.confirm("您确定要删除此委托吗？", "提示", function(v, h, f)

{

if (v == "ok")

{

}else{

}

});

Q4: jQuery 事件

事件方法会触发匹配元素的事件，或将函数绑定到所有匹配元素的某个事件。

bind()    向匹配元素附加一个或更多事件处理器    

blur()    触发、或将函数绑定到指定元素的 blur 事件    

change()    触发、或将函数绑定到指定元素的 change 事件    

click()    触发、或将函数绑定到指定元素的 click 事件    

dblclick()    触发、或将函数绑定到指定元素的 double click 事件    

delegate()    向匹配元素的当前或未来的子元素附加一个或多个事件处理器    

die()    移除所有通过 live() 函数添加的事件处理程序。    

error()    触发、或将函数绑定到指定元素的 error 事件    

event.isDefaultPrevented()    返回 event 对象上是否调用了 event.preventDefault()。    

event.pageX    相对于文档左边缘的鼠标位置。    

event.pageY    相对于文档上边缘的鼠标位置。    

event.preventDefault()    阻止事件的默认动作。    

event.result    包含由被指定事件触发的事件处理器返回的最后一个值。    

event.target    触发该事件的 DOM 元素。    

event.timeStamp    该属性返回从 1970 年 1 月 1 日到事件发生时的毫秒数。    

event.type    描述事件的类型。    

event.which    指示按了哪个键或按钮。    

focus()    触发、或将函数绑定到指定元素的 focus 事件    

keydown()    触发、或将函数绑定到指定元素的 key down 事件    

keypress()    触发、或将函数绑定到指定元素的 key press 事件    

keyup()    触发、或将函数绑定到指定元素的 key up 事件    

live()    为当前或未来的匹配元素添加一个或多个事件处理器    

load()    触发、或将函数绑定到指定元素的 load 事件    

mousedown()    触发、或将函数绑定到指定元素的 mouse down 事件    

mouseenter()    触发、或将函数绑定到指定元素的 mouse enter 事件    

mouseleave()    触发、或将函数绑定到指定元素的 mouse leave 事件    

mousemove()    触发、或将函数绑定到指定元素的 mouse move 事件    

mouseout()    触发、或将函数绑定到指定元素的 mouse out 事件    

mouseover()    触发、或将函数绑定到指定元素的 mouse over 事件    

mouseup()    触发、或将函数绑定到指定元素的 mouse up 事件    

one()    向匹配元素添加事件处理器。每个元素只能触发一次该处理器。    

ready()    文档就绪事件（当 HTML 文档就绪可用时）    

resize()    触发、或将函数绑定到指定元素的 resize 事件    

scroll()    触发、或将函数绑定到指定元素的 scroll 事件    

select()    触发、或将函数绑定到指定元素的 select 事件    

submit()    触发、或将函数绑定到指定元素的 submit 事件    

toggle()    绑定两个或多个事件处理器函数，当发生轮流的 click 事件时执行。    

trigger()    所有匹配元素的指定事件    

triggerHandler()    第一个被匹配元素的指定事件    

unbind()    从匹配元素移除一个被添加的事件处理器    

undelegate()    从匹配元素移除一个被添加的事件处理器，现在或将来    

unload()