jquery事件的两种表达方式
//html代码
<a id="test-link" href="#0">点我试试</a>
//第一种：通过on方法
var a = $('#test-link').on('click', function () {
alert('Hello!');
});
//第二种：通过简化方法，直接调用click方法，这种方法比较常用
var a = $('#test-link').click(function () {
alert('Hello!');
});
//on方法的使用语法$(selector).on(event,childSelector,data,function)，其中event是必须，后面是可选，childSelector为子元素
$(selector).on(event,childSelector,data,function)
$('body').on('click', '#add-group-btn', function () {
$("#add-new-group").slideToggle(function() {
$('#new_group').focus();
});
return false;
});
jquery能绑定的事件包括
//鼠标事件
click: 鼠标单击时触发；
dblclick：鼠标双击时触发；
mouseenter：鼠标进入时触发；
mouseleave：鼠标移出时触发；
mousemove：鼠标在DOM内部移动时触发；
hover：鼠标进入和退出时触发两个函数，相当于mouseenter加上mouseleave
//键盘事件，键盘事件仅作用在当前焦点的DOM上，通常是<input>和<textarea>
keydown：键盘按下时触发；
keyup：键盘松开时触发；
keypress：按一次键后触发。
//其他事件
focus：当DOM获得焦点时触发；
blur：当DOM失去焦点时触发；
change：当<input>、<select>或<textarea>的内容改变时触发；
submit：当<form>提交时触发；
ready：当页面被载入并且DOM树完成初始化后触发;
ready事件
//ready事件说明:ready仅作用于document对象。由于ready事件在DOM完成初始化后触发，且只触发一次，所以非常适合用来写其他的初始化代码
//代码示例：假设我们想给一个<form>表单绑定submit事件
<html>
<head>
<script>
$('#testForm').on('submit', function () {
alert('submit!');
});
</script>
</head>
<body>
<form id="testForm">
...
</form>
</body>
//说明：JavaScript在此执行的时候，<form>尚未载入浏览器，所以$('#testForm)返回[]，并没有绑定事件到任何DOM上
//所以我们自己的初始化代码必须放到document对象的ready事件中，保证DOM已完成初始化
<html>
<head>
<script>
$(document).on('ready', function () {
$('#testForm').on('submit', function () {
alert('submit!');
});
});
</script>
</head>
<body>
<form id="testForm">
...
</form>
</body>
//ready事件的简化
$(document).ready(function () {
// on('submit', function)也可以简化:
$('#testForm').submit(function () {
alert('submit!');
});
});
//ready事件的再简化，$(function () {...})的形式，这是document对象的ready事件处理函数
$(function () {
// init...
});
//完全可以反复绑定事件处理函数，它们会依次执行
$(function () {
console.log('init A...');
});
$(function () {
console.log('init B...');
});
$(function () {
console.log('init C...');
});
事件参数
//mousemove和keypress，我们需要获取鼠标位置和按键的值,所有事件都会传入Event对象作为参数，可以从Event对象上获取到更多的信息
$(function () {
$('#testMouseMoveDiv').mousemove(function (e) {
$('#testMouseMoveSpan').text('pageX = ' + e.pageX + ', pageY = ' + e.pageY);
});
});
取消绑定
//绑定取消示例
<a id="test-link" href="#0">点我试试</a>
var a = $("#test-link")
function hello() {
alert('hello!');
}
a.click(hello); // 绑定事件
// 10秒钟后解除绑定:
setTimeout(function () {
a.off('click', hello); //取消hello函数的绑定
//off('click'),一次性移除已绑定的click事件的所有处理函数
//无参数调用off()一次性移除已绑定的所有类型的事件处理函数
}, 10000);
//下面的绑定是无效的，因为针对的是不同的函数对象
a.click(function () { //这里是匿名函数
alert('hello!');
});
// 解除绑定:
a.off('click', function () {
alert('hello!');
});
事件触发条件
//当用户在文本框中输入时，就会触发change事件
var input = $('#test-input');
input.change(function () {
console.log('changed...');
});
//如果用JavaScript代码去改动文本框的值，将不会触发change事件,下面的代码无效
var input = $('#test-input');
input.val('change it!'); // 无法触发change事件
//使用代码触发change事件，input.change()相当于input.trigger('change')，它是trigger()方法的简写
var input = $('#test-input');
input.val('change it!');
input.change(); // 触发change事件
浏览器安全限制
//在浏览器中，有些JavaScript代码只有在用户触发下才能执行，例如，window.open()函数
// 无法弹出新窗口，将被浏览器屏蔽:
$(function () {
window.open('/');
});
var button1 = $('#testPopupButton1');
var button2 = $('#testPopupButton2');
function popupTestWindow() {
window.open('/');
}
button1.click(function () {
popupTestWindow(); //不会被浏览器拦截，用户触发直接执行
});
button2.click(function () {
// 不立刻执行popupTestWindow()，100毫秒后执行:
setTimeout(popupTestWindow, 100); //延时执行的代码会被浏览器拦截
});
示例代码
#html
<div id="banner-message">
<p id="fist_style">First Style</p>
<p id="secondary_style">Second Style</p>
<p id="click">click</p>
<p id="dblclick">dblclick</p>
<p id="mouseenter">mouseenver</p>
<p id="mouseleave">mouseleave</p>
<p id="hover">hover</p>
<input type="text" name="name" class="keydown" />
<input type="text" name="name" class="keyup" />
<textarea type="text" name="name" class="keypress"></textarea>
<input type="text" name="name" class="focus" />
<input type="text" name="name" class="blur" />
<input type="text" name="name" class="change" />
<form name="input" action="" method="get">
<input type="text" name="FirstName" value="Mickey" size="20">
<input type="submit" value="Submit">
</form>
</div>
//first style, common style
$(document).ready(function() {
$('#fist_style').click(function() {
alert("first style")
})
})
//second style
$(document).ready(function() {
$('#secondary_style').on('click', function() {
alert("second style")
})
})
//mouse event: click, dblclick, mouseenver, mouseleave,hover
$(document).ready(function() {
$("#click").click(function() {
alert("click");
})
})
$(document).ready(function() {
$("#dblclick").dblclick(function() {
alert("dblclick");
})
})
$(document).ready(function() {
$("#mouseenter").mouseenter(function() {
alert("mouseenter");
})
})
$(document).ready(function() {
$("#mouseleave").mouseleave(function() {
alert("mouseleave");
})
})
$(document).ready(function() {
$("#hover").hover(function() {
alert("hover");
})
})
//keyboard event(available input&textarea): keypdown, keyup, keypress
$(document).ready(function() {
$("input.keydown").keydown(function() {
alert("keydown");
})
})
$(document).ready(function() {
$("input.keyup").keyup(function() {
alert("keyup");
})
})
$(document).ready(function() {
$('textarea.keypress').keypress(function() {
alert("keypress");
})
})
//other event: focus,blur,change,submit,ready
$(document).ready(function() {
$('input.focus').focus(function() {
$(this).css("background-color", "#FFFFCC");
})
$('input.focus').blur(function() {
$(this).css("background-color", "#FFFFFF");
})
})
$(document).ready(function(){
//alert("hello world");
})
$(document).ready(function() {
$('input.change').change(function() {
$(this).css("background-color","#FFFFCC");
})
})
$(document).ready(function(){
$('form').submit(function(){
alert("submit");
})
})