浅谈事件监听

自从学了事件监听之后，觉得他真是个好东西~~，为什么呢？

首先说下他的好处：第一点：他可以实现对未来元素事件的绑定【？未来元素：就是在绑定事件时，页面上还不存在的元素】；第二点：减少事件绑定，提高性能【我们知道前端主要是解决性能优化和兼容问题的，所有这个就挺重要了】

下面来捋一捋事件监听一个比较全面的见解？

1、关于事件

事件分为DOM 0级事件和Dom 2级事件，DOM2级事件也叫做事件监听。DOM 0级事件的缺点是如果事件相同 后者的事件会覆盖前者的事件，DOM2级事件可以解决这个问题

document.onclick = function(){
    alert(1);
}
document.onclick = function(){
   alert(2);
}
//只会执行第二个函数    弹出2

2、DOM2级事件的方法

主流浏览器： addEventListener()    【有三个参数】

参数1：事件类型  不需要加on

参数2：回调函数名称 （函数需要单独写在外面）

参数3：布尔值  true代表捕获   false代表冒泡

解绑事件方法：removeEventListener()

首先写两个方法：
function a(){
    alert(1)
}
function b(){
    alert(2)
}
document.addEventListener("click",a);
document.addEventListener("click",b);     //点击后先执行第一个函数，再执行第二个函数
document.removeEventListener("click",a)   //不在执行a()这个函数

IE浏览器下用：attachEvent()    【有两个参数】

参数1：事件类型  需要加on

参数2：回调函数名称（函数需要单独写在外面）

解绑事件方法：detachEvent()

function a(){
    alert(1)
}
function b(){
    alert(2)
}
document.attachEvent("onclick",a);
document.attachEvent("onclick",b);//点击后先执行第二个函数，再执行第一个函数
document.detachEvent("onclick",a)//不在执行a()这个函数

3、事件流、事件冒泡、事件捕获

当一个HTML元素产生一个事件时,该事件会在元素节点与根节点之间的路径传播，路径所经过的节点都会收到该事件，这个传播的过程叫做DOM事件流

元素触发事件时，事件的传播过程称为事件流，过程分为捕获和冒泡两种

冒泡事件：微软提出的   事件由子元素传递到父元素的过程，叫做冒泡

举个栗子：

HTML布局如下：<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        #box{width:200px;height:200px;background:#ff3;}
        #innerBox{width:100px;height:100px;background:blue;}
    </style>
</head>
<body>
    <div id="box">
        <div id="innerBox"></div>
    </div>
</body>
</html>

Js代码如下：

var box=document.getElementById("box");
var innerBox=document.getElementById("innerBox");
document.addEventListener("click",function(){
alert("document-------冒泡");
},false);
document.body.addEventListener("click",function(){
alert("body-------冒泡");
},false);
box.addEventListener("click",function(){
alert("box-------冒泡");
},false);
innerBox.addEventListener("click",function(){
alert("innerBox-------冒泡");
},false);

　　点击innerBox后:

　　　　执行的顺序是innerBox==》box==》body===》document

　　　　代码输出顺序是：innerBox-------冒泡=====》box-------冒泡====》body-------冒泡====》document-------冒泡

　　如果点击box的话

　　　　执行的顺序是box==》body===》document

　　　　代码输出顺序是：box-------冒泡====》body-------冒泡====》document-------冒泡

捕获事件：网景提出的   事件由父元素到子元素传递的过程，叫做事件捕获

Js代码如下：

var box=document.getElementById("box");
var innerBox=document.getElementById("innerBox");
document.addEventListener("click",function(){
alert("document-------捕获");
},true);
document.body.addEventListener("click",function(){
alert("body-------捕获");
},true);
box.addEventListener("click",function(){
alert("box-------捕获");
},true);
innerBox.addEventListener("click",function(){
alert("innerBox-------捕获");
},true);

　　点击innerBox后

　　　　执行的顺序是document==》body==》box===》innerBox

　　　　代码输出顺序是：document-------捕获=====》body-------捕获====》box-------捕获====》innerBox-------捕获

　　如果点击box的话

　　　　执行的顺序是：document==》body==》box

　　　　代码输出顺序是：document-------捕获=====》body-------捕获====》box-------捕获

以下两个情况值得注意一下：

　　1、当事件冒泡和捕获同时执行的时候，是什么顺序？

　　Js代码如下：

document.addEventListener("click",function(){
    alert("document-------捕获");
},true);
document.body.addEventListener("click",function(){
    alert("body-------捕获");
},true);
box.addEventListener("click",function(){
    alert("box-------捕获");
},true);
innerBox.addEventListener("click",function(){
    alert("innerBox-------捕获");
},true);
document.addEventListener("click",function(){
    alert("document-------冒泡");
},false);
document.body.addEventListener("click",function(){
    alert("body-------冒泡");
},false);
box.addEventListener("click",function(){
    alert("box-------冒泡");
},false);
innerBox.addEventListener("click",function(){
    alert("innerBox-------冒泡");
},false);

　　如果点击innerBox的话：

　　　　代码输出顺序是：document-------捕获=====》body-------捕获====》box-------捕获====》innerBox-------捕获innerBox-------冒泡=====》box-------冒泡====》body-------冒泡====》document-------冒泡

也就是说当事件冒泡和捕获同时执行的时候执行顺序是：先执行捕获后执行冒泡

　　2、当事件冒泡和捕获同时执行的时候  冒泡事件和捕获事件到最底层的时候顺序发生改变的话：

Js代码如下：

document.addEventListener("click",function(){
    alert("document-------捕获");
},true);
document.body.addEventListener("click",function(){
    alert("body-------捕获");
},true);
box.addEventListener("click",function(){
    alert("box-------捕获");
},true);
innerBox.addEventListener("click",function(){
    alert("innerBox-------冒泡");
},false);
innerBox.addEventListener("click",function(){
    alert("innerBox-------捕获");
},true);
document.addEventListener("click",function(){
    alert("document-------冒泡");
},false);
document.body.addEventListener("click",function(){
    alert("body-------冒泡");
},false);
box.addEventListener("click",function(){
    alert("box-------冒泡");
},false);

　　点击innerBox后

　　　　代码输出顺序是：document-------捕获=====》body-------捕获====》box-------捕获====》innerBox-------冒泡innerBox-------捕获=====》box-------冒泡====》body-------冒泡====》document-------冒泡

也就是说冒泡事件和捕获事件到最底层的时候如果顺序发生改变的话：到最底层的时候是顺序执行

4、IE与火狐的事件机制区别?

事件处理机制：IE是事件冒泡、火狐是 事件捕获;

5、事件代理/事件委托

　　利用冒泡机制，将子元素的事件委托给父元素去监听(给父元素添加事件)，当子元素触发事件时，事件冒泡到父级如果希望指定的子元素才能触发事件，可以通过事件对象(event)获得事件源(target)，然后通过条件判断是不是期望的子元素，如果是的话，执行事件，否则不执行。

下面举个小栗子简单介绍一下：

HTML结构：<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        a{text-decoration: none;padding:0 5px;}
        table td{height:24px;line-height:24px;}
    </style>
</head>
<body>
    <button id="btn">添加</button>
    <table border="1" id="tab">
        <tr>
            <td>333</td>
            <td><a href="##">查看</a><a href="##" class="delbtn">删除</a></td>
        </tr>
    </table>
</body>
</html>
JS代码：
<script>
var btn=document.getElementById("btn");
var tab=document.getElementById("tab");
var str="";
//现在想要做的效果是  每次点击添加按钮都会在table里面添加一行
//如果点击删除   则会删除table里的一整行
btn.onclick=function(){            //给添加按钮 添加点击事件
    str=‘<tr><td>333</td><td><a href="##">查看</a><a href="##" class="delbtn">删除</a></td></tr>‘;
    tab.innerHTML+=str;        //将内容添加到table里面
}
tab.onclick=function(e){    //给父级添加事件
    var e=e||event;        //事件对象兼容性问题
    var target=e.target||e.srcElement;    //事件源target  兼容性问题
    if(target.tagName=="A" && target.className=="delbtn"){    //条件判断找到子元素【删除按钮】
        target.parentNode.parentNode.remove();
    }
}
</script>

效果图如下：

6、如何找到事件源

var target = e.target || e.srcElement

其中： tagName能找到事件源的元素名　　　　className 能找到事件源的类名

原文地址：https://www.cnblogs.com/Tian-yy/p/9060669.html

时间： 2024-10-02 13:11:27

浅谈事件监听的相关文章

JAVA GUI 事件监听事件 详解 和 案例.

