这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
javascript 的鼠标事件是个比较庞大的家族。需要的朋友可以参考下。
常见的有以下 8 个: mousedown:鼠标的键钮被按下。 mouseup:鼠标的键钮被释放弹起。 click:单击鼠标的键钮。 dblclick:鼠标的键钮被按下。 contextmenu :弹出右键菜单。 mouseover:鼠标移到目标的上方。 mouseout:鼠标移出目标的上方。 mousemove:鼠标在目标的上方移动。 mousedown 事件与 mouseup 事件可以说 click 事件在时间上的细分,顺序是 mousedown => mouseup => click。因此一个点击事件,通常会激发几个鼠标事件。
[Ctrl+A 全选 注:
- <script type="text/javascript">
- var loadEvent = function(fn) {
- var oldonload = window.onload;
- if (typeof window.onload != 'function') {
- window.onload = fn;
- } else {
- window.onload = function() {
- oldonload();
- fn();
- }
- }
- }
- var checkevents = function() {
- var demo = document.getElementById("mouse");
- var ex = document.getElementById("explanation");
- demo.onclick = function() {
- ex.style.display = "block";
- ex.innerHTML += "click<br>"
- }
- demo.ondblclick = function() {
- ex.style.display = "block";
- ex.innerHTML += "dblclick<br>"
- }
- demo.onmouseup = function() {
- ex.style.display = "block";
- ex.innerHTML += "mouseup<br>"
- }
- demo.onmousedown = function() {
- ex.style.display = "block";
- ex.innerHTML += "mousedown<br>"
- }
- demo.oncontextmenu = function() {
- ex.style.display = "block";
- ex.innerHTML += "contextmenu<br>"
- }
- }
- var clearcontent = function() {
- var reset = document.getElementById("clearcontent");
- var ex = document.getElementById("explanation");
- reset.onclick = function() {
- ex.innerHTML = '';
- ex.style.display = "none";
- }
- }
- loadEvent(function() {
- clearcontent();
- checkevents();
- })
- </script>
- <div>
- 请在这里点击,测试一个点击到底捆绑了多少种鼠标事件?!
- </div>
- <p>
- <button type="button" id="clearcontent">
- 清空
- </button>
- </p>
- <div>
- </div>
如需引入外部 Js 需刷新才能执行
]有了它们,我们可以做许多事,但对于高层次的应用(如游戏)是显然不够的,于是鼠标事件的点击事件又根据究竟是点左键还是右键进行细分。在 DOM2.0 中,W3C 对鼠标事件作了现范,鼠标事件被解析为 MouseEvent(我们可以用 e.constructor == MouseEvent 来判断其是否为鼠标事件,是左键点击还是右键点击由它的一个叫 button 的属性判定。以下就是 W3C 的标准现范: 0:按下左键 1:按下中键(如果有的话) 2:按下右键 当然微软是不会妥协的,因为 e.button 本来就是微软最先实现的,网景用的是 e.which,但相对而言,微软的复杂多了。 0:没有键被按下 1:按下左键 2:按下右键 3:左键与右键同时被按下 4:按下中键 5:左键与中键同时被按下 6:中键与右键同时被按下 7:三个键同时被按下 更详细的情况见下表。 GE:Gecko ;SA:Safari; OP:Opera; NS:Netscape
IE | NS 4 | GE ≥ 1.0SA 3OP ≥ 8.0 | GE0.9 | OP<8.0 | ||
---|---|---|---|---|---|---|
e.button | 左键 | 1 | undefined | 0 | 1 | 1 |
中键 | 4 | undefined | 1 | 2 | 3 | |
右键 | 2 | undefined | 2 | 3 | 2 | |
e.which | 左键 | undefined | 1 | 1 | 1 | 1 |
中键 | undefined | 2 | 2 | 2 | 3 | |
右键 | undefined | 3 | 3 | 3 | 2 |
- var mouseEvent = function() {
- var arg = arguments[0],
- el = arg.el || document,
- leftfn = arg.left ||
- function() {},
- rightfn = arg.right ||
- function() {},
- middlefn = arg.middle ||
- function() {},
- buttons = {};
- el.onmousedown = function(e) {
- e = e || window.event;
- if (!+"\v1") {
- switch (e.button) {
- case 1:
- buttons.left = true;
- break;
- case 2:
- buttons.right = true;
- break;
- case 4:
- buttons.middle = true;
- break;
- }
- } else {
- switch (e.which) {
- case 1:
- buttons.left = true;
- break;
- case 2:
- buttons.middle = true;
- break;
- case 3:
- buttons.right = true;
- break;
- }
- }
- if (buttons.left) {
- leftfn();
- } else if (buttons.middle) {
- middlefn();
- } else if (buttons.right) {
- rightfn();
- }
- buttons = {
- "left": false,
- "middle": false,
- "right": false
- };
- }
- }
它接受一个哈希参数,都是可选项。哈希的 el 为要绑定鼠标事件的元素,left 为点击左键激发的事件,其他两个类推。用法如下:
- var el = document.getElementById("mouse");
- var ex = document.getElementById("explanation");
- var left = function() {
- ex.innerHTML = "左键被按下";
- }
- var right = function() {
- ex.innerHTML = "右键被按下";
- }
- mouseEvent({
- el: el,
- left: left,
- middle: null,
- right: right
- });
[Ctrl+A 全选 注:
- <div>
- 请在这里点击,测试左中右鼠标键绑定函数
- </div>
- <div>
- </div>
- <script type="text/javascript">
- var loadEvent = function(fn) {
- var oldonload = window.onload;
- if (typeof window.onload != 'function') {
- window.onload = fn;
- } else {
- window.onload = function() {
- oldonload();
- fn();
- }
- }
- }
- var mouseEvent = function() {
- var arg = arguments[0],
- el = arg.el || document,
- leftfn = arg.left ||
- function() {},
- rightfn = arg.right ||
- function() {},
- middlefn = arg.middle ||
- function() {},
- buttons = {};
- el.onmousedown = function(e) {
- e = e || window.event;
- if (!+"\v1") {
- switch (e.button) {
- case 1:
- buttons.left = true;
- break;
- case 2:
- buttons.right = true;
- break;
- case 4:
- buttons.middle = true;
- break;
- }
- } else {
- switch (e.which) {
- case 1:
- buttons.left = true;
- break;
- case 2:
- buttons.middle = true;
- break;
- case 3:
- buttons.right = true;
- break;
- }
- }
- if (buttons.left) {
- leftfn();
- } else if (buttons.middle) {
- middlefn();
- } else if (buttons.right) {
- rightfn();
- }
- buttons = {
- "left": false,
- "middle": false,
- "right": false
- };
- }
- }
- var checkeventbutton = function() {
- var el = document.getElementById("mouse2");
- var ex = document.getElementById("explanation2");
- var left = function() {
- ex.innerHTML = "左键被按下";
- }
- var middle = function() {
- ex.innerHTML = "中键被按下";
- }
- var right = function() {
- ex.innerHTML = "右键被按下";
- }
- mouseEvent({
- el: el,
- left: left,
- middle: middle,
- right: right
- });
- }
- loadEvent(function() {
- checkeventbutton();
- })
- </script>
如需引入外部 Js 需刷新才能执行
]此外,通过鼠标在网页上的点击,我们还可以获得许多有用的参数,如获得当前鼠标的坐标。根据其参照物的不同,分为以下几套坐标系。一套是以当前浏览器的可视区为参照物(clientX, clientY),另一套是以显示器的屏幕为参照物(screenX, screenY)。此外微软还有一套坐标系(x,y),它是相对于触发事件的对象的 offsetParent 的,火狐有另一套坐标系(pageX, pageY),它是相对于当前网页的。我们可以通过如下函数来获得鼠标在网页的坐标。
- var getCoordInDocument = function(e) {
- e = e || window.event;
- var x = e.pageX || (e.clientX +
- (document.documentElement.scrollLeft
- || document.body.scrollLeft));
- var y= e.pageY || (e.clientY +
- (document.documentElement.scrollTop
- || document.body.scrollTop));
- return {'x':x,'y':y};
- }
[Ctrl+A 全选 注:
- <script type="text/javascript">
- var loadEvent = function(fn) {
- var oldonload = window.onload;
- if (typeof window.onload != 'function') {
- window.onload = fn;
- }else {
- window.onload = function() {
- oldonload();
- fn();
- }
- }
- }
- var getCoordInDocumentExample = function(){
- var coords = document.getElementById("coords");
- coords.onmousemove = function(e){
- var pointer = getCoordInDocument(e);
- var coord = document.getElementById("coord");
- coord.innerHTML = "X,Y=("+pointer.x+", "+pointer.y+")";
- }
- }
- var getCoordInDocument = function(e) {
- e = e || window.event;
- var x = e.pageX || (e.clientX +
- (document.documentElement.scrollLeft
- || document.body.scrollLeft));
- var y= e.pageY || (e.clientY +
- (document.documentElement.scrollTop
- || document.body.scrollTop));
- return {'x':x,'y':y};
- }
- loadEvent(function(){
- getCoordInDocumentExample();
- });
- </script>
- <div>
- 请在这里移动鼠标。
- </div>
- <div> </div>
如需引入外部 Js 需刷新才能执行
](clientX,clientY)的坐标系,不受滚动条影响 至于 mouseover,mousemove,mouseout 没有什么好说,并且无浏览器差异。我们来看鼠标滚轮事件,这个差异很严重。IE、Safari、 Opera 、chrome 是 mousewheel 事件,Firefox 是 DOMMouseScroll 事件。事件属性方面,IE 等是 event. wheelDelta,Firefox 是 event. detail。IE 等往上滚一圈为 120,往下滚一圈为 - 120。Firefox 往上滚一圈为 - 3,往下滚一圈为 3。我们可以构造一个函数来削除它们的差异。
- var mouseScroll = function(fn){
- var roll = function(){
- var delta = 0,
- e = arguments[0] || window.event;
- delta = (e.wheelDelta) ? e.wheelDelta / 120 : -(e.detail || 0) / 3;
- fn(delta);//回调函数中的回调函数
- }
- if(/a/[-1]=='a'){
- document.addEventListener('DOMMouseScroll', roll, false);
- }else{
- document.onmousewheel = roll;
- }
- }
此函数接受一函数作为参数,如:
- mouseScroll(function(delta){
- var obj = document.getElementById('scroll'),
- current = parseInt(obj.offsetTop)+(delta*10);
- obj.style.top = current+"px";
- });
[Ctrl+A 全选 注:
- <script type="text/javascript">
- var $ = function(id){ return document.getElementById(id)}
- window.onload = function(){
- mouseScroll(function(delta){
- var obj = $('scroll'),
- current = parseInt(obj.offsetTop)+(delta*10);
- obj.style.top = current+"px";
- });
- }
- var mouseScroll = function(fn){
- var roll = function(){
- var delta = 0,
- e = arguments[0] || window.event;
- delta = (e.wheelDelta) ? e.wheelDelta / 120 : -(e.detail || 0) / 3;
- fn(delta);//回调函数中的回调函数
- }
- if(/a/[-1]=='a'){
- document.addEventListener('DOMMouseScroll', roll, false);
- }else{
- document.onmousewheel = roll;
- }
- }
- </script>
- <style title="text/css">
- #scroll {
- color:#fff;
- background:#369;
- width:70px;
- height:70px;
- position:absolute;
- left:500px;
- top:200px;
- }
- </style>
- <div>请用鼠标滚轮移动方块</div>
如需引入外部 Js 需刷新才能执行
]来源: http://www.phperz.com/article/17/0422/285930.html