jquery的自定义事件,jquery 自定义事件

高分求高手,jquery的autocomplete怎么自定义触发事件

1、jquery.autocomplete详解 语法: autocomplete(urlor data, [options] ) 参数: url or data:数组或者url [options]:可选项,选项解释如下: 1) minChars (Number) 在触发autoComplete前用户至少需要输入的字符数,Default:1,如果设为0

创新互联专注于达茂旗网站建设服务及定制,我们拥有丰富的企业做网站经验。 热诚为您提供达茂旗营销型网站建设,达茂旗网站制作、达茂旗网页设计、达茂旗网站官网定制、小程序设计服务,打造达茂旗网络公司原创品牌,更为您提供达茂旗网站排名全网营销落地服务。

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自定义事件 this问题

两个地方需要说明

$.fn.xxx 中的 this 指向的是 $() 调用时的 jQuery 对象,不用再通过$来封装;

$.fn.longPress 中,如果要调用参数里的 fn,并且正确传递DOM对象的话,需要写成类似以下这样:

$.fn.longPress = function(fn) {

...

this.each(function() {

fn.apply(this /*, 其它参数 */ );

});

};

用 apply 方法来替换回调函数fn中的 this 。

具体来说,在setTimeout的时候,可以类似这么调用:

timeout = setTimeout(function() {

fn.apply($temThis[i]);

}, 800);

这样,在 fn() 中的this就变成当前DOM对象了。

但是,这样写还有一个重要问题,那就是变量 i ,它的值在当前闭包环境中会变成 $temThis.length ,导致代码出错。要正确工作,需要改成这样:

for(var i = 0; i  $temThis.length; i++) {

(function(target) {

var timeout;

target.addEventListener('touchstart', function(event) {

timeout = setTimeout(function() {

fn.apply(target);

}, 800);

}, false);

target.addEventListener('touchend', function(event) {

clearTimeout(timeout);

}, false);

})($temThis[i]);

}

这样创建一个闭包,确保$temThis[i]在每个闭包中都是正确的。另外注意那个timeout,由于对象可能有多个,因此每个对象需要一个单独的 timeout 。

使用 jQuery 的方法会简化一些,含义是一样的,如下:

$temThis.each(function() {

var timeout, target = this;

this.addEventListener('touchstart', function(event) {

timeout = setTimeout(function() {

fn.apply(target);

}, 800);

}, false);

this.addEventListener('touchend', function(event) {

clearTimeout(timeout);

}, false);

});

jquery 自定义事件怎样传递 this

用两种方式:

build.click(function() {

buildforsel(this);

});

build.click(function(e) {

buildforsel(e.target);

});

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程序设计有所帮助。

jquery自定义事件有什么用

类似 DOM 的行为:你在 DOM 节点(包括 document 对象)监听并触发自定义事件。这些事件既可以冒泡,也可以被拦截。这正是 Prototype、jQuery 和 MooTools 所做的。如果事件不能扩散,就必须在触发事件的对象上进行监听。

命名空间:一些框架需要你为事件指定命名空间,通常使用一个点号前缀来把你的事件和原生事件区分开。

自定义额外数据:JavaScript 框架允许你在触发自定义事件时,向事件处理器传送额外的数据。jQuery 可以向事件处理器传递任意数量的额外参数。

通用事件 API:只用 Dojo 保留了操作原生 DOM 事件的正常API。而操作自定义事件需要特殊的发布/订阅 API。这也意味着 Dojo 中的自定义事件不具有DOM事件的一些行为(比如冒泡)。

声明:我们往往需要在预定义的事件中加入一些特殊的变化(例如,需要Alt键按下才能触发的单击事件),MooTools 运行你定义此类自定义事件。此类事件需要预先声明,即便你只是声明他们的名字。任何未声明的自定义事件不会被触发。

理论太抽象,看看 jQuery 框架中如何使用事件。

jQuery 的事件自定义事件还是通过 on 绑定的,然后再通过 trigger 来触发这个事件。

//给element绑定hello事件

element.bind("hello",function(){

alert("hello world!");

});

//触发hello事件

element.trigger("hello");

这段代码这样写似乎感觉不出它的好处,看了下面的例子也许你会明白使用自定义事件的好处了,参考右边的代码。

trigger需要处理的问题

模拟事件对象,用户模拟处理停止事件冒泡(因为不是通过浏览器系统触发的,而是自动触发的,所以这个事件对象要如何处理?)

区分事件类型,触发标准的浏览器事件 和 自定义事件名绑定的处理程序。

拟冒泡机制

当事件是 click 类型,自然是本身支持冒泡这样的行为,通过 stopPropagation 阻止即可

当然一些事件,如 focusin 和 blur 本身不冒泡,但 jQuery 为了跨浏览器一致性, jQuery 需要在这些事件上模拟了冒泡行为,jQuery 要如何处理?

那么如果是自定义的aaa的事件名,又如何处理冒泡?

ul id="tabs"

li data-tab="users"Users/li

li data-tab="groups"Groups/li

/ul

div id="tabsContent"

div data-tab="users"part1/div

div data-tab="groups"part2/div

/div

script type="text/javascript"

$.fn.tabs = function(control) {

var element = $(this);

var control = $(control);

element.delegate("li", "click", function() {

var tabName = $(this).attr("data-tab");

//点击li的时候触发change.tabs自定义事件

element.trigger("change.tabs", tabName);

});

//给element绑定一个change.tabs自定义事件

element.bind("change.tabs", function(e, tabName) {

element.find("li").removeClass("active");

element.find("[data-tab='" + tabName + "']").addClass("active");

});

element.bind("change.tabs", function(e, tabName) {

control.find("[data-tab]").removeClass("active");

control.find("[data-tab='" + tabName + "']").addClass("active");

});

// 激活第一个选项卡

var firstName = element.find("li:first").attr("data-tab");

element.trigger("change.tabs", firstName);

return this;

};

$("ul#tabs").tabs("#tabsContent");

/script


文章标题:jquery的自定义事件,jquery 自定义事件
本文路径:http://hbruida.cn/article/dsipdsd.html