jQuery事件绑定

最新推荐文章于 2024-06-21 16:41:46 发布

别喝我的旺仔牛奶

最新推荐文章于 2024-06-21 16:41:46 发布

阅读量155

点赞数

文章标签： jquery javascript css

本文链接：https://blog.csdn.net/m0_63502124/article/details/127865030

版权

on（）方法绑定事件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>事件绑定</title>
		<style>
			div{
				width: 500px;
				height: 500px;
				background-color: red;
			}
			p{
				width: 300px;
				height: 300px;
				background-color: aquamarine;
			}
		</style>
	</head>
	<body>
		<div>
			我是div'标签
			<p>我是p标签</p>
		</div>
	</body>
	<script src="../jquery.js"></script>
	<script>
		console.log('--------------绑定事件----------');
		//  1. on（）方法绑定事件
		
		// 语法 : 元素集合.on('事件类型',事件处理程序);
		$('div').on('click',function(){
			console.log('我是div的点击事件')
		});
		
		
		//2.事件委托绑定事件
		// 语法 : 元素集合.on('事件类型',选择器,事件处理函数)
		$('div').on('click','p',function(){
			console.log('我是事件委托形式的点击事件');
			// 把事件绑定给div元素,当div内的p元素触发事件的时候,执行事件处理函数
			// 事件委托 : 把p元素事件委托给了div元素	
		});
		
	</script>
</html>

one（）方法

css结构

		<style>
			div{
				width: 500px;
				height: 500px;
				background-color: red;
			}
			p{
				width: 300px;
				height: 300px;
				background-color: aquamarine;
			}
		</style>
	</head>
	<body>
		<div>
			我是div'标签
			<p>我是p标签</p>
		</div>
	</body>

js代码

<script>
		console.log('--------one（）方法-------');
		//用来绑定事件  只能触发一次
		$('div').one('click',function(){
			// console.log('只能输出一次')
		})
		//事件委托
		$('div').one('click','p',function(){
			// console.log('事件委托点击')
		});
		
		//批量绑定事件
		$('div').one({
		click:function(){console.log('点击')},
		mouseover:function(){console.log('鼠标移入')},
		mouseout:function(){console.log('鼠标一处')}
		})

hover（）

<script>
    console.log('------------hover()---------------')
        // 语法 ： 元素集合.hover（移入是触发函数，移除是触发函数）
        // 当直传一个参数的时候，会在移入移出都触发
    $('div').hover(
        function() {
            console.log(1)
        },
        function() {
            console.log(2)
        }
    )
</script>