jquery事件？js事件执行顺序
很多朋友对于jquery事件和js事件执行顺序不太懂，今天就由小编来为大家分享，希望可以帮助到大家，下面一起来看看吧！
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官方网站-事件
jquery中有哪些事件处理程序
bind()向元素添加事件处理程序
blur()添加/触发 blur事件
change()添加/触发 change事件
click()添加/触发 click事件
dblclick()添加/触发 double click事件
delegate()向匹配元素的当前或未来的子元素添加处理程序
die()在版本 1.9中被移除。移除所有通过 live()方法添加的事件处理程序
error()在版本 1.8中被废弃。添加/触发 error事件
event.currentTarget在事件冒泡阶段内的当前 DOM元素
event.data包含当前执行的处理程序被绑定时传递到事件方法的可选数据
event.delegateTarget返回当前调用的 jQuery事件处理程序所添加的元素
event.isDefaultPrevented()返回指定的 event对象上是否调用了 event.preventDefault()
event.isImmediatePropagationStopped()返回指定的 event对象上是否调用了 event.stopImmediatePropagation()
event.isPropagationStopped()返回指定的 event对象上是否调用了 event.stopPropagation()
event.namespace返回当事件被触发时指定的命名空间
event.pageX返回相对于文档左边缘的鼠标位置
event.pageY返回相对于文档上边缘的鼠标位置
event.preventDefault()阻止事件的默认行为
event.relatedTarget返回当鼠标移动时哪个元素进入或退出
event.result包含由被指定事件触发的事件处理程序返回的最后一个值
event.stopImmediatePropagation()阻止其他事件处理程序被调用
event.stopPropagation()阻止事件向上冒泡到 DOM树，阻止任何父处理程序被事件通知
event.target返回哪个 DOM元素触发事件
event.timeStamp返回从 1970年 1月 1日到事件被触发时的毫秒数
event.type返回哪种事件类型被触发
event.which返回指定事件上哪个键盘键或鼠标按钮被按下
event.metaKey事件触发时 META键是否被按下
focus()添加/触发 focus事件
focusin()添加事件处理程序到 focusin事件
focusout()添加事件处理程序到 focusout事件
hover()添加两个事件处理程序到 hover事件
keydown()添加/触发 keydown事件
keypress()添加/触发 keypress事件
keyup()添加/触发 keyup事件
live()在版本 1.9中被移除。添加一个或多个事件处理程序到当前或未来的被选元素
load()在版本 1.8中被废弃。添加一个事件处理程序到 load事件
mousedown()添加/触发 mousedown事件
mouseenter()添加/触发 mouseenter事件
mouseleave()添加/触发 mouseleave事件
mousemove()添加/触发 mousemove事件
mouseout()添加/触发 mouseout事件
mouseover()添加/触发 mouseover事件
mouseup()添加/触发 mouseup事件
off()移除通过 on()方法添加的事件处理程序
on()向元素添加事件处理程序
one()向被选元素添加一个或多个事件处理程序。该处理程序只能被每个元素触发一次
$.proxy()接受一个已有的函数，并返回一个带特定上下文的新的函数
ready()规定当 DOM完全加载时要执行的函数
resize()添加/触发 resize事件
scroll()添加/触发 scroll事件
select()添加/触发 select事件
submit()添加/触发 submit事件
toggle()在版本 1.9中被移除。添加 click事件之间要切换的两个或多个函数
trigger()触发绑定到被选元素的所有事件
triggerHandler()触发绑定到被选元素的指定事件上的所有函数
unbind()从被选元素上移除添加的事件处理程序
undelegate()从现在或未来的被选元素上移除事件处理程序
unload()在版本 1.8中被废弃。添加事件处理程序到 unload事件
contextmenu()添加事件处理程序到 contextmenu事件
$.holdReady()用于暂停或恢复.ready()事件的执行
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事件和js事件执行顺序的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。