GUI(图形用户界面) Graphical User Interface(图形用户接口) 用图形的 方式, 来显示 计算机操作的 界面, 这样更方便 更直观. CLI Command Line User Interface(命令行用户接口) 就是常见的 Dos 命令行操作. 需要记忆一些常用的命令, 操作不直观. Java 为 GUI 提供的 对象 都存在 java.awt 和 javax.swing 两个包中. Java 图形化界面的 产品: eclipse 这个产品使用 纯Java 语言 编

屏幕触摸事件监听，判断上下左右的操作行为，判断方法缩小的操作行为

在手机屏幕上能够实现的人机交互行为,大致包括点击按钮,拉动滑动块,物体缩放,上下左右拉动等. 手机屏幕触摸事件的监听方法: 1.首先要设置一块布局区域,frameLayout/LinearLayout等都可以,并为布局设置id: 2.在Activity中声明相应的布局类型,并通过findViewById()方法找到该布局,然后为该布局区域设置setOnTouchListener()方法,就能监听在相应屏幕触摸操作 实现屏幕触摸事件监听的代码: private LinearLayout Land;

JavaScript-4.5 事件大全,事件监听---ShinePans

绑定事件 <input type="bubtton" onclick="javascript:alert('I am clicked');"> 处理事件 <script language="JavaScript" for="对象" event="事件"> ... (事件处理代码) ... </script> 鼠标事件举例 <script language="

[基础控件]---状态切换控件CompoundButton及其子类CheckBox、RadioButton、ToggleButton、switch事件监听与场景使用

一.事件监听 对于普通的Button,对其进行事件监听Google官方给出了常见的三种监听方式:1.对每一个button设置事件监听器button.setOnClickListener(View.OnclickListener  listener);此种方法当button按钮较多时代码显得多.乱.不够简洁明了. 2.在Activity中实现接口View.OnclickListener,然后重写void onClick(View v)方法,在方法中通过switch(v.getId())予以区分不同

Windows 8 应用程序前后台切换事件监听

在一些情况下,我们需要监听应用程序切换到后台或者从后台切换至前台的事件,从而进行相关处理操作.支付宝应用锁屏(IOS,Android平台)的处理中就需要监听此事件,在用户将应用切换至后台一段时间后再切换至前台的情况下就需要弹出锁屏页面. 下图给出Windows 应用商店应用的生命周期图,应用前后台切换就是在运行和挂起直接进行切换,关于生命周期的详细介绍可以参阅官方文档:http://msdn.microsoft.com/zh-cn/library/windows/apps/hh464925.as

Java中的事件监听机制

鼠标事件监听机制的三个方面: 1.事件源对象: 事件源对象就是能够产生动作的对象.在Java语言中所有的容器组件和元素组件都是事件监听中的事件源对象.Java中根据事件的动作来区分不同的事件源对象,动作发生在哪个组件上,那么该组件就是事件源对象 2.事件监听方法: addMouseListener(MouseListener ml) ;该方法主要用来捕获鼠标的释放,按下,点击,进入和离开的动作:捕获到相应的动作后,交由事件处理类(实现MouseListener接口)进行处理. addAction

关于v4包的Fragment过渡动画的事件监听无响应问题解决

项目中部分功能模块采用了单Activity+多Fragment模式,当Fragment切换时,需要在过渡动画执行完后做一些操作,通常就是在自己封装的FragmentBase中重写onCreateAnimation方法,创建一个Animation对象,并添加动画的事件监听.而最近升级了v4包后,突然发现添加的动画事件监听无响应了.通过查看源码,发现在v4包中关于Fragment管理类FragmentManagerImpl中,在获取Animation对象后,也添加了对动画的监听事件,也就覆盖了我自己

UI事件监听的击穿

什么是UI事件监听的击穿 在游戏视图中,有两个UI界面叠在一起的时候,单击一个空白处,却触发了被覆盖在下层了UI界面中的单击事件,这就是单击击穿了上层界面. 假设场景中放置了一个箱子,单击箱子会触发一个开箱事件,如果单击一个UI,恰好UI在视觉上将箱子覆盖了,那么它也许就会触发箱子的单击事件. 如何避免和解决UI事件监听的击穿 第一种方法:用一层BoxCollider覆盖,进行遮挡. 在界面底板上Attach一个BoxCollider. 第二种方法:使用EventMask Unity的Camer

java事件监听

获取事件监听需要获取实现ActionListener接口的方法, public class SimpleEvent extends JFrame{    private JButton jb=new JButton("我是按钮,点击我");    public SimpleEvent(){        setLayout(null);        setVisible(true);        setSize(200, 100);        setDefaultCloseOp