欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

DOM之事件(一)

程序员文章站 2023-12-24 08:35:27
DOM事件,就是浏览器或用户针对页面可以做出的某种动作,我们称这些动作为DOM事件。它是用户和页面交互的核心。当动作发生(事件触发)时,我们可以为其绑定一个或多个事件处理程序(函数),来完成我们想要实现的功能。 为了方便理解下面即将要讲解的内容,在正式开始之前,让我们先来了解一个最常用的事件:cli ......

  dom事件,就是浏览器或用户针对页面可以做出的某种动作,我们称这些动作为dom事件。它是用户和页面交互的核心。当动作发生(事件触发)时,我们可以为其绑定一个或多个事件处理程序(函数),来完成我们想要实现的功能。

 

  为了方便理解下面即将要讲解的内容,在正式开始之前,让我们先来了解一个最常用的事件:click,点击事件:当我们用鼠标点击页面时,如果我们为页面绑定了事件处理程序,那么这时该程序将被执行。

  这里先放一段html代码片段供讲解使用:

 1 <head> 
 2     <style>
 3         .wrapper{width:400px;height:400px;background-color:red}
 4         .main{width:300px;height:300px;background-color:yellow}
 5         .content{width:200px;height:200px;background-color:green}
 6     </style>
 7 </head>
 8 <body>
 9     <div class="wrapper">
10         <div class="main">
11             <div class="content"></div>
12         </div>
13     </div>
14 </body>

 

一  事件处理程序的绑定和解除

  1,  句柄

  绑定:element.on+事件类型(type) = function (e){};

    同一事件类型只能绑定一个事件处理程序,无兼容性问题。

1 var wrap = document.getelementsbyclassname("wrapper")[0];
2 wrap.onclick = function (){
3    alert("wrapper"); 
4 };//现在点击红色块将会弹出提示框

  解除:element.on+type = false/null/’’;

1 wrap.onclick = null;
2 //现在再点击红色块将不会再弹出提示框了

  2,  监听

  绑定:element.addeventlistener(事件类型,fn,boolean)

    w3c标准方法,同一事件类型可以绑定一个或多个事件处理程序,ie老版本不兼容

1 wrap.addeventlistener("click",test,false);
2 function test() {
3     alert("wrapper");
4 }
5 //也可以在第二个参数的位置直接使用匿名函数

  解除:element.removeeventlistener(事件类型,fn,false)

wrap.removeeventlistener("click",test,false);
//现在点击将不会再弹出提示框了

       另外:ie有个独有的方法,obj.attchevent(‘on’+type,fn),功能和监听方式一样。解除方式是:element.detachevent(‘on’+type,fn)

       注意,如果绑定的是匿名函数,则无法解除。

 

二   事件处理模型

         1,事件捕获和冒泡

    事件的触发其实分为两个阶段,捕获阶段和冒泡阶段。我们既可以把事件处理函数绑定在事件捕获阶段,也可以绑定在冒泡阶段。当某一事件被触发时,先执行捕获再执行冒泡。

         事件捕获:当父元素的某类型事件被触发时,所有后代元素上绑定的同类型事件均会被层层触发。

         事件冒泡:当子元素的某类型事件被触发时,所有父元素上绑定的同类型事件均会被层层触发。

         句柄方式绑定的事件都是在冒泡阶段,监听方式根据提供的第三个参数设置事件捕获或冒泡:true则在捕获阶段,false则在冒泡阶段。

1 var main = document.getelementsbyclassname("main")[0];
2 main.addeventlistener("click",function(){
3     alert("main");
4 },false);
5 /*现在点击绿色区域会先弹出main,点击确认后再弹出wrapper。如果wrap和main绑定程序的第三个参数都是true,则会先弹出wrapper,后弹出main。
6 如果同一个元素在两个阶段都绑定了统一类型事件,则按照绑定的先后顺序执行*/

  2,阻止事件冒泡

    有时候我们并不想让绑定的事件层层向上传递,只想被点击的那个元素执行相关任务,那么我们就需要阻止事件冒泡: 

1 main.addeventlistener("click",function(e){
2   alert("main");
3   e.stoppropagation();
4  e.cancelbubble = true;//ie的方法
5 },false);

       3,阻止事件默认行为

               诸如点击submit类型的按钮,页面会提交表单、鼠标右键页面会出现右键菜单、点击a标签会跳转页面等等都是事件的默认行为,我们可以通过以下几种方式阻止它们。

               return false;句柄方式绑定的事件处理程序才能实现。

               e.preventdefault();w3c标准方式。

               e.returnvalue = false;兼容低版本ie浏览器。

1 document.oncontextmenu = function (e){
2     e.preventdefault();
3     alert("现在右键点击不会出现菜单栏了");
4 };

       4,事件对象

        每当有事件被触发,浏览器都会记录当前事件触发的详细信息,并把它们封装成一个对象,传递给事件处理函数,ie浏览器有一点不同,它是把该对象存储在window.event里面,而不是传递给事件处理函数。

             事件对象有两个属性:target或srcelement,它存储的是事件源对象,即实际触发该事件的对象。不是捕获的,也不是冒泡的。通过事件源对象,可以轻松实现事件委托功能。

             事件委托的功能是:当子元素个数很多或不确定,且每个子元素都需要绑定执行类似功能的事件处理函数时,通过在父元素上绑定该事件处理函数,在函数内部获取事件源对象(某子元素),通过事件冒泡机制,确保能让每个子元素在被触发相应事件时,事件处理函数都能被正确执行。

 1 /*
 2 <ul>
 3     <li>1</li>
 4     <li>2</li>
 5     <li>3</li>
 6     <li>4</li>
 7     <li>5</li>
 8     <li>6</li>
 9     <li>7</li>
10     。。。
11 </ul>
12 假如现在有这样一个列表,数目很多,而且还会动态更新,我们要实现的功能是点击每个li都弹出它自己的内容
13 */
14 var ul = document.getelementsbytagname("ul")[0];
15 ul.onclick = function (e){
16     var ev = e || window.event;
17     target = ev.target || ev.srcelement;
18     alert(target.innertext); 
19 };
20 //这样就可以很简单的实现这个功能了,即使后面假如了新的li,点击新的li依然可是弹出正确的内容

 

下一篇讲详细讲解javascript中具体的dom事件和他们的功能。

上一篇:

下一篇: