jQuery事件绑定学习笔记
1.jQuery点击事件
js中所有的功能的使用是以属性为主，jQuery中是以函数为主
<body>
<button>
<strong>click to change div content</strong>
</button>
<div>今日头条:</div>
<script>
//获取一个button元素对象的集合
let $btn = $('button');
//下面是js绑定事件的形式，js中所有的事件都以on开头
//$btn[0].onclick = function(){}
//jQuery绑定点击事件，事件是调用函数的方式,注意函数名前不需要on开头
//event 事件源(包含了该事件的所有信息，只要有事件存在，该事件源对象就默认存在)
$btn.click(function(event){
console.log($(this).text())
console.log($('div').text());
//event.target 属性返回哪个 DOM 元素触发了事件。
console.log(event.target)
});
</script>
</body>
阻止事件冒泡：.stopPropagation()
需求：
页面中点击ul标签，使其显示或隐藏
<body>
<div class="title">
<h4>电子产品</h4>
<ul style="display: none;" >
<li>手机</li>
<li>手表</li>
</ul>
</div>
<script src="./js/jquery-3.1.1.js"></script>
<script type="text/javascript">
//jQuery的事件绑定：会将所有的获取到的元素都绑定事件（下面是标签类名为"title的"）
$('.title').click(function(){ //绑定点击事件
//用js获取当前元素中的第一个ul元素
let ulNode = this.getElementsByTagName('ul')[0];
//js对象转为jQuery对象
let $ulNode =$(ulNode);
//获取到元素的display属性值，点击时先判断隐藏状态，然后做隐藏或显示的操作
if($ulNode.css('display') == "none"){
$ulNode.css('display','block');
}else{
$ulNode.css('display','none');
}
})
</script>
</body>
这样有一个问题，在ul标签显示后，点击其子标签li也会调用ul的点击事件。因为元素之间是包裹关系，所以点击子元素，会向上查找对应的父元素中是否有事件----也就是事件冒泡，可以用以下的方式解决：
<body>
<div class="title">
<h4>电子产品</h4>
//标签的点击事件中添加阻止事件冒泡的函数，点击子标签就不会触发父元素的点击事件了
<ul style="display: none;" onclick="stop(event)" >
<li>手机</li>
<li>手表</li>
</ul>
</div>
<script src="./js/jquery-3.1.1.js"></script>
<script type="text/javascript">
$('.title').click(function(){
let ulNode = this.getElementsByTagName('ul')[0];
let $ulNode =$(ulNode);
if($ulNode.css('display') == "none"){
$ulNode.css('display','block');
}else{
$ulNode.css('display','none');
}
})
function stop(e){
//阻止事件冒泡
e.stopPropagation();
}
</script>
</body>
2.jQuery改变事件
<body>
<input type="text">
<select name="" id="">
<option value="">123</option>
<option value="">456</option>
<option value="">789</option>
</select>
<script src="./js/jquery-3.1.1.js"></script>
<script>
//jQuery变化事件调用.change()函数
$('input').change(function(){
//输入框的值改变时就弹框显示该值
alert($(this).val());
})
$('select').change(function(){
//下拉框的值改变时就弹框显示该选项在下拉列表中的索引
alert(this.selectedIndex);
})
</script>
</body>
3.jQuery表单提交事件
<body>
<form action="" >
用户名：<input type="text" name="uname">
密码：<input type="password" name="pwd">
<input type="submit" value="登录">
</form>
<script src="js/jquery-3.1.1.js"></script>
<script type="text/javascript">
//获取form表单里的input的内容（用户名和密码），也就是要提交的数据
let $inNodes = $('input');
//.submit(function(){}),绑定提交事件，function函数里定义事件具体内容
$('form').submit(function(){
//获取输入的用户名数据
let unameVal = $inNodes.val();
//如果用户名为空，则函数返回false,表单不执行提交，否则提交表单数据
if(unameVal==""){
return false;
}
return true;
})
</script>
</body>
4.jQuery焦点事件
<body>
<input type="" />
<div id="" style="width: 100px;height: 100px;background-color: aqua;">
</div>
<script src="./js/jquery-3.1.1.js"></script>
<script type="text/javascript">
//焦点事件
$('input').focus(function(){
$(this).css("backgroundColor","darkcyan");
$('div').css("backgroundColor","orange");
})
//失去焦点事件
$('input').blur(function(){
$(this).css("backgroundColor","cadetblue");
$('div').css("backgroundColor","steelblue");
})
</script>
</body>
5.jQuery事件绑定–on
js中给后添加进来(通过js动态添加到页面中的元素)的元素绑定事件是一件比较麻烦的事情，jQuery中可以用on事件处理
/*需求：点击按钮在表格内添加一行元素，这行元素中的一个标签有删除该行的功能（点击事件） */
<body>
<button>create Element</button>
<hr>
<table id="test" border="1" cellpadding="0" cellspacing="0" width="50%" align="center">
</table>
<script src="./js/jquery-3.1.1.js"></script>
<script type="text/javascript">
//button按钮的点击事件绑定
$('button').click(function(){
//父元素.append(子元素) 给父元素添加子元素，每次都添加到父元素的末尾
$('table').append("<tr><td>删除</td></tr>");
})
/*页面加载完时，td标签并未创建，要等到手动点击创建，此事件绑定是无效的，因此不能这样写
$('td').click(function(){
//.parentNode 查找父元素节点
let trNode = this.parentNode;
//.remove()移除该元素
trNode.remove();
})
*/
</script>
</body>
可以用on事件绑定：
<body>
<button>create Element</button>
<hr>
<table id="test" border="1" cellpadding="0" cellspacing="0" width="50%" align="center">
</table>
<script src="./js/jquery-3.1.1.js"></script>
<script type="text/javascript">
$('button').click(function(){
//父元素.append(子元素) 给父元素添加子元素，每次都添加到父元素的末尾
$('table').append("<tr><td>删除</td></tr>");
})
//语法：$('父元素').on(事件名,选择器,函数)，给子元素添加事件
$('table').on('click','td',function(){
//.parentNode 查找父元素节点
let trNode = this.parentNode;
//.remove()移除该元素
trNode.remove();
})
</script>
</body>
on同时绑定多个事件
/*给input标签添加焦点事件和失去焦点事件*/
//两次事件绑定
$('input').blur(function(){
var phone = $(this).val();
var $span = $(this).next();
if(phone.length!=11){
$span.html('手机号错误')
$span.css('color','red')
}else{
$span.html('')
}
})
$('input').focus(function(){
$(this).next().html('请输入11位手机号');
$(this).next().css('color','black')
})
//使用on同时绑定两个事件
$('input').on({
'blur':function(){
var phone = $(this).val();
var $span = $(this).next();
if(phone.length!=11){
$span.html('手机号错误')
$span.css('color','red')
}else{
$span.html('')
}
},
'focus':function(){
$(this).next().html('请输入11位手机号');
$(this).next().css('color','black')
}
})
6.jQuery事件绑定–ready
和onload事件相似，ready也是页面加载完后再执行该事件中的代码
<head>
<script src="./js/jquery-3.1.1.js"></script>
<script>
/*onload事件
window.onload = function(){
$('button').click(function(){
alert("-----");
})
}
window.onload = function(){
$('button').click(function(){
alert("*********");
})
}
//onload 事件只能存在一次，多个会被覆盖，且在DOM结构及图片都加载完毕后才会执行函数中的代码
*/
//ready事件是可以多次使用，ready事件是在DOM结构加载完毕后就执行
$(function(){
$('button').click(function(){
alert("-----");
})
})
$(function(){
$('button').click(function(){
alert("*********");
})
})
</script>
</head>
<body>
<button>click</button>
</body>
onload和ready的区别
1.onload只能使用一次，ready可以多次使用
2.执行时机不同（onload是在DOM结构及图片资源加载完后执行，ready是在DOM结构加载完后执行）
扫一扫
1478
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
