事件对象
那么事件对象是什么？它在哪里呢？
当触发某个事件时，会产生一个事件对象，这个对象包含着所有与事件有关的信息。包括导致事件的元素、事件的类型、以及其它与特定事件相关的信息。
这个事件对象，我们一般称作为event 对象，这个对象是浏览器通过函数把这个对象作为参
数传递过来的。
通过下面两组函数中，我们发现，通过事件绑定的执行函数是可以得到一个隐藏参数的。
说明，浏览器会自动分配一个参数，这个参数其实就是event 对象
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index2</title>
<script src="~/Scripts/jquery-1.8.2.js"></script>
</head>
<body>
<div id="div1">
aa
</div>
</body>
</html>
<script type="text/javascript">
//注：arguments 是获取函数的参数的。它还有length属性，即：arguments.length可以获取到函数有几个参数
document.onmousedown = function () {alert( arguments[0]) }; //将document这个对象绑定一个onclick事件。当触发这个onclick事件的时候，那么在处理这个事件的函数中就会有一个隐藏的对象；
//这打印出：[Object MouseEvent] 即;说明arguments[0]获取到了一个对象。这就说明，浏览器会自动分配一个参数，这个参数我们可以在处理这个事件的函数中获取到。这个参数其实就是event 对象。
//但是通过上面的arguments[0]做法比较累，那么比较简单的做法是，直接通过接收参数来得到即可。例如：
document.onmousedown = function (event) { alert(event); console.log(event) }; //这打印出：[Object MouseEvent]
//注意：既然event是对象，所以它自然就会有属性，我们可以通过console.log(event)来检查他里面有什么属性
$(function () {
//$("#div").click(function (e) { //用这种方式没效果，这种方式应该不算是绑定
// alert(e.button)
//})
$("#div1").bind("click", function (event) { //给#div1绑定一个click事件；这个event对象是浏览器通过函数把这个对象作为参数传递过来的
alert(event.button); //通过上面的介绍，我们可以在这里获取到event
})
})
<1>
jqeury的事件对象：jqeury的事件对象是通过function()方法里面的第一个参数传进来的，接收的时候名字是没有限制的，我们可以随便设定，但是大多时候我们都将它设为e 或者event 。所以我们可以这样来写 function(e),这个e对象是浏览器自动传给这个函数的，然后这个函数就接收到了。
<html>
<head>
<title></title>
<script src="../jquery-2.1.3.js"></script>
</head>
<body>
<button id="a">a</button>
<button id="b">b</button>
<button id="c">c</button>
</body>
</html>
<script type="text/javascript">
//绑定一个事件
$("#a").bind("click", function () {
alert("单击事件");
})
//同时绑定多个事件,每个事件执行不同的任务
$("#b").bind({
"mouseover": function () {
alert("鼠标进入");
},
"mouseout": function () {
alert("鼠标移出");
}
});
//同时绑定多个事件，多个事件都执行一个任务
$("#c").bind("click mouseover", function () {
alert("弹窗！");
})
$("button").bind("dblclick", f1);
function f1() {
alert("我是f1");
}
$("button").unbind();//删除button控件的全部事件。这样上面button按钮绑定的事件就全被被删除掉了，所以的事件就不起作用了。
$("button").unbind("click"); //删除button控件绑定的click事件。 这样绑定在button控件上的click事件就不起作用了
$("button").unbind("click mouseover"); //删除button控件绑定的click，和mouseover事件
$("button").unbind("click", f1); //删除button控件上绑定f1函数的click事件 （即：假如我button控件绑定了click事件，如果这个事件的处理函数是f1，那么就删除这个click事件）
</script>
jquery事件对象 event
jqeury的事件对象：jqeury的事件对象是通过function()方法里面的第一个参数传进来的，接收的时候名字是没有限制的，我们可以随便设定，但是大多时候我们都将它设为e 或者event 。所以我们可以这样来写 function(e),这个e对象是浏览器自动传给这个函数的，然后这个函数就接收到了。
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="../jquery-2.1.3.js"></script>
<style type="text/css">
button {
width:100px ;height:30px ;background:red; border-radius:4px; margin:50px auto; line-height:30px;text-align:center;
}
</style>
</head>
<body>
<button id="a">a</button>
<button id="b">b</button>
<button id="c">c</button>
<button id="d">d</button>
<button id="e">e</button>
<button id="f">f</button>
<button id="g">g</button>
</body>
</html>
<script type="text/javascript">
//jqeury的事件对象：jqeury的事件对象是通过function()方法里面的第一个参数传进来的，接收的时候名字是没有限制的，我们可以随便设定，但是大多时候我们都将它设为e 或者event 。所以我们可以这样来写 function(e),这个e对象是浏览器自动传给这个函数的，然后这个函数就接收到了。
$("#a").click(function (e) {
alert(e.type); //获取这个click事件的事件类型 这里打印出：click
alert(e.target)//获取绑定事件的DOM 元素 这里打印出：[object HTMLDivElement] 我们可以看到HTML后面是一个DivElement 这说明这个DOM元素是一个div元素
alert( e.target.nodeName) //直接获取触发这个Click事件的元素名称 这里打印出：Div
alert(e.timeStamp); //获取事件触发的时间戳
})
关于额外数据data
$("#b").click(123, function (e) { //第一个参数就是一个额外数据，他可以是数值，字符串，对象，数组。这个额外数据可以是一个变量当然也可以直接写，比如这里我们就直接将额外数据设为数值123
alert(e.data); //获取事件调用时的额外数据 打印出：123
})
$("#c").click("中国", function (e) { //额外数据可以是一个字符串
alert(e.data); //打印出：中国
})
$("#d").click({ user: '张三', age: 25 }, function (e) { //额外数据可以是一个对象
alert(e.data); //打印出：[object Object]
alert(e.data.user); //打印出：张三
alert(e.data.age); //打印出：25
})
$("#e").click([1, 2, 3, "a", "b", "c"], function (e) { //额外数据可以是一个数组
alert(e.data); //打印出 1,2,3,a,b,c
alert(e.data[1]); //打印出：2
alert(e.data[3]); //打印出：a
})
var aa = "abc";
$("#f").click(aa, function (e) { //额外数据可以是一个变量
alert(e.data); //打印出：abc
})
//关于result 获取上一个相同事件的返回值
$("#g").click(function (e) {
return "美国";
});
$("#g").click(function (e) {
alert(e.result); //上一个相同事件（click事件）的返回值是美国，所以这里 打印出：美国
})
//关于pageX/pageY
$(window).click(function (e) {
//pageX:获取相对于页面原点的水平坐标
//screenX:获取显示器屏幕位置的水平坐标
//clientX:获取相对于页面视口的水平坐标
alert(e.pageX + "-" + e.screenX + "-" + e.clientX); //通过打印这个三个水平坐标我们得知，他们的值都是一样的。
})
$(window).click(function (e) {
//pageY:获取相对于页面原点的垂直坐标 （假如我的显示器分辨率是1920*1080，如果我可以拖动滚动条的话，pageY的值可能远远超过1080）
//screenY:获取显示器屏幕位置的垂直坐标 （假如我的显示器分辨率是1920*1080 那么screenY能够获取到的最大值也就是1080，即便你往下拖动滚动条，也没效果，它的最大值只能是1080）
//clientY:获取相对于页面视口的垂直坐标 （假如我的显示器分辨率是1920*1080 那么clientY能够获取到的最大值是1080-(浏览器头部的高度)）
alert(e.pageY + "-" + e.screenY + "-" + e.clientY); //通过打印这个三个垂直坐标得知，他们是不一样的
})
//which 获取鼠标的左中右键(1,2,3)，或获取键盘按键
$(window).click(function (e) {
alert(e.which); //当我按下左键 打印出：1 当我按下滑轮 打印出：2 当我按下右键 打印出：3
})
$(window).mousedown(function (e) {
alert(e.which); //当我按下左键 打印出：1 当我按下滑轮 打印出：2 当我按下右键 打印出：3
})
//keyup是获取键盘按键
$(window).keyup(function (e) {
alert(e.which); //当我按下键盘按键的时候会弹对应键 键盘码(键盘码是数字)
})
$(window).click(function (e) {
alert(e.altKey) //获取是否单击的时候同时按下了alt键 ； 当我仅仅点击的时候打印出：false ;当我按住alt的同时在单击的时候 打印出:true
})
//这个window可以换成你需要的元素 比如$("input").click(function(e){ alert(e.altKey)})
$(window).click(function (e) {
alert(e.ctrlKey) //获取是否单击的时候同时按下了ctrl键 ； 当我仅仅点击的时候打印出：false ;当我按住ctrl的同时在单击的时候 打印出:true
})
$(window).click(function (e) {
alert(e.shiftKey) //获取是否单击的时候同时按下了shift键 ； 当我仅仅点击的时候打印出：false ;当我按住shift的同时在单击的时候 打印出:true
})
</script>关于坐标我们用图片来解释一下。看下图 。注：平常我们用的最多的就是pageX pageY
alert(e.pageX + "-" + e.screenX + "-" + e.clientX); //通过打印这个三个水平坐标我们得知，他们的值都是一样的
那我们就主要来关注这三个垂直坐标
pageY:获取相对于页面原点的垂直坐标 （假如我的显示器分辨率是1920*1080，如果我可以拖动滚动条的话，pageY的值可能远远超过1080）
screenY:获取显示器屏幕位置的垂直坐标 （假如我的显示器分辨率是1920*1080 那么screenY能够获取到的最大值也就是1080，即便你往下拖动滚动条，也没效果，它的最大值只能是1080）
clientY:获取相对于页面视口的垂直坐标 （假如我的显示器分辨率是1920*1080 那么clientY能够获取到的最大值是1080-(浏览器头部的高度)
扫一扫
626
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
