前天在网上搜 DOM 的时候,搜到了jQuery ,就觉得挺好,学了 [格式1];
今天然后问别的问题,知道了 [格式2];
我问问,我觉得格式1就挺好,为什么弄个 [格式2]?
这东西有什么特殊的用法吗?
格式1:
<div id="one">aa</div>
<script>
function BIANHONG()
{document.bgColor='red';}
$("#one").on("click",BIANHONG);
</script>
格式2:
<div id="one">aa</div>
<script>
function BIANHONG()
{document.bgColor='red';}
$("#one").click(BIANHONG);
</script>
建议使用on,性能更好
on -> 事件委托
.click(fn) -> 简洁明了
是否事件委托
我知道用 on
可以做事件委托
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<script type="text/javascript" src="jquery.min.js"></script>
</head>
<body>
<div>
<ul>
<li>0</li>
</ul>
</div>
<button>增加LI</button>
<script type="text/javascript">
$(function() {
//新增加LI
$('body').on('click', 'button', function() {
var i = $('li').length + 1;
$('ul').append('<li>' + i + '</li>')
});
/* 这个后面加进来的LI也能半丁事件
$('body').on('click', 'li', function() {
console.log($(this).html())
});
*/
// 这个不可
$('li').click(function() {
console.log($(this).html())
});
});
</script>
</body>
</html>
有一次面试就问了我为什么用ON,我说不知道,我就知道我习惯用这个,他可以事件委托,做前端这么多年,一直没去追究为什么,就知道用,后来人家没要我
一个事件委托,一个直接绑定事件。像动态生成的元素你用二种方法试一下就知道区别了。
click 是一个很常用的事件绑定,使用第二种方法会更简洁一些。
第二种只是第一种的别名,在 jquery 源码中能看到第二种其实就是转换成第一种执行。
为什么会有第二种,大概是因为少打点字嘛,方便咯。