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");
})
})