[英]How to better handle events
如果我在一个元素上有多个事件,我正在处理这些事件,如下所示:
$("body").on("click", ".element", function(e) {
// Do something on click
});
$("body").on("change", ".element", function(e) {
// Do something on change
});
有没有办法在一个on()
调用中组合元素上的所有事件? 如果有多个事件与一个元素相关联,最佳做法是什么?
$("body").on("change click", ".element", function(e) {
// Can I detect here if it was change or click event and perform an action accordingly?
});
您可以使用事件的type
属性来确定要执行的逻辑:
$('body').on('change click', '.element', function(e) {
if (e.type == 'click') {
// do something...
}
else if (e.type == 'change') {
// do something else...
}
});
或者,也可以提供一个目的是on
其中包含与事件类型名称作为键结合功能:
$('body').on({
click: function() {
// do something on click...
},
change: function() {
// do something on change...
}
}, '.element');
我个人会使用后一种方法。 使用一个相当丑陋的if
语句来分割事件类型时,取消了统一on()
处理程序的重点。
是! jQuery传递包含事件信息的事件对象:
$("body").on("change click", ".element", function(e) {
console.log(e.type);
});
您可以使用event.type
。 有人会说这是不好的做法,其他人可能会发现它很有用。
$("body").on("change click", ".element", function(event) {
switch (event.type) {
case 'click':
break;
case 'change':
break;
default:
}
});
$('#element').on('keyup keypress blur change', function(event) { alert(event.type); // keyup OR keypress OR blur OR change });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="text" id="element" />
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.