~~~
<!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>
~~~
