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

最新推荐文章于 2024-08-16 07:34:20 发布

soosgo

最新推荐文章于 2024-08-16 07:34:20 发布

阅读量6.1k

点赞数 1

分类专栏： jQuery

本文链接：https://blog.csdn.net/Doulvme/article/details/76315109

版权

jQuery 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

一般通过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" οnclick="add()">添加</button>
			<button id="onadd" οnclick="onAdd()">on添加</button>
			<ul id="ul">
				<li>菜单一 <span οnclick="delect(this);">删除</span></li>
				<li>菜单二<span οnclick="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 οnclick="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元素的指定子元素，

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

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