JavaScript每天必学之事件

网络编程 2024/11/20 佚名

3 1 2

其实这篇文章挺早之前就写了，但是由于sf保存方面的bug，所以当时写了一大堆，结果没保存，觉得这个没写完是个不小的遗憾，今天正好有空，就给补充下了，也正好给我的javascript学习总结做一个完结篇。

这里，主要讨论一下js相关的事件——

事件处理程序

在DOM中定义了一些事件，而响应某个事件的函数就叫事件处理程序（或事件侦听器）。事件处理程序的名字一般以“on”开头，例如：onclick等

事件冒泡与捕获

事件流指的是页面中接收事件的顺序，IE，火狐和chrome浏览器都是事件冒泡，所谓是事件冒泡指的是事件最开始由最具体的元素接收，然后逐级向上传播到不具体的节点。而事件捕获则正好相反，事件捕获是由Netscape提出的，事件冒泡和捕获具体如下图所示：

虽然事件捕获是Netscape唯一支持的事件流模型，但目前IE9，火狐和谷歌也都支持这种事件流模型。

事件冒泡的好处

因为事件具有冒泡机制，因此我们可以利用冒泡的原理，把事件加到父级上，触发执行效果。这样做的好处当然就是提高性能了，

 <head lang="en">
 <meta charset="UTF-8">
 <title></title>
 <script type="text/javascript">
 window.onload = function () {
  var aUl = document.getElementsById("bubble");
  var aLi = aUl.getElementsByTagName("li");

  for(var i = 0;i<aLi.length;i++){
  aLi[i].onmouseover = function () {
   this.style.backgroundColor = "blue";
  };
  ali[i].onmouseout = function () {
   this.style.backgroundColor = "";
  }
  }
 };
 </script>
</head>
<body>
<div>
 <ul id = "bubble">
 <li>1</li>
 <li>2</li>
 <li>3</li>
 <li>4</li>
 </ul>
</div>
</body>

这样我们就可以做到li上面添加鼠标事件。但是如果说我们可能有很多个li用for循环的话就比较影响性能。

下面我们可以用事件委托的方式来实现这样的效果。html不变:

 <script type="text/javascript">
 window.onload = function () {
 var aUl = document.getElementsById("bubble");
 var aLi = aUl.getElementsByTagName("li");

 //不管在哪个事件中，只要你操作的那个元素就是事件源。
 // ie：window.event.srcElement
 // 标准下:event.target
 aUl.onmouseover = function (ev) {
  var ev = ev || window.event;
  var target = ev.target || ev.srcElement;

  if(target.nodeName.toLowerCase() == "li"){
  target.style.background = "blue";
  }
 };
 aUl.onmouseout = function (ev) {
  var ev = ev || window.event;
  var target = ev.target || ev.srcElement;

  if(target.nodeName.toLowerCase() = "li"){
  target.style.background = "";
  }
 }
 };
</script>

那么，如何阻止事件的冒泡呢，看下面一个例子：

 <div onclick="showMsg(this,event)" id="outSide" style="width:100px; height:100px; background:#000; padding:50px">
<div onclick="showMsg(this,event)" id="inSide" style="width:100px; height:100px; background:#CCC"></div>
</div>
<script type="text/javascript">
//阻止事件冒泡后，你点击灰色盒子，整个过程只弹一次对话框了（注意与默认情况对比）
function showMsg(obj,e)
{
 alert(obj.id);
 stopBubble(e)
}

//阻止事件冒泡函数
function stopBubble(e)
{
 if (e && e.stopPropagation)
 e.stopPropagation()
 else
 window.event.cancelBubble=true
}
</script>

点击黑色外围的效果图：

DOM 0级事件处理程序

通过js指定事件处理程序通常是将回调函数赋给这个事件处理程序的属性。每个元素都有自己的事件处理程序属性（属性小写，例如：onclick）

 btn.onclick = function(){
 console.log('hello');
};

