Javascript - Jquery - 事件
事件(Event)
文档事件
文档的载入事件
ready(fn)
});
//或
$(function () {
});
//或
$(document).ready(fn)
function fn() { }
//或
$(document).ready(fn = function () {
});
文档的键盘鼠标事件
keyup(fn)
键盘按下并抬起时发生
alert('键盘被按下');
});
为文档元素绑定事件
//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
示例
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 () { }
}
);
注销事件
//eventName:事件名,每个事件名以空格隔开
//fnName:自定义事件的函数名,每个事件名以空格隔开
//注销事件,如果两个参数都不存在,则移除所有事件
模拟事件
//eventName:事件名,
//fnName:自定义事件的函数名
//paramsArray:事件处理函数所需要的参数
//注意:当trigger执行submit事件时,浏览器也将触发submit事件
//这会造成不想要的结果。此时可以使用triggerHandler方法避免浏览器的默认动作或使用事件对象的preventDefault或直接在事件处理函数中return false
示例
$('p').bind('click', function () { });
$('p').trigger('click');
//或
$('p').click();
切换事件
//为元素绑定多个click事件,奇数次时执行clickX,偶数次时执行clickY
toggle(speed, callback……)
//speed:显示或隐藏的动画速度
//callback:完成动画后的回调
//切换元素的显示/隐藏
hover(clickX, clickY, ……)
//为元素绑定多个hover事件,奇数次时执行clickX,偶数次时执行clickY
event事件对象
每个事件处理函数中都维护了一个event对象,可以在函数内部获取它,以便取出事件的信息
eventMessage = e.type;//获取事件类型名称
});
event对象的属性/方法
//获取事件处理函数的名称,诸如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('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 - 学习总目录
转载于:https://www.cnblogs.com/myrocknroll/p/6944854.html
Javascript - Jquery - 事件相关推荐
- JavaScript事件与JQuery事件
JavaScript JQuery <script> function display(){ alert("段落被点击了."); } </script& ...
- 全面解析jQuery $(document).ready()和JavaScript onload事件
这篇文章主要介绍了全面解析jQuery $(document).ready()和JavaScript onload事件的相关资料,非常不错具有参考借鉴价值,需要的朋友可以参考下 对元素的操作和事件的绑 ...
- 2021/10/31 前端开发之JavaScript+jQuery入门 第十二章jQuery事件与动画
目录 1.jQuery中的事件 1.1 事件的组成 1.2 基础事件 2.载入事件 3.鼠标事件 4.键盘事件 5.浏览器事件 6.表单事件 7.绑定事件 8.移除事件 9.复合事件 10.控制元素显 ...
- javascript事件之:jQuery事件中实例对象和拓展对象之间的通信
我们总结过jQery事件中的实例原型对象对外接口和拓展对象,现在我们看看他们是如何进行通信联系的. 先来看便捷方法: 1 //调用的还是实例对象下的on()和trigger() 2 jQuery.ea ...
- 最详细的JavaScript和事件解读
与浏览器进行交互的时候浏览器就会触发各种事件.比如当我们打开某一个网页的时候,浏览器加载完成了这个网页,就会触发一个 load 事件:当我们点击页面中的某一个"地方",浏览器就会在 ...
- jQuery事件的链式写法
<head> <title>jQuery事件的链式写法</title> <script src="jquery-1.9.1.js&q ...
- JQuery-学习笔记06【高级——JQuery事件绑定和切换】
Java后端 学习路线 笔记汇总表[黑马程序员] JQuery-学习笔记01[基础--JQuery基础]--[day01] JQuery-学习笔记02[基础--JQuery选择器] JQuery-学习 ...
- 什么是 jQuery 事件
jQuery事件是DOM事件的封装,同时支持自定义的扩展.在程序设计中,事件和代理有着相似的作用: 它们提供了一种机制,使得行为的实现方式和调用时机可以分离. 不谈jQuery,DOM本身就提供了一系 ...
- DOM事件与jQuery事件的是非纠葛
在javascript和JQuery之中,都有事件的处理方式,在我们编写程序实现某些功能的时候,我们会发现使用原生的DOM事件与JQuery中封装的事件都能实现同样的效果,那么也许我们会认为他们之间的 ...
最新文章
- 什么是ownership?
- 带你认识SAP反记账
- 13.SpringMVC和Spring集成(一) 14.SpringMVC和Spring集成(二)
- java 网络传输中发送byte[]和接收到的不一致_为什么JAVA对象需要实现序列化?
- 那个好好玩的特效,每个人都可以做到哦
- SAP Spartacus 成功读取 Cart 之后,如何将 payload 插入全局 state
- Python dict() 函数
- Linux升级glibc版本汉字乱码,Linux CentOS6升级glibc库过程
- 研究人脸识别技术必须知道的十个基本概念
- inode mac客户端_淘宝直播PC客户端适合哪些场景使用?
- 中国开放教育资源协会
- EasyUI中Datagrid列定位方法
- OpenCV图像预处理常用函数及流程
- 素数and约数and反素数
- 大物狭义相对论中的四维时空与闵氏时空图(上)
- 数数小绵羊(四刷) kkmd66
- 【DM】教你用JDBC连接达梦数据库并进行增删改查
- runtime无法执行grep_Runtime.getRuntime.exec()执行linux脚本导致程序卡死有关问题
- win 7 音频问题
- Element-UI checkbox 如何改造成只可单项选择