JQuery 事件

来源：互联网发布：里约热内卢知乎编辑：程序博客网时间：2024/05/21 10:32

常用事件

<!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) {//阻止事件传递到bodyevent.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="width: 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 {width: 400px;height: 400px;background: lightgray;position: relative;float: left;margin-right: 20px;}.lightbulb {width: 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 {width: 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 {width: 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 {width: 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);  }});})

0 0