使用DOM 0级指定的事件处理程序被认为是元素的方法。因此，this指向当前元素：

 var btn = document.getElementById('myDiv');

//DOM上触发的事件会产生一个事件对象event
btn.onclick = function (event) {
 alert(this.id);//myDiv 
};

DOM level 1

DOM level 1 专注于 HTML 和 XML 文档模型。它含有文档导航和处理功能。

DOM level 1 于 1998 年 10 月 1 日成为 W3C 推荐标准。

第二版的工作草案在 2000 年 9 月 29 日。

值得一提的是：DOM level 0 并不是 W3C 规范。而仅仅是对在 Netscape Navigator 3.0 和 IE 3.0 中的等价功能性的一种定义。

DOM 2级事件处理程序

DOM 2级定义了两个方法，用于指定和删除事件处理程序的操作：addEventListener()和removeEventListener()，他们都接受三个参数：

1.事件名。比如上面的click
2.作为事件处理程序的函数。
3.布尔值（true表示捕获阶段调用事件处理程序，false表示冒泡阶段）

通过Element对象的addEventListener方法，也可以定义事件的回调函数。

 //element.addEventListener(event, function, useCapture)

var btn = document.getElementById('myDiv');
btn.addEventListener('click', function () {
 console.log(this.id);
},false);

IE中的事件处理程序

IE9之前的IE浏览器不支持addEventListener()和removeEventListener（）。

与其他浏览器不同的是，IE使用的是attachEvent()和detachEvent()方法来为DOM添加事件处理程序，由于IE8及更早版本只支持事件冒泡，所以他们只接受两个参数：
1、事件处理程序名称（前面要加on）
2、事件处理程序函数
使用attachEvent()添加的事件处理程序如下：

 var btn = document.getElementById('myDiv');
btn.attachEvent('onclick', function () {
 console.log(this.id);
});

值得注意的是，使用attachEvent()方法的情况下，事件处理程序会在全局作用域中运行，所以，此时this等于window

事件对象

在触发DOM上的某个事件时，会产生一个事件对象event，这个对象包含着所有与事件相关的信息。包括导致事件的元素、事件的类型以及其他与特定事件相关的信息。event对象会被作为第一个参数传递给事件监听的回调函数。我们可以通过这个event对象来获取到大量当前事件相关的信息：
type (String) — 事件的名称
target (node) — 事件起源的DOM节点
currentTarget"htmlcode">

 var btn = document.getElementById('myDiv');
btn.onclick = function (event) {
 alert("clicked");
 event.stopPropagation();
};

//避免触发在document.body上的事件处理程序
document.body.onclick = function (event) {
 alert("Body clicked"); 
};

只有在事件处理程序执行期间，event对象才会存在，一旦事件处理程序执行完毕，event对象就会自动销毁。

IE中的事件对象

在DOM 0级中添加事件处理程序时，event对象是作为window对象的一个属性存在的：

 var btn = document.getElementById('myDiv');
btn.onclick = function (event) {
 var event = window.event;
 alert(event.type);//click
};

IE 的event对象同样也包含与创建它的事件相关的属性和方法。
cancleBubble 布尔   默认值时false，但可以被设置成true来取消事件冒泡，与dom中的 stopPropagation()方法相同。
returnValue   布尔    默认值是true，当设置成false时用以取消事件的默认行为与dom中的preventDefault（）相同。
srcElement　元素　事件的目标，与dom中的target属性相同。
type　　　　字符串   被触发的事件类型。

click事件

当用户点击以后，event对象会包含以下属性。
pageX，pageY：点击位置相对于html元素的坐标，单位为像素。
clientX，clientY：点击位置相对于视口（viewport）的坐标，单位为像素。
screenX，screenY：点击位置相对于设备显示屏幕的坐标，单位为设备硬件的像素

clientX，clientY

图示：clientX和clientY，他们的值表示事件发生时鼠标指针在视口中的水平和垂直坐标（不包含滚动条区域）

偏移量

