06jQuery-05-事件
// 获取超链接的jQuery对象:
var a = $('#test-link');
a.on('click', function () {
alert('Hello!');
});
// 获取超链接的jQuery对象:
var a = $('#test-link');
a.on('click', function () {
alert('Hello!');
});
a.click(function () {
alert('Hello!');
});
a.click(function () {
alert('Hello!');
});
1、常用事件
1.1 鼠标事件
click | 鼠标单击时触发 |
dblclick | 鼠标双击时触发 |
mouseenter | 鼠标进入时触发 |
mouseleave | 鼠标移出时触发 |
mousemove | 鼠标在DOM内部移动时触发 |
hover | 鼠标进入和退出时触发两个函数,相当于mouseenter加上mouseleave |
1.2 键盘事件
keydown | 键盘按下时触发 |
keyup | 键盘松开时触发 |
keypress | 按一次键后触发 |
1.3 其他事件
focus | 当DOM获得焦点时触发 |
blur | 当DOM失去焦点时触发 |
change | 当<input>、<select>或<textarea>的内容改变时触发 |
submit | 当<form>提交时触发 |
ready | 当页面被载入并且DOM树完成初始化后触发 |
<html>
<head>
<script>
$(document).on('ready', function () {
$('#testForm).on('submit', function () {
alert('submit!');
});
});
</script>
</head>
<body>
<form id="testForm">
...
</form>
</body>
<html>
<head>
<script>
$(document).on('ready', function () {
$('#testForm).on('submit', function () {
alert('submit!');
});
});
</script>
</head>
<body>
<form id="testForm">
...
</form>
</body>
$(document).ready(function () {
// on('submit', function)也可以简化:
$('#testForm).submit(function () {
alert('submit!');
});
});
$(document).ready(function () {
// on('submit', function)也可以简化:
$('#testForm).submit(function () {
alert('submit!');
});
});
$(function () {
// init...
});
$(function () {
// init...
});
2、事件参数
$(function () {
$('#testMouseMoveDiv').mousemove(function (e) {
$('#testMouseMoveSpan').text('pageX = ' + e.pageX + ', pageY = ' + e.pageY);
});
});
$(function () {
$('#testMouseMoveDiv').mousemove(function (e) {
$('#testMouseMoveSpan').text('pageX = ' + e.pageX + ', pageY = ' + e.pageY);
});
});
3、取消绑定
// 绑定事件:
a.click(function () {
alert('hello!');
});
// 解除绑定:
a.off('click', function () {
alert('hello!');
});
// 绑定事件:
a.click(function () {
alert('hello!');
});
// 解除绑定:
a.off('click', function () {
alert('hello!');
});
4、事件触发条件
var input = $('#test-input');
input.val('change it!');
input.change(); // 触发change事件
// input.change()相当于input.trigger('change'),它是trigger()方法的简写
var input = $('#test-input');
input.val('change it!');
input.change(); // 触发change事件
// input.change()相当于input.trigger('change'),它是trigger()方法的简写
06jQuery-05-事件的更多相关文章
- JavaScript进阶系列05,事件的执行时机, 使用addEventListener为元素同时注册多个事件,事件参数
本篇体验JavaScript事件的基本面,包括: ■ 事件必须在页面元素加载之后起效■ 点击事件的一个简单例子■ 为元素注册多个点击事件■ 获取事件参数 ■ 跨浏览器事件处理 □ 事件必须在页面元素加 ...
- 读书笔记(05) - 事件 - JavaScript高级程序设计
HTML依托于JavaScript来实现用户与WEB网页之间的动态交互,接收用户操作并做出相应的反馈,而事件在此间则充当桥梁的重要角色. 日常开发中,经常会为某个元素绑定一个事件,编写相应的业务逻辑, ...
- jQuery中的事件冒泡
1.什么是冒泡 eg: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <he ...
- JavaScript进阶系列07,鼠标事件
鼠标事件有Keydown, Keyup, Keypress,但Keypress与Keydown和Keyup不同,如果按ctrl, shift, caps lock......等修饰键,不会触发Keyp ...
- JavaScript进阶系列06,事件委托
在"JavaScript进阶系列05,事件的执行时机, 使用addEventListener为元素同时注册多个事件,事件参数"中已经有了一个跨浏览器的事件处理机制.现在需要使用这个 ...
- 20160227.CCPP体系详解(0037天)
程序片段(01):01.一对一模式.c+02.中介者模式.c+03.广播模式.c 内容概要:事件 ///01.一对一模式.c #include <stdio.h> #include < ...
- 20160226.CCPP体系详解(0036天)
程序片段(01):01.多线程.c+02.多线程操作.c 内容概要:多线程 ///01.多线程.c #include <stdio.h> #include <stdlib.h> ...
- JavaScript进阶系列04,函数参数个数不确定情况下的解决方案
本篇主要体验函数参数个数不确定情况下的一个解决方案.先来看一段使用函数作为参数进行计算的实例. var calculate = function(x, y, fn) { return fn(x, y) ...
- JavaScript进阶系列03,通过硬编码、工厂模式、构造函数创建JavaScript对象
本篇体验通过硬编码.工厂模式.构造函数来创建JavaScript对象. □ 通过硬编码创建JavaScript对象 当需要创建一个JavaScript对象时,我们可能这样写: var person = ...
- JavaScript进阶系列02,函数作为参数以及在数组中的应用
有时候,把函数作为参数可以让代码更简洁. var calculator = { calculate: function(x, y, fn) { return fn(x, y); } }; var su ...
随机推荐
- flannel 概述 - 每天5分钟玩转 Docker 容器技术(58)
flannel 是 CoreOS 开发的容器网络解决方案.flannel 为每个 host 分配一个 subnet,容器从此 subnet 中分配 IP,这些 IP 可以在 host 间路由,容器间无 ...
- MarkdownPad2之安装破解
MarkdownPad2之安装破解 一.下载破解版 1.地址链接:http://pan.baidu.com/s/1i5JzG13 密码: 4jgw 2.按步骤安装后,进行汉化:[Tool]--> ...
- 【学习笔记】深入理解超时调用(setTimeout)和间歇调用(setInterval)
超时调用(setTimeout):在指定的毫秒数后调用函数或计算表达式. setTimeout(func, 1000); // func执行的函数,1000毫秒 间歇调用(setInterval):按 ...
- 《Java从入门到放弃》JavaSE篇:综合练习——单身狗租赁系统(数组版)
因为现在只学习了基本语法,所以在综合练习之前,先补充关于方法概念. 方法的作用:把一系列的代码放在一起,然后再取个别名.之后通过这个别名的调用,就相当于执行了这一系列的代码. 方法的语法:([]中的内 ...
- 正则表达式-linux基础
通配符 通赔符是模糊匹配的基础,因为通赔符机制的存在使得我们在查找文件的时候非常方便 * :匹配任意长度的任意字符,也可以一个都没有 . :匹配任意单个字符,必须有一个 [ ] ...
- macaca 测试web(3)
上回书说到 macaca 测试web(2) 使用ddt做参数驱动化, 有些人会说,你好low,我说怎么low呢,他说你看看你的脚本就放在一个文件里,对于我们小白来说,这看起来很乱啊,能不能给我拆分, ...
- openssl命令
author:JevonWei 版权声明:原创作品 1.构建根证书 构建根证书前,需要构建随机数文件(.rand),完整命令如 openssl rand -out private/.rand 1000 ...
- Java之JMX 详解
详见:http://blog.yemou.net/article/query/info/tytfjhfascvhzxcyt194 一.JMX简介 JMX是一种JAVA的正式规范,它主要目的是让程序有被 ...
- JS中window.showModalDialog()详解(转)
window.showModalDialog()方法用来创建一个显示HTML内容的模态对话框. window.showModelessDialog()方法用来创建一个显示HTML内容的非模态对话框. ...
- [置顶]
基于FPGA的VGA简易显存设计&NIOS ii软核接入
项目简介 本项目基于Altera公司的Cyclone IV型芯片,利用NIOS II软核,2-port RAM与时序控制模块,实现64*48分辨率的显存(再大的显存板载资源m9k不够用) 实现效果如下 ...