~~~
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#div1 {margin: 200px;}
</style>
<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
<script>
$(function() {
$('#div1').click(function(ev){
alert(ev.pageY); //鼠标的y坐标
//ev.pageX和ev.pageY始终是相对于整个页面的
alert(ev.clientY); //鼠标的y坐标
//ev.clientX和ev.clientY始终是相对于可视区的
})
})
</script>
</head>
<body style="height: 2000px;">
<div id="div1">aaaaaa</div>
</body>
</html>
~~~
***
### which键盘键值
~~~
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
<script>
//ev.which是键盘的键值
$(function() {
$(document).keydown(function(ev){
alert(ev.which); //页面上按下按键，弹出键盘键值
//alert(ev.keyCode); //也可以弹出键盘键值
//alert(ev.ctrlKey); //可以检测是否ctrl键是按下的
})
})
</script>
</head>
<body>
</body>
</html>
~~~
### 事件源
~~~
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
<script>
$(function() {
//ev.target 当前目标元素，也就是事件源
$(document).click(function(ev){
//alert(this); //这个this总是指向document
alert(ev.target); //如果点击到a上，那么弹出的就是#div1这个元素
})
})
</script>
</head>
<body>
<div id="div1">aaaaaa</div>
</body>
</html>
~~~
### 阻止冒泡
~~~
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
<script>
$(function() {
$(document).click(function(){
alert(123);
})
$('#div1').click(function(ev){
ev.stopPropagation(); //阻止了#div1的事件冒泡，那么点击#div1就不会再弹出123了
})
})
</script>
</head>
<body>
<div id="div1">aaaaaa</div>
</body>
</html>
~~~
### 阻止默认事件
~~~
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
<script>
$(function() {
//ev.preventDefault()：阻止默认事件
$(document).contextmenu(function(ev){ //点击右键就不会弹出默认右键菜单了
ev.preventDefault();
})
})
</script>
</head>
<body>
<div id="div1">aaaaaa</div>
</body>
</html>
~~~
### return false既阻止冒泡，又阻止默认
~~~
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
<script>
//在事件函数中写return false代表：既阻止默认事件又阻止冒泡
$(function(){
$(document).contextmenu(function(ev){
//代码
return false;
})
})
</script>
</head>
<body>
<div id="div1">aaaaaa</div>
</body>
</html>
~~~
### 拖拽
~~~
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
#div1 {
width: 100px;
height: 100px;
background: red;
position: absolute;
left: 100px;
top: 100px;
}
</style>
<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
<script>
$(function() {
var disX = 0;
var disY = 0;
var $div = $('#div1');
$div.on('mousedown', function(ev){
disX = ev.pageX - $(this).offset().left;
disY = ev.pageY - $(this).offset().top;
$(document).on('mousemove', function(ev){
$div.css('left', ev.pageX - disX);
$div.css('top', ev.pageY - disY);
})
$(document).on('mouseup', function(){
$(this).off();
})
return false;
})
})
</script>
</head>
<body>
<div id="div1">div</div>
</body>
</html>
~~~
### 主动触发
~~~
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>事件的命名空间</title>
<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
<script>
// trigger(): 主动触发
$(function() {
$('#input1').click(function() {
var $li = $('<li>' + $('#input2').val() + '</li>');
$('ul').append($li);
})
$('#input2').keydown(function(ev) {
if(ev.which == 13) {
$('#input1').trigger('click'); //点击回车的时候，就主动触发#input1的click事件
//$('#input1').click(); 这种写法就相当于上面的那种写法
}
})
})
</script>
</head>
<body>
<input id="input1" type="button" value="添加"><input id="input2" type="text">
<ul>
<li>11111</li>
<li>11111</li>
<li>11111</li>
<li>11111</li>
<li>11111</li>
</ul>
</body>
</html>
~~~
### 登录弹窗效果
~~~
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>事件的命名空间</title>
<style>
#box{
width:400px;
height:400px;
border:1px solid #000;
text-align: center;
position:relative;
margin:150px auto;
display: none;
}
#box span{
position:absolute;
right:0;
font-size: 26px;
border:1px solid #000;
padding: 0 8px;
border-top:0;
border-right:0;
}
#box #p1{
position:absolute;
top:100px;
left:80px;
}
#box #p2{
position:absolute;
top:200px;
left:80px;
}
</style>
<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
<script>
// trigger(): 主动触发
$(function() {
$('#input1').click(function(){
$('#box').css('display','block');
return false;
})
$('#box').click(function(ev){
ev.stopPropagation();//阻止冒泡
})
$('#box').find('span').click(function(){
$('#box').css('display','none');
})
$(document).on('click',function(){
$('#box').find('span').trigger('click');
})
})
</script>
</head>
<body>
<input id="input1" type="button" value="登录">
<div id="box">
<span>x</span>
<p id="p1">用户名:<input type="text" /></p>
<p id="p2">密码: <input type="text" /></p>
</div>
</body>
</html>
~~~
