常用事件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="jquery-2.2.4.min.js"></script>
<script>
$(document).ready(function() {
//---jQuery常用事件----
$('#bt1').click(function() {
$(this).hide();
});
$('#bt2').dblclick(function() {
$(this).hide();
});
$('#bt3').mouseenter(function() {
$(this).hide();
});
$('#bt4').mouseleave(function() {
$(this).hide();
});
//----------end--------
//事件绑定与解绑------
$('#bt5').bind('click', clickHaner1);
$('#bt5').bind('click', clickHaner2);
$('#bt5').unbind('click', clickHaner1);
function clickHaner1() {
alert('hello');
}
function clickHaner2() {
alert('Hello2');
}
//end-----
//自定义事件
$('#bt6').click(function() {
var e = jQuery.Event('myEvent');
$('#bt6').trigger(e);
});
$('#bt6').bind('myEvent', function(event) {
console.log(event);
});
//---事件冒泡和target---
$('body').on('click', function() {
// console.log('body');
});
$('div').on('click', function(event) {
//阻止事件传递到body
event.stopPropagation();
// console.log(event);
})
//-----end---
});
</script>
</head>
<body>
<button id="bt1">按钮单击</button>
<button id="bt2">按钮双击</button>
<button id="bt3">鼠标进入</button>
<button id="bt4">鼠标离开</button>
<button id="bt5">事件绑定与解绑</button>
<button id="bt6">自定义事件</button>
<div style=" 300px; height: 300px;background: red;">
事件目标和冒泡
<ul>
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
</ul>
</div>
<br/>
<br/>
<br/>
<br/>
</body>
</html>
自定义事件：
我的理解，就是将某元素的行为进行封装， 这样将事件的触发与行为进行解耦
参考代码：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>trigger demo</title>
<style>
.room {
400px;
height: 400px;
background: lightgray;
position: relative;
float: left;
margin-right: 20px;
}
.lightbulb {
50px;
height: 50px;
border-radius: 50%;
background: black;
position: absolute;
left: 50%;
top: 50%;
margin-left: -25px;
margin-top: -25px;
}
.lightbulb.on {
background: orange;
}
.lightbulb.off {
background: black;
}
.switch {
60px;
height: 30px;
border-radius: 20px;
background: white;
position: absolute;
text-align: center;
line-height: 30px;
}
.s1 {
left: 50%;
bottom: 80px;
margin-left: -30px;
}
.s2 {
left: 50%;
margin-left: -30px;
bottom: 40px;
z-index: 1;
}
.s1.on,
.s2.on {
background: greenyellow;
}
.clapper {
0;
height: 0;
border-bottom: solid 30px white;
border-left: solid 30px transparent;
border-top: solid 30px transparent;
border-right: solid 30px transparent;
position: absolute;
bottom: 2px;
left: 50%;
margin-left: -30px;
overflow: hidden;
z-index: 0;
}
.clapper.on {
border-bottom: solid 30px yellow;
border-left: solid 30px transparent;
border-top: solid 30px transparent;
border-right: solid 30px transparent;
}
.master_switch {
200px;
height: 60px;
line-height: 60px;
text-align: center;
border-radius: 40px;
background: gray;
float: left;
}
.master_switch.on {
background: gold;
}
</style>
<script src="jquery-2.2.4.min.js"></script>
</head>
<body>
/*An example is probably the best way to explain. Suppose you have a lightbulb
* in a room in a house. The lightbulb is currently turned on, and it's controlled
by two three-way switches and a clapper:
Triggering the clapper or either of the switches will change the state of the
lightbulb. The switches and the clapper don't care what state the lightbulb
is in; they just want to change the state
If there are any lights on in the house, we want the master switch to turn all
the lights off; otherwise, we want it to turn all lights on*/
<div class="room r1">
房子1
<div class="lightbulb "></div>
<div class="switch s1">开关1</div>
<div class="switch s2">开关2</div>
<div class="clapper"></div>
</div>
<div class="room r2">
房子2
<div class="lightbulb "></div>
<div class="switch s1">开关1</div>
<div class="switch s2">开关2</div>
<div class="clapper"></div>
</div>
<div class="master_switch">总开关</div>
<script>
//房间中的两个开关和clapper
$('.s1, .s2, .clapper').on('click', function() {
var _this = $(this);
_this.toggleClass('on');
//获取最近的房间
var room = _this.closest('.room');
//触发灯泡自定义事件
room.find('.lightbulb').trigger('light:on');
});
//总开关
$('.master_switch').on('click', function() {
var _this = $(this);
_this.toggleClass('on');
var lightBulbs = $('.lightbulb');
console.log(lightBulbs);
//这里lightBulbs是个数组，居然可以这样写
if (lightBulbs.is('.on')) {
//触发灯泡自定义事件
lightBulbs.trigger('off');
} else {
//触发灯泡自定义事件
lightBulbs.trigger('on');
}
})
//灯泡状态，这里没有用toggClass,用起来这里貌似出问题。
//这里为灯泡添加自定义事件light:on、on、off.
$('.lightbulb').bind('light:on', function() {
var _this = $(this);
if (_this.is('.on')) {
_this.trigger('off');
} else {
_this.trigger('on');
}
}).on('on', function() {
$(this).removeClass('off');
$(this).addClass('on');
}).on('off', function() {
$(this).removeClass('on');
$(this).addClass('off');
});
</script>
</body>
</html>
注意事项：
1. 相同事件添加到父节点即可，通过target来获取当前点击的元素
$('#myTable').click(function(e) {
var $clicked = $(e.target);
$clicked.css('background', 'red'); });
2. 别把过多代码绑定到document.ready中，可以把部分不需要的移入windows.load中
以下是引用片段：
$(window).load(function(){
// 页面完全载入后才初始化的jQuery函数.
});
3.可以用data()，存储临时变量
以下是引用片段：
$(function(){
$("button").click(function(){
if( $("p").data("flag") ){
$("p").text("true");
$("p").data("flag",false);
}else{
$("p").text("false");
$("p").data("flag",true);
}
});
})