前端开发新手必看！jQuery事件绑定全攻略，轻松操控DOM元素

事件绑定

你们知道吗，前端开发中的扛把子工具——jQuery，最厉害的地方就在于它可以轻松操控DOM元素，做出各种超炫的交互效果。不过，要是你想要玩儿好jQuery，那可得学会如何处理事件。啥叫事件处理？就是说将处理函数跟特定的DOM元素绑在一起，这样当事件发生时就会自动运行。绑定事件通常分两步走，用选择器绑或者直接绑。

就是说，给每个选中的DOM元素添点儿事儿就能响的代码块，就跟挑东西似的，按照条件找到要处理的那一个。比如，你试试这个公式：`$(‘.btn’).click(function(){alert(‘按钮被点击了’);});`，这就好比把所有class属性值是”btn”的元素都挑出来，然后谁点它们，就会弹个小提示告诉你！或者，你还能更直接地给某一个特定的DOM元素加个事件监听器，效果都是一样的。就像这样：`$(‘#btn’).click(function(){alert(‘按钮被点击了’);});`，这就直接给ID值为“btn”的那个按钮加了个点击事件。

$(selector).on(event,function)

事件触发顺序

$("button").on("click",function(){
    alert("您点击了按钮");
})

听过逛街？有时候遇到突发情况，咱们都知道怎么办对不对？jQuery就是这么个回事儿，处理事件也是这个套路。第一步，是”捕捉阶段”，jQuery会顺着找和触发事件有关的节点，然后搞定相应的事儿。接着，就到了”目标元素执行阶段”，找出目标元素后，就要做跟它相关的事情。最后，”冒泡阶段”开始了，目标元素搞完了之后，它就往上冒泡，然后顺带搞定触发元素的父母们。

$(dom).on(event,function)

记住了想让事件别再往上冒？用’event.stopPropagation()’就行；想取消默认动作？那就加上’event.preventDefault()’。这么一搞，咱们就能随心所欲地控制整个事件过程，让代码跑起来更溜儿~

var btn = document.getElementById("btn");
$(btn).on("click",function(){
    alert("您点击了按钮");
})

事件委托

老兄，说到绑定操作，你大概只知道直接绑定和选个框搞定？不过别忘了还有个叫“事件委托”的神奇功能。这个功能就是在父元素上绑定一次，然后它的所有子元素都会自动拥有同样的处理动作，不用一个个去绑定，省时省力，多方便

比如，老爸是容易吸引人目光的那种，我们给他设置一个点击事件处理器，只要他的宝贝儿子被触碰到了，那他就会立刻行动起来。jQuery，就是帮着爸爸检查一下是否有事儿发生，找到那个真正想干的事，然后顺便把相关的事情也解决掉。这不就是找目标、做事的过程吗？

总结

咱们说事儿jQuery的事件处理，就是把事件和元素联系起来，然后激发它们。用上事件委托这招儿，你的代码效率就能噌噌往上涨。所以说，做前端的同学们，这些东西得懂，这样才能更顺畅地玩转jQuery，做出炫酷的特效。关键是，这样做出来的代码运行速度快，稳定性也高！

这里就是教你怎么玩转和用好jQuery的那些神奇的事件处理功能，肯定能帮到你平时工作的！

$("#parent").on("click","button",function(){
    alert("您点击了按钮");
})