简单事件设置

Posted on Posted in js
Tips: 本文创建于2014年7月6日,已超过 2 年,内容或图片可能已经失效!

[code lang="html"]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>新建网页</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />

<script type="text/javascript" src="jquery-2.1.0.js"></script>

<script type="text/javascript">
//通过加载事件给div设置具体简单事件
$(function() {
//页面加载完成后给div设置点击事件
$("div").click(function() {
//事件执行逻辑
console.log('你碰到我了');
});
$("div").mouseover(function() {
//事件执行逻辑
console.log('有人已经偷摸来了');
});
$("div").mouseout(function() {
//事件执行逻辑
console.log('轻轻地又走了');
});
});
function f1() {
//通过代码使得事件被触发执行
//以下代码可以触发div的相关事件执行
$("div").click();
$("div").mouseover();
$("div").mouseout();
}
</script>

<style type="text/css">
div {
width: 400px;
height: 300px;
background-color: pink;
}
</style>
</head>

<body>
<h2>简单事件</h2>
<div></div>
<input type="button" value="触发" onclick="f1()" />
</body>
</html>
[/code]
[code lang="html"]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>新建网页</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />

<script type="text/javascript" src="jquery-2.1.0.js"></script>

<script type="text/javascript">
/*
focusin(fn) ----->focus()
在父元素上检测子元素获取焦点的情况
focusout(fn)
在父元素上检测子元素失去焦点的情况
*/
$(function() {
//设置div框获得焦点
//focus()事件不能检测到子元素获得焦点情况
//$("div").focus(function(){

//focusin()事件可以检测内部子元素获得焦点情况
$("div").focusin(function() {
console.log('哈哈,我已经获得焦点了');
});
//focusout()事件可以感知子元素失去焦点情况
$("div").focusout(function() {
console.log('有没有了');
});
});
</script>

<style type="text/css">
div {
width: 400px;
height: 300px;
background-color: pink;
}
</style>
</head>

<body>
<h2>简单事件</h2>
<div>
<input type="text" id="username" />
</div>
<input type="button" value="触发" onclick="f1()" />
</body>
</html>
[/code]
[code lang="html"]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>新建网页</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />

<script type="text/javascript" src="jquery-2.1.0.js"></script>

<script type="text/javascript">
/*
scroll(fn)
当滚动条发生变化时触发
瀑布流效果

select(fn)
当用户在文本框(包括input和textarea)中选中某段文本时会触发
*/

$(function() {
$("div").scroll(function() {
//感知滚动条卷起高度
//dom.scrollTop;
//this 代表当前div的dom节点对象
console.log(this.scrollTop);
});
$("input:eq(0)").select(function() {
alert('ok');
});
});
</script>

<style type="text/css">
div {
width: 400px;
height: 300px;
background-color: pink;
overflow: auto;
}
</style>
</head>

<body>
<h2>简单事件</h2>
<div>
<input type="text" id="username" value="简单事件设置" /><br /> <input
type="text" id="username" /><br /> <input type="text" id="username" /><br />
<input type="text" id="username" /><br /> <input type="text"
id="username" /><br /> <input type="text" id="username" /><br />
<input type="text" id="username" /><br /> <input type="text"
id="username" /><br /> <input type="text" id="username" /><br />
<input type="text" id="username" /><br /> <input type="text"
id="username" /><br /> <input type="text" id="username" /><br />
<input type="text" id="username" /><br /> <input type="text"
id="username" /><br /> <input type="text" id="username" /><br />
<input type="text" id="username" /><br /> <input type="text"
id="username" /><br /> <input type="text" id="username" /><br />
<input type="text" id="username" /><br /> <input type="text"
id="username" /><br /> <input type="text" id="username" /><br />
<input type="text" id="username" /><br /> <input type="text"
id="username" /><br /> <input type="text" id="username" /><br />
<input type="text" id="username" /><br /> <input type="text"
id="username" /><br /> <input type="text" id="username" /><br />
<input type="text" id="username" /><br /> <input type="text"
id="username" /><br /> <input type="text" id="username" /><br />
<input type="text" id="username" /><br /> <input type="text"
id="username" /><br /> <input type="text" id="username" /><br />
<input type="text" id="username" /><br /> <input type="text"
id="username" /><br />
</div>
<input type="button" value="触发" onclick="f1()" />
</body>
</html>
[/code]

» 转载请注明来源:若我若鱼 » 简单事件设置

Leave a Reply

Your email address will not be published. Required fields are marked *

4 × 2 =