Javascript - Jquery - 事件
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Javascript - Jquery - 事件相关的知识,希望对你有一定的参考价值。
事件(Event)
文档事件
文档的载入事件
ready(fn)
$(document).ready(function () {
});
//或
$(function () {
});
//或
$(document).ready(fn)
function fn() { }
//或
$(document).ready(fn = function () {
});
});
//或
$(function () {
});
//或
$(document).ready(fn)
function fn() { }
//或
$(document).ready(fn = function () {
});
文档的键盘鼠标事件
keyup(fn)
键盘按下并抬起时发生
$(document).keydown(function () {
alert(\'键盘被按下\');
});
alert(\'键盘被按下\');
});
为文档元素绑定事件
bind(eventName,data, fn)
//eventName:事件名称
//data:可选,传递到函数的额外数据
//fn:事件处理函数
//eventName可能的值:
//load、unload、
//blur、focus、
//resize、scroll、
//mouseouser、mousemove、
//mouseup、mousedown、
//mouseout、mouseenter、mouseleave、
//click、dbclick、
//change(下拉框选项改变时会发生这个改变事件)、select(文本框被选择后会发生这个选择事件)、
//submit、keydown、keyup、keypress
//error
//eventName:事件名称
//data:可选,传递到函数的额外数据
//fn:事件处理函数
//eventName可能的值:
//load、unload、
//blur、focus、
//resize、scroll、
//mouseouser、mousemove、
//mouseup、mousedown、
//mouseout、mouseenter、mouseleave、
//click、dbclick、
//change(下拉框选项改变时会发生这个改变事件)、select(文本框被选择后会发生这个选择事件)、
//submit、keydown、keyup、keypress
//error
示例
$(document).ready(function () {
var div = $("#box");
div.bind("click", fn);
function fn() {
alert(event.srcElement.outerText);//print hello
alert(this.id);//print box
}
});
//或将type作为函数调用
$(\'p\').click(function () { });
$(\'p\').blur(function () { });
var div = $("#box");
div.bind("click", fn);
function fn() {
alert(event.srcElement.outerText);//print hello
alert(this.id);//print box
}
});
//或将type作为函数调用
$(\'p\').click(function () { });
$(\'p\').blur(function () { });
追加事件
使用.操作符可以为该对象追加事件
//链式调用
$(\'li p\').bind(\'click\', fn1).bind(\'click\', fn2);
//或
$(\'li p\').bind(
{
"click": function () { },
"mouseup": function () { }
}
);
$(\'li p\').bind(\'click\', fn1).bind(\'click\', fn2);
//或
$(\'li p\').bind(
{
"click": function () { },
"mouseup": function () { }
}
);
注销事件
unbind(eventName | fnName)
//eventName:事件名,每个事件名以空格隔开
//fnName:自定义事件的函数名,每个事件名以空格隔开
//注销事件,如果两个参数都不存在,则移除所有事件
//eventName:事件名,每个事件名以空格隔开
//fnName:自定义事件的函数名,每个事件名以空格隔开
//注销事件,如果两个参数都不存在,则移除所有事件
模拟事件
trigger(event | fnName, paramsArray)
//eventName:事件名,
//fnName:自定义事件的函数名
//paramsArray:事件处理函数所需要的参数
//注意:当trigger执行submit事件时,浏览器也将触发submit事件
//这会造成不想要的结果。此时可以使用triggerHandler方法避免浏览器的默认动作或使用事件对象的preventDefault或直接在事件处理函数中return false
//eventName:事件名,
//fnName:自定义事件的函数名
//paramsArray:事件处理函数所需要的参数
//注意:当trigger执行submit事件时,浏览器也将触发submit事件
//这会造成不想要的结果。此时可以使用triggerHandler方法避免浏览器的默认动作或使用事件对象的preventDefault或直接在事件处理函数中return false
示例
//模拟:通过执行代码来模拟用户的一个触发事件的动作
$(\'p\').bind(\'click\', function () { });
$(\'p\').trigger(\'click\');
//或
$(\'p\').click();
$(\'p\').bind(\'click\', function () { });
$(\'p\').trigger(\'click\');
//或
$(\'p\').click();
切换事件
toggle(clickX, clickY, ……)
//为元素绑定多个click事件,奇数次时执行clickX,偶数次时执行clickY
toggle(speed, callback……)
//speed:显示或隐藏的动画速度
//callback:完成动画后的回调
//切换元素的显示/隐藏
hover(clickX, clickY, ……)
//为元素绑定多个hover事件,奇数次时执行clickX,偶数次时执行clickY
//为元素绑定多个click事件,奇数次时执行clickX,偶数次时执行clickY
toggle(speed, callback……)
//speed:显示或隐藏的动画速度
//callback:完成动画后的回调
//切换元素的显示/隐藏
hover(clickX, clickY, ……)
//为元素绑定多个hover事件,奇数次时执行clickX,偶数次时执行clickY
event事件对象
每个事件处理函数中都维护了一个event对象,可以在函数内部获取它,以便取出事件的信息
$(\'#box\').bind(\'myshow\', function (e) {
eventMessage = e.type;//获取事件类型名称
});
eventMessage = e.type;//获取事件类型名称
});
event对象的属性/方法
type
//获取事件处理函数的名称,诸如click、mouseover、keydown
relatedTarget
//如果是mouseover事件,获取鼠标是从哪个dom元素里移动过来的
//如果是mouseout事件,获取鼠标移动到了哪个dom元素里
pageX
//获取事件发生时鼠标离客户区的左边距
pageY
//获取事件发生时鼠标离客户区的左边距
which
//获取事件发生时鼠标按下的是左、中、右键中的哪个键,对应的值是1、2、3
//或键盘按下的是哪个键
target
//获取触发事件的dom源对象
originalEvent
//获取事件原始对象,主要用于当鼠标类事件发生时
//有效传递了一个MouseEvent对象,MouseEvent派生自event的构造器
//如果MouseEvent不满足你要获取的事件信息,你可以通过此方法获取真正的源
mataKey
//是否按下了ctrl键
stopPropagation()
//阻止事件冒泡
preventDefault()
//阻止浏览器默认动作
//获取事件处理函数的名称,诸如click、mouseover、keydown
relatedTarget
//如果是mouseover事件,获取鼠标是从哪个dom元素里移动过来的
//如果是mouseout事件,获取鼠标移动到了哪个dom元素里
pageX
//获取事件发生时鼠标离客户区的左边距
pageY
//获取事件发生时鼠标离客户区的左边距
which
//获取事件发生时鼠标按下的是左、中、右键中的哪个键,对应的值是1、2、3
//或键盘按下的是哪个键
target
//获取触发事件的dom源对象
originalEvent
//获取事件原始对象,主要用于当鼠标类事件发生时
//有效传递了一个MouseEvent对象,MouseEvent派生自event的构造器
//如果MouseEvent不满足你要获取的事件信息,你可以通过此方法获取真正的源
mataKey
//是否按下了ctrl键
stopPropagation()
//阻止事件冒泡
preventDefault()
//阻止浏览器默认动作
事件命名空间
如果为元素绑定了N个事件,注销时你得一个一个注销,使用事件命名空间就可以一次性注销它们。
$(\'p\').bind(\'mouseover.Result\', function () { });
$(\'p\').bind(\'click.Result\', function () { });
$(\'p\').bind(\'focus.Result\', function () { });
$(\'p\').unbind(\'.Result\');
$(\'p\').bind(\'click.Result\', function () { });
$(\'p\').bind(\'focus.Result\', function () { });
$(\'p\').unbind(\'.Result\');
$(\'p\').bind(\'click\', function () { alert("1"); }); //无命名空间
$(\'p\').bind(\'click.Result\', function () { alert("2"); }); //有命名空间
$(\'#btn\').click(function () {
$(\'p\').trigger(\'click!\')//执行所有不包含在任何命名空间里的click事件,print 1
});
以上是关于Javascript - Jquery - 事件的主要内容,如果未能解决你的问题,请参考以下文章
jQuery-介绍 加载 选择器 样式操作 属性操作 绑定click事件