事件(return false阻止冒泡)
- 鼠标
- click 单击对象(按下松开) //单击事件：//鼠标按下的时刻鼠标指针在被选区域内 鼠标松开鼠标指针也在被选区域内
- dblclick 双击对象 //双击事件：//鼠标第一次按下的时候和第二次松开的时候在同一被选区域
- mousedown 在对象上按下时 //按下事件：//鼠标按下时，鼠标指针在被选区域内
- mouseup 按下,在对象上松开时 //松开事件://鼠标按下再松开时，鼠标指针在被选区域内
- mousemove 鼠标在对象上移动时 //鼠标移动事件//由像素和时间一起决定
- mouseover 鼠标指针穿过被选元素区域触发,穿过其子元素区域也触发 //若在父元素触发了 又进入子元素 子元素仍然会触发
- mouseout 鼠标指针离开被选元素或者子元素区域
- mouseenter 鼠标指针穿过被选元素区域 /若在父元素触发了 则进入子元素不会再触发 即若父元素触发了再进入子元素不会再冒泡//不管怎样 只触发一次 即子元素不会再冒泡
- mouseleave 鼠标指针离开被选元素区域
- 键盘:焦点在哪里哪个控件的键盘事件才触发
- keypress 键盘按键被按下并松开。
- keydown 键盘按键被按下。
- keyup 键盘按键被松开。
- 表单
- focus节点获得焦点后触发
- blur节点失去焦点后触发
- focusin将要获得焦点时触发，发生在focus事件之前
- focusout将要失去焦点时触发，发生在blur事件之前
- change内容改变时//光标失去后 内容改变 change事件触发
- reset 表单重置时
- submit 表单提交时
- dom节点中的oninput事件
<
script
>
$(
"#text")[
0].
oninput =
function (e) {
if($(
"#box").
children().
length<
this.
value.
length){
var
p = $(
"<p></p>");
p.
text(
this.
value);
$(
"#box").
append(
p);
}
if($(
"#box").
children().
length>
this.
value.
length){
$(
"#box").
children().last().
remove();
}
}
</
script
>
- 加载(图片文档等)
- //dom里的window.onload jq:$(function) $(document).ready $(document).load(funcition)
- load 完成加载 //当对象加载了才进行执行后面的代码
- abort 加载被中断
- error 加载发生错误
- 悬浮
hover//注:hover(fn1,fn2) hover事件要求有两个回调函数,分别是
移入和移除,只写一个回调函数时,两个状态都触发同一个函数
<
script
>
var
timer1 =
null,
timer2 =
null;
$(
"#btn").hover(
function () {
clearInterval(
timer1);
if($(
"#left-box").
width()>=
50){
clearInterval(
timer1);
}
timer1 =
setInterval(
function () {
$(
"#left-box").css(
"width",
function (index,old) {
return $(
this).
width()+
10+
"px";
})
},
50)
},
function () {
// clearInterval(timer2);
if($(
"#left-box").
width()<=
0){
clearInterval(
timer2);
}
timer2 =
setInterval(
function () {
$(
"#left-box").css(
"width",
function (index,old) {
return $(
this).
width()-
10+
"px";
})
},
50)
})
</
script
>
事件对象
事件触发时会传入回调函数一个事件对象,这个对象的属性包含了事件触发时的一些信息
- 鼠标
- altKey 鼠标事件发生时，是否按下alt键,返回一个布尔
- ctrlKey 鼠标事件发生时，是否按下ctrl键,返回一个布尔
- metaKey 鼠标事件发生时，是否按下windows/commond键,返回一个布尔
- shiftKey 鼠标事件发生时，是否按下shift键,返回一个布尔
- clientX，clientY返回鼠标位置相对于浏览器窗口左上角的坐标，单位为像素
- screenX，screenY返回鼠标位置相对于屏幕左上角的坐标，单位为像素
- 键盘
- altKey，ctrlKey，metaKey，shiftKey返回一个布尔值，表示是否按下对应的键
- key属性返回一个字符串，表示按下的键名。如果同时按下一个控制键和一个符号键，则返回符号键的键名。比如，按下Ctrl+a，则返回a。如果无法识别键名，则返回字符串Unidentified
绑定事件mouseleave(fn)
回调函数返回值为false时阻止冒泡
①
jq(“button”).click(fn)
jq(“button”).mouseenter(fn)
jq(“button”).
jq(“button”).click(fn).mouseenter(fn).mouseleave(fn)
②
bind(“events”,fn);//多事件用空格隔开
jq(“button”).bind(“click mouseenter mouseleave”,fn)
③
不同的事件想触发不同的方法,传一个对象进去
jq(“button”).bind({“click”:fn,”mouseenter ”:fm,”mouseleave”:fo})
④
触发一次one(“event”,fn)
jq(“button”).one(“click”:fn)
多元素绑定事件
①原始的//每个li都绑定了一个事件
jq(“li”).bind(“click”,function(){alert(jq(this).html())})
<ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li></ul>
②代理//只给ul(一定要绑父亲)绑定了事件(冒泡)
jq(“ul”).delegate(“li”,”click”,function(){alert(jq(this).html())})
③前面所有的方式都忘掉,用这种:on(“events”,”selector”,fn)
jq(“ul”).on(“click”,”li”,function(){alert(jq(this).html())})
//ul 是on方法第二个参数li的爸爸,on第一个参数是事件,第二个参数是选择器,第三个参数是回调,回调里面的this关键字是个指针,指向触发click事件的对象.
<
script
>
//多事件方法相同
$(
"div").
bind(
"click mousedown mouseleave",
function () {
console.
log(
111);
});
//不同的事件想触发不同的方法,传一个对象进去
$(
'div').
bind(
{
"click":
function () {},
"mousedown":
function () {}
});
//只触发一次之后就不再触发了
$(
"div").one(
"dblclick",
function () {
});
//多元素绑定事件
$(
"li").
bind(
"click",
function () {
console.
log(
this.
innerHTML);
});
//delegate 绑定父亲的点击事件 事件由儿子来执行
$(
"ul").delegate(
"li",
"click",
function () {
console.
log(
this.
innerHTML);
})
//on（事件，选择器，方法）
$(
"ul").on(
"click",
"li",
function () {
console.
log(
this.
innerHTML);
})
</
script
>
<
script
>
$(
"body").on(
"mouseover",
"div",
function () {
this.
style.
border=
"5px solid black"
})
$(
"body").on(
"mouseleave",
"div",
function () {
this.
style.
border=
"0px solid black"
})
</
script
>
事件解绑
对应的unbind undelegate off
例子:jq(“ul”).on(“click mouseenter”,”li”,function(){alert(jq(this).html())})
jq(“ul”).off(“click”)
现象:鼠标移入触发,点击却不触发
事件触发
事件的触发有两种方式
真事件触发:真的用鼠标点了
假事件触发:用代码让事件触发(2种方式):
①事件名调用时不传参数(不传回调函数):
$(‘#div’).click()
//相当于用户已经点击了一次
②$(‘#div’).trigger(‘click’)
动画
- 隐藏
- hide(sd,fn)隐藏元素
- show(sd,fn)显示元素
- toggle(sd,fn)隐藏显示开关(来回掉用)
- //参数都是可选的,sd是速度可填slow fast normal 或数字(ms),fn是回调函数
- //jq(“p”).hide(2000,function(){alert(666)})
- 淡入淡出
- fadeIn(sd,fn)//淡入已经隐藏的元素
- fadeOut(sd,fn)//淡出已经显示的元素
- fadeToggle(sd,fn)//淡出入开关
- fadeTo(sd,alpha,fn)//自定义透明度
//参数都是可选的,sd是速度可填slow fast normal或数字(ms),alpha是透明度,fn是回调函数
- 滑动隐藏
- slideUp(sd,fn)//向上滑动隐藏
- slideDown(sd,fn)//向下滑动显示
- slideToggle(sd,fn)//上下滑动隐藏显示开关
- //参数都是可选的,sd是速度可填slow fast normal 或数字(ms) fn是回调函数
- 自定义//帧动画（资源）,补间动画（样式）
- animate({属性},sd,fn)//动画
- //要让元素实现动画,必须设置定位
- //参数:{}必填,sd可选动画时间,fn可选,回调函数
- //属性必须用驼峰命名法写,不能用原始的css属性:margin-left改为marginLeft
- 动画队列,队列按照顺序依次执行:
- jq("button").click(function(){
- jq(".div").animate({ width:'200px'});//队列1
- jq(".div").animate({ width:'2000px'});//队列2
- jq(".div").animate({ width:'200px'});//队列3
- })
- <script>
$(
"button").hover(
hide,
show)
function
hide() {
$(
"#div1").hide(
2000,
function () {
console.
log(
111)
})
}
function
show() {
$(
"#div1").
show(
2000,
function () {
console.
log(
2222);
})
}
$(
"button").hover(
function () {
$(
"#div1").
toggle(
2000,
function () {
console.
log(
666)
})
})
//滑动隐藏
$(
"button").hover(
slideUp,
slideDown);
function
slideUp() {
//向上滑动隐藏
$(
"#div1").slideUp(
1000,
function () {
console.
log(
111);
})
}
function
slideDown() {
//想下滑动显示
$(
"#div1").slideDown(
1000,
function () {
console.
log(
122);
})
}
//上下滑动隐藏、显示开关
$(
"button").hover(
slideToggle);
function
slideToggle() {
$(
"#div1").slideToggle(
1000,
function () {
console.
log(
123)
})
}
//自定义//帧动画，补间动画
//元素的属性在事件段内动态改变的过程
//一个动画队列
$(
"div").animate({
width:
"200px"});
$(
"div").animate({
width:
"200px"});
</
script
>
- 停止属性改变
jq(".div").stop(bool,bool)//停止动态改变属性的现象:比如动画 滑动(参数:都可选布尔值,第一个是否停止所有队列,第二个是否立即执行完所有效果)
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
