您的位置：首页 > Web前端 > JQuery

关于jquery的obj.click()、和obj.on()以及行内的onclick事件

2017-07-29 14:27 561 查看

一般通过jQuery写触发事件是我们通常写的是obj.事件类型()。

以下以点击事件为例：

通常我们直接写obj.click();实现点击事件的效果，但是这种写法不支持动态元素或样式绑定事件。

支持动态元素绑定事件的是.live()和.on()。live在jquery1.7以后就不推荐使用了。

行内的onclick事件也可以实现对js的动态绑定事件。

以下是我自己整理的关于三种写法的使用，以便以后查看：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div class="content">
<button id="add" onclick="add()">添加</button>
<button id="onadd" onclick="onAdd()">on添加</button>
<ul id="ul">
<li>菜单一 <span onclick="delect(this);">删除</span></li>
<li>菜单二<span onclick="delect(this);">删除</span></li>
<li>菜单三<span>删除</span></li>
<li>菜单四<span>删除</span></li>
<li>菜单五<span>删除</span></li>
<li>菜单六<span>删除</span></li>
</ul>
</div>
<script src="js/jquery.min.js"></script>
<script>
function add(){
$('#ul').append('<li>菜单666<span>删除</span></li>')
}
function onAdd(){
$('#ul').append('<li>on菜单666<span onclick="delect(this);">删除</span></li>')
}
function delect(obj){
$(obj).parent().remove();
console.log('onclick');
}
/*$('ul li span').click(function(){
$(this).parent().remove();
console.log('click');
});*/
$(document).on('click','#ul li span',function(){
$(this).parent().remove();
console.log('on');
});
</script>
</body>
</html>

注意：此处有一个jquery的引入。

此处.on的事件绑定用法是：.on(events,[,selector][,data],handler)，.on的selector参数是筛选出调用.on方法的dom元素的指定子元素，

原理是：事件冒泡，进行事件委托，子元素把事件委托给父元素进行事件处理。

好处是：万一子元素非常多，给每个子元素都添加一个事件会影响到性能；为动态添加的元素也能绑定指定事件。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航