jquery 事件处理

最新推荐文章于 2022-02-17 17:12:53 发布

黄大仙No.1

最新推荐文章于 2022-02-17 17:12:53 发布

阅读量122

点赞数

分类专栏： jQuery 文章标签： jquery

本文链接：https://blog.csdn.net/qq_44378358/article/details/108277343

版权

jQuery 专栏收录该内容

30 篇文章 0 订阅

订阅专栏

事件处理on()绑定事件
on(方法在匹配元素上绑定一个或多个事件的事件处理函数
语法:

element.on (events,[selector],fn)

1.events:一个或多个用空格分隔的事件类型，如"click"或"keydown”.
2.selector:元素的子元素选择器。
3.fn:回调函数
案例:

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Title</title>
		<script src="js/jquery-3.5.1.min.js"></script>
		<style>
			div{
				width: 200px;
				height: 200px;
				background-color: blue;
			}
		</style>
	</head>
	<body>
		<div>

		</div>
		<script>
            /*单个事件注册*/
            // $('div').click(function () {
            //     $(this).css('backgroundColor', 'pink');
            // })
            // $('div').mouseenter(function () {
            //     $(this).css('backgroundColor', 'purple');
            // })
            /*多个事件注册*/
            $('div').on({
                mouseenter: function () {
                    $(this).css('backgroundColor', 'purple');
                }, click: function () {
                    $(this).css('backgroundColor', 'pink');
                }, mouseleave: function () {
                    $(this).css('backgroundColor', 'blue');
                }
            })
		</script>
	</body>
</html>

如果多个事件回调函数相同:

$('div').on('mouseleave mouseenter', function () {
				$(this).toggleClass('current');
            })

事件委托:(绑定父元素,点击子元素触发)

/*事件委托*/
			$('ul').on('click', 'li', function () {
				alert('11');
            })

为后加入的元素绑定事件

/*动态创建*/
			$('ol lo').click(function () {
				alert('11');    //不可以为后来的元素绑定事件
            })
            $('ol lo').on('click',function () {
                alert('11');    //可以为未来创建的元素绑定事件
            })
			var li = $('<li>后来的li</li>')
			$('ol').append(li);

黄大仙No.1

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery 事件处理

事件处理on()绑定事件on(方法在匹配元素上绑定一个或多个事件的事件处理函数语法:element.on (events,[selector],fn)1.events:一个或多个用空格分隔的事件类型，如"click"或"keydown”.2.selector:元素的子元素选择器。3.fn:回调函数案例:<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> &lt
复制链接

扫一扫

专栏目录