jquery事件元素,jquery中的事件有哪些

怎么给jquery添加的元素添加事件

有2种方法：

创新互联公司是专业的沭阳网站建设公司，沭阳接单;提供成都做网站、成都网站设计,网页设计,网站设计,建网站,PHP网站建设等专业做网站服务;采用PHP框架,可快速的进行沭阳网站开发网页制作和功能扩展;专业做搜索引擎喜爱的网站,专业的做网站团队,希望更多企业前来合作!

最简单的方法就是直接在标签中写onclick=""，但是这样写其实是有点low的，

第二种方式是通过给类名绑定一个事件。

p id="pLabel"新加一条/p

ul id="ulLabel"

li class="liLabel"aaa1/li

li class="liLabel"aaa2/li

li class="liLabel"aaa3/li

/ul

script type="text/javascript"

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

$("#ulLabel").append('li class="liLabel"aaaQ/li'); //动态像ul的末尾追加一个新元素

});

/script

方法一：使用live

live()函数会给被选的元素绑定上一个或者多个事件处理程序，并且规定当这些事件发生时运行的函数。通过live()函数适用于匹配选择器的当前及未来的元素。比如，通过脚本动态创建的元素。

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

alert('OK');

});

方法二：使用on

可以通过on方法绑定事件，可以绑定到它的父级或者body中，实现如下：

$("#ulLabel").on('click','.liLabel',function(){

alert('OK')

});

或者：

$("body").on('click','.liLabel',function(){

alert('OK')

});

注意绑定的事件，需要绑定在父元素。

jQuery事件详解之$(document).ready()

在页面加载结束后，浏览器会通过js为dom元素添加事件。原生的js中使用 window.onload 方法;在JQ中使用$(document).ready()。这个方法在dom载入就绪时对其进行操纵并调用执行它所绑定的函数。

那么它和window.onload有何不同呢？

window.onload是在网页中所有元素 加上所有资源 ++完全加++载到浏览器后才执行。

而$(document).ready()中绑定的事件是在 dom完全就绪 时就可以被调用，此时对于jQuery来说都是可以被访问的（关联的资源可能并没有被加载完毕）。

举个例子来说，在$(document).ready()中定义了图片的宽高，但由于此时图片还没有被加载完毕，此时的宽高不会生效。要解决这个问题可以使用jQuery中的 load ()方法。

load()方法会在元素的onload事件中绑定一个处理函数，如果该处理函数绑定给window对象，则会在所有资源加载完毕后触发，如果load绑定在元素上则会在该元素加载完毕后触发。

既然window.onload比较完备为什么还要用jQuery中的$(document).ready()呢？

window.onload事件 每次只能保存对一个函数的引用 ，他会覆盖掉之前的函数，所以不能再现有行为上添加新的行为。如果引用了多个js文件，每个都需要window.onload方法就导致编码复杂。

使用$(document).ready()方法能够很好地解决这种问题，每次调用$document.ready()方法都会在现有行为上追加新的行为，这些行为会根据注册顺序依次执行。

在jquery中可以用哪个方法为元素添加事件

jquery中添加事件

$(item).click(function(){}) //点击事件

$(item).hover(function(){}) //鼠标经过事件

$(item).mousemove(function(){}) //鼠标移动事件

但是给动态创建的元素添加事件就得使用on

$(document).on("click","item",function(){})

jquery 点击事件点击元素添加和移除class

可以使用：$("#but").removeAttr("class");和$("#but").attr("class","but_test");来对标签进行元素的添加和删除。

为了直观性的看到结果，首先在css样式中，针对class选择该元素，之后添加相应的样式。

接下来，就给该button按钮添加一个点击事件，让它能过自由切换。

对该点击事件添加js函数。

运行后的结果为：

拓展资料：

jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。

jQuery自定义元素右键点击事件(实现案例)

大多数情况下我们使用左键来进行页面交互，而右键大部分对于开发者来说是审查元素的，有的时候我们也要自定义鼠标右键点击行为来达到更好的交互性，常见的有漫画左键前进、右键后退。

第一步我们要屏蔽浏览器默认的右键点击行为，即阻止弹出框。

首先要将阻止弹出函数绑定到目标元素上：

//阻止浏览器默认右键点击事件

$("div").bind("contextmenu",

function(){

return

false;

})

如此一来，div元素的右击事件就被屏蔽了，而浏览器其他区域不受影响，如果你想在整个页面屏蔽右击事件，只需这样做：

document.oncontextmenu

=

function()

{

return

false;

}

接下来就可以为元素绑定右击响应函数了：

$("div").mousedown(function(e)

{

console.log(e.which);

//右键为3

if

(3

==

e.which)

{

$(this).css({

"font-size":

"-=2px"

});

}

else

if

(1

==

e.which)

{

//左键为1

$(this).css({

"font-size":

"+=3px"

});

}

})

示例效果为右击字体缩小，左击字体变大，且其它区域可以响应默认右击事件。

完整代码：

head

style

type="text/css"

div{

font-size:20px;

}

/style

script

src="../jquery.js"/script

script

$(function()

{

//阻止浏览器默认右键点击事件

/*document.oncontextmenu

=

function()

{

return

false;

}*/

//某元素组织右键点击事件

$("div").bind("contextmenu",

function(){

return

false;

})

$("div").mousedown(function(e)

{

console.log(e.which);

//右键为3

if

(3

==

e.which)

{

$(this).css({

"font-size":

"-=2px"

});

}

else

if

(1

==

e.which)

{

//左键为1

$(this).css({

"font-size":

"+=3px"

});

}

})

})

/script

/head

body

div

div

/div

/body

以上这篇jQuery自定义元素右键点击事件(实现案例)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。

jQuery实现获取绑定自定义事件元素的方法

本文实例讲述了jQuery实现获取绑定自定义事件元素的方法。分享给大家供大家参考，具体如下：

(function

($)

{

//

自定义itemtab事件

$.fn.bind

=

function(types,

data,

fn)

{

//

重载jQuery.fn.bind方法，用来截获绑定自定义事件的元素

if(typeof

types

==

'string'

'itemtab'

==

types)

{

var

itemTouchStart

=

-1;

//

touchstart位置

var

itemTouchMove

=

-1;

//

touchend位置，值为-1时表示未触发

var

itemTriggerDistance

=

0;

//

拖动距离阀值，若大于该值则为拖动列表，若小于等于该值则为点击列表项

var

itemMoved

=

false;

//

列表是否为拖动状态

$(this).bind('touchstart',

function

(event)

{

if(!event.originalEvent.touches.length)

return

true;

itemMoved

=

false;

itemTouchStart

=

event.originalEvent.touches[0].pageX;

//

记录起始位置

}).bind('touchmove',

function

(event)

{

if(!event.originalEvent.touches.length)

return

true;

itemTouchMove

=

event.originalEvent.touches[0].pageX;

//

当前拖动位置

//console.log('touchmove:',

itemTouchStart,

itemTouchMove,

itemMoved);

if(Math.abs(itemTouchMove

-

itemTouchStart)

itemTriggerDistance)

{

itemMoved

=

true;

//

列表被拖动

}

}).bind('touchend',

function

(event)

{

//console.log('itemMoved:',

itemMoved);

if(itemMoved)

{

//

列表被拖动过，非点击操作

return

true;

}

$(this).trigger('itemtab');

//

触发自定义事件

});

}

return

this.on(

types,

null,

data,

fn

);

//

这种做法具有侵入性，多个类似的代码会相互覆盖，可采用深度复制方式调用原$.fn.bind方法

}

})(jQuery);

希望本文所述对大家jQuery程序设计有所帮助。