day11-jQuery事件

1、jQuery事件函数列表

.ready(); // DOM 加载完成
.resize(); // 浏览器窗口大小发生变化
.scroll(); // 滚动条的位置发生变化
.submit(function(event){ … }); // 表单的submit行为，用户提交表单
.blur(); // 失去焦点
.focus(); // 元素获得焦点
.bind(“事件名称，可以多个空格隔开”,function(){ … });
.unbind(“事件名称，可以多个空格隔开”);// 解绑事件
.one(“事件名称，可以多个空格隔开”,function(){ … }); // 绑定，只执行一次

2、监测输入框内容改变

.change();//内容失去焦点并改变过则触发事件
.bind(“input propertychange”,function(){ … }); // 绑定内容改变事件，推荐

3、鼠标相关

.click(function(event){ … }); // 鼠标单击
.dblclick(); // 鼠标双击
.mousedown(); // 鼠标按下
.mouseup(); // 鼠标抬起
.mouseenter(); // 鼠标进入
.mouseleave(); // 鼠标离开
.hover(f1,f2); // 同时为mouseenter和mouseleave事件指定函数
.mouseover(); // 鼠标进入（进入子元素也触发）
.mouseout(); // 鼠标离开（离开子元素也触发)
.mousemove();

4、鼠标：位置

event.pageX;//相对于html
event.pageY;
event.offsetX;//相对于body
event.offsetY;
event.clientX;// 相对于浏览器
event.clientY;

5、事件冒泡和阻止冒泡

return event.preventDefault(); // 阻止默认行为
return event.stopPropagation(); // 阻止冒泡
return false; // 合并阻止操作

6、代理和委托

父级.delegate(“子级，可以写多个，用，隔开”，“事件名称 多个用空格隔开”，functino(){ … });

7、构建添加元素

var $li07 = $("<li>7</li>") // 构建元素
var $div = $("<div>");
$(".list").append($li07);
$divHaha.appendTo($con);
$con.prepend($divHehe); // 界面上已经存在的对象 不会重复添加 只会调整位置
$divHehe.prependTo($con);
$box3.before($box2);
$box2.insertBefore($box3);
$box3.after($box4);
$box4.insertAfter($box3);
$box2.remove();//删除自己和子级