事件冒泡及阻止事件冒泡
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#dv1 {
width: 400px;
height: 200px;
background-color: red;
}
#dv2 {
width: 250px;
height: 150px;
background-color: green;
}
#dv4 {
width: 200px;
height: 100px;
background-color: blue;
}
</style>
<script src="jquery-1.12.1.js"></script>
<script>
$(function(){
$("#dv1").click(function(){
// 为什么是undefined
// 对象.id---->DOM中的
console.log($(this).attr("id"));
});
$("#dv2").click(function(){
console.log(this.id);
console.log("助教好帅哦");
});
$("#dv4").click(function(){
console.log($(this).attr("id"));
return false;
});
});
// document.getElementById("btn").onclick = function(e){
// e.stopPropagation();
// window.event.cancelBubble = true;
// };
</script>
</head>
<body>
<div id="dv1">
<div id="dv2">
<div id="dv4">
</div>
</div>
</div>
</body>
</html>事件的触发
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="jquery-1.12.1.js"></script>
<script>
$(function(){
// 文本框添加获取焦点的事件
$("#txt").focus(function(){
console.log("我的获取焦点的事件触发了");
// 设置当前元素的下一个兄弟元素中显示一个提示信息
$(this).next("span").text("文本框获取焦点了");
});
// 按钮的点击事件
$("#btn").click(function(){
// 调用文本框的获取焦点的事件--第一种方式让别的元素的事件触发
// 对象.事件名字();
// $("#txt").focus();
// 触发的意思
// 第二种触发事件的方式
// $("#txt").trigger("focus");
// 这种方式可以触发该事件,但是,不能触发浏览器的默认行为
$("#txt").triggerHandler("focus");
});
});
</script>
</head>
<body>
<input type="button" value="我也要触发文本框的获取焦点的事件" id="btn">
<input type="text" value="" id="txt"><span id="sp"></span>
</body>
</html>事件参数对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
width: 400px;
height: 200px;
background-color: red;
}
</style>
<script src="jquery-1.12.1.js"></script>
<script>
$(function(){
// 事件参数对象
$("#dv").mousedown(function(e){
// console.log(arguments.length);
console.log(e);
// 获取鼠标按键的值
// console.log(e.button);
});
});
</script>
</head>
<body>
<div id="dv"></div>
</body>
</html>获取用户按下键盘的键
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
width: 200px;
height: 100px;
background-color: red;
}
</style>
<script src="jquery-1.12.1.js"></script>
<script>
$(function(){
$(document).mousedown(function(e){
// console.log("哈哈");
// console.log(e);
// 判断用户按下鼠标的时候,有没有按下alt键
// console.log(e.altKey);
if(e.altKey){
// 用户按下了alt键的同时也按下鼠标了
console.log("用户按下了alt键的同时也按下鼠标了");
}else if(e.shiftKey){
// 用户按下了shift键,同时按下鼠标
console.log("用户按下了shift键,同时按下鼠标");
}else if(e.ctrlKey){
// 用户按下了ctrl键,同时按下鼠标
console.log("用户按下了ctrl键,同时按下鼠标");
}else{
// 用户按下了鼠标
console.log("用户按下了鼠标");
}
});
});
</script>
</head>
<body>
<div id="dv"></div>
</body>
</html>