HTML代码
<a id="link">链接</a>
<p id="text">文本</p>
js代码
<script type="text/javascript">
var objText = $("#text");
objText[0].onclick = function() {
console.log("onclick");
};
objText.click(function() {
console.log("click");
});
$("#link").click(function() {
objText.trigger("click");
});
</script>
按顺序依次执行:
点击text,输出 onclick click
点击link,输出 click onclick
再点击text,输出 click onclick
问题:
为什么
2)
的事件顺序跟1)
不一样?为什么执行了
2)
后,再点击text,事件顺序跟1)
中的不一样?
注:使用的jquery版本是1.11.0
1.第一个的情况只是因为你绑定事件的前后顺序,如果前后换位,则输出结果会变为click, onclick
2.jq的trigger作用为触发一个事件,使其被对应的事件监听所响应。内部代码对原生的事件和jq的事件做了区别处理,具体情况即为在不禁止原生事件情况下,先处理jq事件,再处理原生事件。最终结果为点击#link时的输出为click,onclick;
3.至于为什么使用trigger之后的输出顺序与第二种情况下一致,是因为trigger在处理时候重新绑定事件,先jq事件,后原生事件的顺序。