通过以下4个属性可以取得元素的偏移量。

（1）offsetHeight：元素在垂直方向上占用的空间大小，以像素计。包括元素的高度、（可见的）水平滚动条的高度、上边框高度和下边框高度。

（2）offsetWidth：元素在水平方向上占用的空间大小，以像素计。包括元素的宽度、（可见的）垂直滚动条的宽度、左边框宽度和右边框宽度。

（3）offsetLeft：元素的左外边框至包含元素的左内边框之间的像素距离。

（4）offsetTop：元素的上外边框至包含元素的上内边框之间的像素距离。

pageX，pageY

这两个属性表示鼠标光标在页面中的位置，在页面没有滚动的情况下，pageX，pageY的值与clientX，clientY的值相等

滚动大小

滚动大小，指的是包含滚动内容的元素的大小。

以下是4个与滚动大小相关的属性。

（1）scrollHeight：在没有滚动条的情况下，元素内容的总高度。

（2）scrollWidth：在没有滚动条的情况下，元素内容的总宽度。

（3）scrollLeft：被隐藏在内容区域左侧的像素数。通过设置这个属性可以改变元素的滚动位置。

（4）scrollTop：被隐藏在内容区域上方的像素数。通过设置这个属性可以改变元素的滚动位置。

焦点事件

焦点事件会在页面元素获得或失去焦点时触发，有以下4个焦点事件：
1.blur：元素失去焦点时触发，该事件不冒泡
2.focus：元素获得焦点时触发。不冒泡
3.focusin：元素获得焦点时触发，冒泡
4.focusout：元素失去焦点时触发，冒泡

鼠标事件

DOM 3级定义了9个鼠标事件：
click：当用户点击鼠标主键通常是指鼠标左键或按回车键时触发。

dbclick：用户双击鼠标时触发

mousedown：当用户按下鼠标任意一个键都会触发，这个事件是不能够通过键盘触发的。

mousemove：当鼠标在某元素周围移动时重复触发，该事件不能通过键盘事件触发。

mouseout：当鼠标离开元素时触发，这个事件不能通过键盘触发。

mouseover：当鼠标进入元素时触发，这个事件不能够通过键盘触发。

mouseenter：类似“mouseover”，但不冒泡，而且当光标移到后代元素上不会触发。

mouseleave：类似“mouseout”，但不冒泡。在元素上方是不触发。

mouseup：当用户释放鼠标按键时触发，不能够通过键盘触发。

传递给鼠标事件处理程序的事件对象有clientX和clientY属性，它们指定了鼠标指针相对于包含窗口的坐标。加入窗口的滚动偏移量，就可以把鼠标位置转换成文档坐标。
页面上的所有元素都支持鼠标事件。除了mouseenter和mouseleave外，所有的事件都冒泡，并且他们的默认行为是可以被取消掉的。但取消鼠标事件的默认行为可能会影响到其他事件，因为有些鼠标事件是相互依赖的。

拖拉事件

（1）drag事件
drag事件在源对象被拖拉过程中触发。
（2）dragstart，dragend事件
dragstart事件在用户开始用鼠标拖拉某个对象时触发，dragend事件在结束拖拉时触发。
（3）dragenter，dragleave事件
dragenter事件在源对象拖拉进目标对象后，在目标对象上触发。dragleave事件在源对象离开目标对象后，在目标对象上触发。
（4）dragover事件
dragover事件在源对象拖拉过另一个对象上方时，在后者上触发。
（5）drop事件

当源对象被拖拉到目标对象上方，用户松开鼠标时，在目标对象上触发drop事件。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

js,事件

华山资源网 Design By www.eoogi.com

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

华山资源网 Design By www.eoogi.com

评论“JavaScript每天必学之事件”

暂无评论...

JavaScript每天必学之事件

jQuery实现鼠标经过时高亮,同时其他同级元素变暗的效果

jQuery实现简单的网页换肤效果示例

评论“JavaScript每天必学之事件”

更新日志

友情链接