jQuery 事件
程序员文章站
2022-04-03 21:57:59
事件注册单个事件注册语法: $('div').click(function () { 处理的事情 })$('div').click(function () { $(this).css('backgroundColor', 'red') });$('div').mouseenter(function ... ......
事件注册
- 单个事件注册
语法: $('div').click(function () { 处理的事情 })
$('div').click(function () {
$(this).css('backgroundcolor', 'red') });
$('div').mouseenter(function () {
$(this).css('backgroundcolor', 'black') })
事件处理
on 绑定事件
因为普通注册事件方法的不足，jquery又创建了多个新的事件绑定方法bind() / live() / delegate() / on()等，其中最好用的是: on()
- 可以绑定1个或者多个事件
$('div').on({
click: function () {
pass},
mouseenter: function () {
pass }
})- 如果处理的事件是相同的
$('div').on("mouseenter mouseleave", function () {
$(this).toggleclass('current') })- on 实现事件委托(委派)
$('ul').on('click', 'li', function () {
alert('111') })- on 可以动态给未来创建的元素添加事件
$('ol').on('click', 'li', function () {
alert(222)
})
var li = $('<li>lo的li</li>')
$('ol').prepend(li)<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>document</title>
<style>
div {
width: 100px;
height: 100px;
background-color: pink;
}
.current {
background-color: purple;
}
</style>
<script src="jquery.min.js"></script>
</head>
<body>
<div></div>
<ul>
<li>我们都是好孩子</li>
<li>我们都是好孩子</li>
<li>我们都是好孩子</li>
<li>我们都是好孩子</li>
<li>我们都是好孩子</li>
</ul>
<ol>
</ol>
<script>
$(function () {
// 1. 单个事件
$('div').click(function () {
$(this).css('backgroundcolor', 'red')
});
$('div').mouseenter(function () {
$(this).css('backgroundcolor', 'black')
})
$('div').on({
click: function () {
pass
},
mouseenter: function () {
pass
}
})
// 2. 事件处理， 可以绑定1个或者多个
$('div').on({
click: function () {
$(this).css('backgroundcolor', 'red')
},
mouseenter: function () {
$(this).css('backgroundcolor', 'blue')
},
mouseleave: function () {
$(this).css('width', '300px')
}
})
// 2.1 如果处理程序相同
$('div').on("mouseenter mouseleave", function () {
$(this).toggleclass('current')
})
// 2.2 on可以实现事件委托（委派）
$('ul').on('click', 'li', function () {
alert('111')
})
// 2.3 on 可以给为来动态创建的的元素绑定事件
$('ol').on('click', 'li', function () {
alert(222)
})
var li = $('<li>lo的li</li>')
$('ol').prepend(li)
})
</script>
</body>
</html>
<!doctype html>
<html>
<head lang="en">
<meta charset="utf-8">
<title></title>
<style>
* {
margin: 0;
padding: 0
}
ul {
list-style: none
}
.box {
width: 600px;
margin: 100px auto;
border: 1px solid #000;
padding: 20px;
}
textarea {
width: 450px;
height: 160px;
outline: none;
resize: none;
}
ul {
width: 450px;
padding-left: 80px;
}
ul li {
line-height: 25px;
border-bottom: 1px dashed #cccccc;
display: none;
}
input {
float: right;
}
ul li a {
float: right;
}
</style>
<script src="jquery.min.js"></script>
<script>
$(function () {
$('.btn').on('click', function () {
var li = $('<li></li>')
li.html($('.txt').val() + "<a href='javascript:;'> 删除</a>")
$("ul").prepend(li);
li.slidedown(); // 下滑
$('.txt').val('')
})
$('ul').on('click', 'a', function () {
$(this).parent().slideup(function () { // 上滑
$(this).remove();
});
})
})
</script>
</head>
<body>
<div class="box" id="weibo">
<span>微博发布</span>
<textarea name="" class="txt" cols="30" rows="10"></textarea>
<button class="btn">发布</button>
<ul>
</ul>
</div>
</body>
</html>
推荐阅读