精华内容
下载资源
问答
  • js中获取触发事件对象的标签名称

    千次阅读 2015-07-25 21:25:08
     * 获取当前触发事件对象的标签名称  * @param event  */ function getTargetName(event){ //判断浏览器,IE需调srcElement来获取触发事件对象 var target = $.browser.msie ? event.srcElement : event...


    /**

     * 获取当前触发事件对象的标签名称
     * @param event
     */
    function getTargetName(event){

    //判断浏览器,IE需调srcElement来获取触发事件的对象

    var target = $.browser.msie ? event.srcElement : event.target;

    if(target){

    //获取名称并转成大写

    return target.tagName.toUpperCase();
    }

    return null;
    }
    展开全文
  • JavaScript中的Event事件对象详解

    万次阅读 多人点赞 2016-10-07 17:36:10
    在JavaScript中对于事件来讲,首先,我们需要了解这样几个概念:事件事件类型、事件绑定、事件监听、事件处理程序(事件侦听器)、事件对象(事件源)、事件流、事件冒泡、事件捕获、事件性能优化(事件委托[事件代理]...

    JavaScript事件【event】


    在JavaScript中对于事件来讲,首先,我们需要了解这样几个概念:事件、事件类型、事件绑定、事件监听、事件处理程序(事件侦听器)、事件对象(事件源)、事件流、事件冒泡、事件捕获、事件性能优化(事件委托[事件代理]、移除事件处理程序)、浏览器内核(常见的浏览器兼容问题)等。

     

    什么是事件(event):

    注:其实事件一直都是存在的(不管有没有绑定 或 监听),它只是没有事件处理程序而已!!!

        JavaScript事件是:浏览器、文档(document)窗口中的发生的特定的交互瞬间;而JavaScript和HTML之间的交互行为就是通过事件来触发的。

    事件处理程序:
        事件处理程序:我们用户在页面中进行的点击这个动作,鼠标移动的动作,网页页面加载完成的动作等,都可以称之为事件名称,
    即:click、mousemove、load等都是事件的名称。响应某个事件的函数则称为事件处理程序,或者叫做事件侦听器。


     

    事件类型: 


    在JavaScript中事件大至分为了三大类,分别是一般事件、表单事件、页面事件这3种。
     

    1. UI事件:如load、unload、error、resize、scroll、select、DOMActive,是用户与页面上的元素交互时触发的。
    2. 焦点事件:如blur、DOMFocusIn、DOMFocusOut、focus、focusin、focusout,在元素获得或失去焦点的时候触发,这些事件当中,最为重要的是blur和focus,有一点需要引起注意,这一类事件不会发生冒泡!
    3. 鼠标与滚轮事件:如click、dblclick、mousedown、mouseenter、mouseleave、mousemove、mouseout、mouseover、mouseup,是当用户通过鼠标在页面执行操作时所触发的。
    4. 滚轮事件:mousewheel(IE6+均支持)、DOMMouseScroll(FF支持的,与mousewheel效果一样)。是使用鼠标滚轮时触发的。
    5. 文本事件:textInput,在文档中输入文本触发。
    6. 键盘事件:keydown、keyup、keypress,当用户通过键盘在页面中执行操作时触发。
    7. 合成事件:DOM3级新增,用于处理IME的输入序列。所谓IME,指的是输入法编辑器,可以让用户输入在物理键盘上找不到的字符。compositionstart、compositionupdate、compositionend三种事件。
    8. 变动事件:DOMsubtreeModified、DOMNodeInserted、DOMNodeRemoved、DOMAttrModified、DOMCharacterDataModified等,当底层DOM结构发生变化时触发。IE8-不支持。
    9. 变动名称事件:指的是当元素或者属性名变动时触发,当前已经弃用!
          对于事件的基本类型,随着HTML5的出现和发展,又新增了HTML5事件、设备事件(单点触控)、触摸事件touch、手势事件等各种事件等

    其他事件如下:

     

    资源事件

    事件名称何时触发
    error资源加载失败时。
    abort正在加载资源已经被中止时。
    load资源及其相关资源已完成加载。
    beforeunloadwindow,document 及其资源即将被卸载。
    unload文档或一个依赖资源正在被卸载。

                                                                       

    网络事件

    事件名称何时触发
    online浏览器已获得网络访问。
    offline浏览器已失去网络访问。

     

    WebSocket 事件

    事件名称何时触发
    openWebSocket 连接已建立。
    message通过 WebSocket 接收到一条消息。
    errorWebSocket 连接异常被关闭(比如有些数据无法发送)。
    closeWebSocket 连接已关闭。

     

    CSS 动画事件

    事件名称何时触发
    animationstart某个 CSS 动画开始时触发。
    animationend某个 CSS 动画完成时触发。
    animationiteration某个 CSS 动画完成后重新开始时触发。

     

    CSS 过渡事件

    事件名称何时触发
    transitionstart

    监听过渡事件开始时触发。

    transitionrun

    监听过渡事件进行时触发。

    transitionend

    监听过渡事件结束时触发。

     

    打印事件

    事件名称何时触发
    beforeprint打印机已经就绪时触发。
    afterprint打印机关闭时触发。

     

    剪贴板事件

    事件名称何时触发
    cut已经剪贴选中的文本内容并且复制到了剪贴板。
    copy已经把选中的文本内容复制到了剪贴板。
    paste从剪贴板复制的文本内容被粘贴。

     

     

    点击这里 - 查看更多JS事件

     

    事件流:


    浏览器层次顺序:document -> html -> body -> div父元素 -> input子元素】,document最上层祖先元素, input最下层后代元素。

        什么是事件流:事件流是描述从页面中接收事件的顺序【从内到外(冒泡),从外到内(捕获)】;
    IE与原来的NetScape(网景),对于事件流提出的是完全不同的顺序。IE团队提出的是事件冒泡流;NetScape的事件流是事件捕获流。
        简单的讲:当给一个DIV绑定一个点击事件,又在DIV里面放一个按扭并给按扭也绑定一个点击事件,此时你点击里面按扭的同时,外面DIV的点击事件也会被触发。

    【事件冒泡】、JS阻止事件冒泡方法:event.stopPropagation(),JS阻止默认行为方法:event.preventDefault() 注:这两个方法属于event的。
        所谓事件冒泡 就是事件最开始从最具体的元素(文档中嵌套层次最深的那个点【当前绑定事件的那个元素】)接收,然后逐级向上传播至最不具体的那个节点(document节点,即最上层的节点)。

    【事件捕获】、和事件冒泡刚好【相反】,它是事件从最不具体的节点(document)先接收到事件,然后再向下逐一捕获至(文档中嵌套层次最深的那个点【当前绑定事件的那个元素】)。
        简单地说,事件冒泡和事件捕获都是一种事件传递的机制。这种机制可以使事件在不同级
    的元素间传递。事件冒泡是从事件触发的源节点,向父节点传递,直到到达最顶节点。而事件
    捕获则是从最顶节点,逐步向下传递,直到到达事件触发的源节点。

        在一些标准的浏览器中,如IE9以上,Chrome 、Firefox 、Safari浏览器等,支持这两种冒泡方式。而事实上,
    准确的说,是这两种方式的混合方式。因为W3C采取的就是这两种方式的结合:先从顶级节点
    开始,将事件向下传递至源节点,再从源节点冒泡至顶节点。

        而在IE及Opera(以下说的都是老版本的欧朋,新版本的欧朋经检测是支持事件捕获的)
    下,是不支持事件捕获的。而这个特点最明显体现在事件绑定函数上。IE、Opera的事件
    绑定函数是attachEvent,而Chrome等浏览器则是addEventListener,

        而后者比前者的参数多了一个——这个参数是一个布尔值,这个布尔值由用户决定,用户若设为true,
    则该绑定事件以事件捕获的形式参与,若为false则以事件冒泡的形势参与。
    而这个参数在IE和Opera浏览器中是不存在的——根本原因是它们不支持事件捕获。

     

     事件对象:


       在触发DOM上的某个事件的时候,会产生一个事件对象event,而在这个对象当中会包含着所有与事件有关的信息。
    事件对象其中有两个信息,我们最为常用,分别是type和target:
    type表示的是被触发事件的类型;
    target表示的是事件的目标。

    其他:
    bubbles:表示事件是否冒泡
    cancelable:表示是否可以取消事件的默认行为
    currentTarget:表示事件处理程序当前正在处理事件的那个元素
    defaultPrevented:表示是否调用了preventDefault()
    detail:表示的是与事件相关的细节信息
    eventPhase:调用事件处理处理程序的阶段:1表示捕获阶段、2表示处于目标、3表示冒泡阶段


    浏览器内核:
    1、Trident:(IE内核) Trident内核的常见浏览器有:
    IE6、IE7、IE8(Trident 4.0)、IE9(Trident 5.0)、IE10(Trident 6.0);
    360安全浏览器(1.0-5.0为Trident,6.0为Trident+Webkit,7.0为Trident+Blink)猎豹极轻浏览器,360极速浏览器(7.5之前为Trident+Webkit,7.5为Trident+Blink)
    猎豹安全浏览器(1.0-4.2版本为Trident+Webkit,4.3及以后版本为Trident+Blink)猎豹极轻浏览器,
    傲游浏览器(傲游1.x、2.x为IE内核,3.x为IE与Webkit双核)、百度浏览器(早期版本)世界之窗浏览器
    最初为IE内核,2013年采用Chrome+IE内核)、2345浏览器、腾讯TT、淘宝浏览器、采编读浏览器、搜狗高速浏览器(1.x为Trident,2.0及以后版本为Trident+Webkit)、阿云浏览器(早期版本)、
    瑞星安全浏览器、Slim Browser、 GreenBrowser、爱帆浏览器(12 之前版本)、115浏览器、155浏览器、闪游浏览器、N氧化碳浏览器、糖果浏览器、彩虹浏览器、瑞影浏览器、
    勇者无疆浏览器、114浏览器、蚂蚁浏览器、飞腾浏览器、速达浏览器、佐罗浏览器、海豚浏览器(iPhone/iPad/Android)、UC浏览器(Blink内核+Trident内核)等。

    2、Gecko:(Firefox内核) Netscape6开始采用的内核,后来的Mozilla FireFox(火狐浏览器) 也采用了该内核,Gecko的特点是代码完全公开。

    3、Presto:(Opera前内核) (已废弃) Opera现已改用Google Chrome的Blink内核。

    4、Webkit:(Safari内核,Chrome内核原型,开源):它是苹果公司自己的内核,也是苹果的Safari浏览器使用的内核 【是现在大部份移动端:Android安桌,apple苹果采用的内核】。

     

     

    JvaScript事件的三种绑定方式【事件处理程序】:


    事件绑定方式一【HTML事件处理程序】:就是将事件直接内嵌内HTML结构标签元素内的 【不推荐用,因为不灵活】 

    例:

    <input type="button" onclick="alert("我是事件绑定方式一:HTML事件处理程序,我是内嵌在HTML结构中的");" value="事件绑定方式一【内嵌】" />


    <input type="button" onclick="mupiaoFn()" value="事件绑定方式一【调用】" />



    /*------事件绑定方式一:HTML事件处理程序------*/

    function mupiaoFn() {
        alert("我是事件绑定方式一:HTML事件处理程序");
    };



    事件绑定方式二【DOM 0级事件处理程序】:就是把一个函数/方法赋给一个事件处理程的 属性如:id 、class 、元素名等 【用得最多,兼容性好,简单,灵活,跨浏览器 ;缺点:不能绑定多个同类型事件】

    例:

    <input type="button" name="eventBtn2" id="eventBtn2" value="事件绑定方式二【通用属性绑定】" />



    /*------事件绑定方式二:DOM 0级事件处理程序------*/

    var Btn2 = document.getElementById("eventBtn2");//给谁绑定事件,就要先获取谁



    绑定事件1:【赋给方式】

    Btn2.onclick = function() {
        alert("我是事件绑定方式二:DOM 0级事件处理程序");
    };


    绑定事件2:【调用方式】

    function publick() {
    
        alert("我也是事件绑定方式二:DOM 0级事件处理程序");
    };
    
    Btn2.onclick = publick; //注:publick后面不要加()括号,否则会变为立即执行函数!


    删除事件:

    Btn2.onclick = null; 

    注:
        在DOM0级事件处理程序推出之后,被广为使用,可是出现了这样一个问题,当我们希望给同一个元素/标签绑定多个同类型事件的时候(如,为上面的按扭标签绑定2个或是个以上的点击事件),是不被允许的。
        
        那么,此时,出现了另一种事件处理程序,就是DOM2级的事件处理程序,【注:没有DOM1级事件这个概念哦】在DOM2级当中,定义了两个基本方法,
        
        用于处理指定(即绑定)和删除事件处理程序的操作,分别是addEventListener()和removeEventListener(),IE9+、FireFox、Safari、Chrome和Opera都是支持DOM2级事件处理程序的。
        
        对于IE8-,则使用的是IE专有的事件处理程序:两个类似的方法——attachEvent()与detachEvent()。


    事件绑定方式三【DOM 2级事件处理程序 / 监听事件】:addEventListener()和removeEventListener()监听事件接收3个参数:事件类型(注:不要加 on), 处理函数 , false:冒泡/true:捕获
        IE中:attachEvent()和detachEvent()监听事件接收2个参数:事件类型(注:要加 on), 处理函数//只支持冒泡

    例:

    <input type="button" name="eventBtn3" id="eventBtn3" value="事件绑定方式三" />



    /*------事件绑定方式三【DOM 2级事件处理程序 / 监听事件】------*/

    var Btn3 = document.getElementById("eventBtn3");//给谁绑定事件,就要先获取谁


    添加监听事件1:【内嵌方式】

    Btn3.addEventListener('click' , function(){
    
        alert("我是事件绑定方式二:DOM 2级事件处理程序");
    
    } , false); //false:冒泡,true:捕获



    添加监听事件2:【调用方式】

    Btn3.addEventListener('click' , addevFn , false);
    
    function addevFn() {
        alert("我是事件绑定方式二:DOM 2级事件处理程序 【调用方式】");
    };



    添加不同的监听事件:鼠标移入事件【调用方式】

    Btn3.addEventListener('mouseover' , addevFn2 , false);
    
    function addevFn2() {
        alert(this.value);
    };



    删除监听事件【注:删除时事件类型名、事件函数名要一一对应哦(就是和添加事件时的参数一样)】

    Btn3.removeEventListener("mouseover" , addevFn2, false)



    IE8及以下的添加和删除监听事件方法:(注:IE9及以上的就用上面的方法啦)

    IE8及以下的添加监听事件1:【内嵌方式】 (注 attachEvent 和 detachEvent方法只传两个参数,前面两个和上面一样,而第3个参数是因为在IE中默认就是冒泡方式,所以不用传第3个参数啦)

    Btn3.attachEvent("onclick" , function(){
    
        alert("我是IE8及以下的添加监听事件方法,【内嵌方式】");
    });



    IE8及以下的添加监听事件2:【调用方式】(注:attachEvent 和 detachEvent 事件类型前而一定要加  on 才可以哦)

    Btn3.attachEvent("onclick" , addevFn3);
    
    function addevFn3() {
    
        alert("我是IE8及以下的添加监听事件方法,【调用方式】");
    };



    IE8及以下的删除监听事件

    Btn3.detachEvent("onclick" , addevFn3);



    事件方面性能优化:事件委托和事件处理程序的移除

        在JavaScript代码当中,添加到页面中的事件越多,页面的性能也就越差。导致这一问题的原因主要有:
    每个函数都是对象,都会占用内存。内存中对象越多,性能也就越差。
    必须事先指定所有事件处理程序而导致的DOM访问次数,会延迟整个页面的交互就绪时间。
    为了进行页面的性能优化,因此我们会采用两种方法,就是上面提到的——事件委托和事件处理程序的移除。

     

    事件委托: 


    什么时候使用事件委托,其实,简单来说,当时一个页面事件处理程序比较多的时候,我们通常情况下会使用它。

        事件委托主要利用了事件冒泡,只指定一个事件处理程序,就可以管理一个类型的所有事件。例如:我们为整个一个页面制定一个onclick事件处理程序,
    此时我们不必为页面中每个可点击的元素单独设置事件处理程序

        事件委托:给元素的父级或者祖级,甚至页面绑定事件,然后利用事件冒泡的基本原理,通过事件目标对象进行检测,然后执行相关操作。其优势在于:

        大大减少了事件处理程序的数量,在页面中设置事件处理程序的时间就更少了(DOM引用减少——也就是上面我们通过id去获取标签,所需要的查找操作以及DOM引用也就更少了)。
        document(注:上面的例子没有绑定在document上,而是绑定到了父级的div上,最为推荐的是绑定在document上)对象可以很快的访问到,而且可以在页面生命周期的任何时点上为它添加事件处理程序,
    并不需要等待DOMContentLoaded或者load事件。换句话说,只要可单击的元素在页面中呈现出来了,那么它就立刻具备了相应的功能。
    整个页面占用的内存空间会更少,从而提升了整体的性能。

     

    移除事件处理程序 

     
        每当将一个事件处理程序指定给一个元素时,在运行中的浏览器代码与支持页面交互的JavaScript代码之间就会建立一个连接。连接数量也直接影响着页面的执行速度。
    所以,当内存中存在着过时的“空事件处理程序”的时候,就会造成Web应用程序的内存和性能问题。

    那么什么时候会造成“空事件处理程序”的出现呢?

        文档中元素存在事件,通过一些DOM节点操作(removeChild、replaceChild等方法),移除了这个元素,但是DOM节点的事件没有被移除。
    innerHTML去替换页面中的某一部分,页面中原来的部分存在事件,没有移除。
    页面卸载引起的事件处理程序在内存中的滞留。

     

     

    解决方法:
     

    1. 合理利用事件委托;

    2. 在执行相关操作的时候,先移除掉事件,再移除DOM节点;

    3. 在页面卸载之前,先通过onunload事件移除掉所有事件处理程序。

    展开全文
  • js中事件对象event

    万次阅读 多人点赞 2018-03-06 16:40:10
    当一个事件发生的时候,和当前这个对象发生的这个事件有关的一些详细信息(包括导致事件的元素、事件的类型、以及其它与特定事件相关的信息等。这个对象是在执行事件时,浏览器通过函数传递过来的。)都会被临时保存...

    一、Event对象

    Event 对象代表事件的状态,比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。

    事件通常与函数结合使用,函数不会在事件发生前被执行!

    当一个事件发生的时候,和当前这个对象发生的这个事件有关的一些详细信息(包括导致事件的元素、事件的类型、以及其它与特定事件相关的信息等。这个对象是在执行事件时,浏览器通过函数传递过来的。)都会被临时保存到一个指定的地方——event对象,供我们在需要的时候调用

    二、获取event对象

    在 W3C 规范中,event 对象是随事件处理函数传入的,Chrome、FireFox、Opera、Safari、IE9.0及其以上版本都支持这种方式;但是对于 IE8.0 及其以下版本,event 对象必须作为 window 对象的一个属性。

     

    IE、Chrome:event是一个内置的全局对象

    标准下/FF:事件对象是通过事件函数的第一个参数传入(如果一个函数是被事件调用的,那么这个函数定义的第一个参数就是事件对象)

    如何处理兼容性:

    document.onclick = function  fn(){
       var ev = ev||event;
       alert('处理兼容');
    }

    例子:

    <script>
    
        window.onload = function(){
            var oDiv = document.getElementById('div1');
            document.onmousemove = function(ev){
                var ev = ev||event;//处理兼容性
                oDiv.style.left = ev.clientX + 'px';
                oDiv.style.top = ev.clientY + 'px';
            }
        }
    
    </script>

    三、事件流

    事件流是描述的从页面接受事件的顺序,当几个都具有事件的元素层叠在一起的时候而层叠在你点击范围 , 并不是只有当前被点击的元素会触发事件 , 那么你点击其中一个元素的所有元素都会触发事件。而如果我们想要只触发其中一个事件时,此时就需要取消冒泡或捕获。现代浏览器默认都是冒泡类型,所以通常只需要取消冒泡即可。 

    事件流包括两种模式:冒泡和捕获

       1、冒泡:从里向外逐个触发。当你使用事件冒泡时,子级元素先触发,父级元素后触发

     事件冒泡机制:当一个元素接收到事件的时候,会把他接收的所有传播给他的父级,一直到顶层window

       2、捕获:从外向里逐个触发(与事件冒泡机制相反)当你使用事件捕获时,父级元素先触发,子级元素后触发

    W3C模型

    W3C模型是将两者进行中和,在W3C模型中,任何事件发生时,先从顶层开始进行事件捕获,直到事件触发到达了事件源元素。然后,再从事件源往上进行事件冒泡,直到到达document。

    阻止事件冒泡的方法

    function stopBubble(e) {  
      if(e && e.stopPropagation){  
          e.stopPropagation();  //非IE下
      } else {  
        window.event.cancelBubble = true;  //IE下
      }  
    };  

    四、js事件绑定

    要想让 JavaScript 对用户的操作作出响应,首先要对 DOM 元素绑定事件处理函数。所谓事件处理函数,就是处理用户操作的函数,不同的操作对应不同的名称。
    在JavaScript中,有三种常用的绑定事件的方法:

    1. 在DOM元素中直接绑定;
    2. 在JavaScript代码中绑定;
    3. 绑定事件监听函数。

    1、在DOM中直接绑定

    <button onclick="open()">按钮</button>
    
    <script>
    function open(){
        alert(1);
    }
    </script>

    2、在js代码中绑定

    <button id="btn">按钮</button>
    
    document.getElementById('btn').onclick = function(){
          this.style.background = 'yellow';
      }
    

    3、绑定事件监听函数

    绑定事件的另一种方法是用 addEventListener() 或 attachEvent() 来绑定事件监听函数。

    addEventListener()函数语法:
    elementObject.addEventListener(eventName,handle,useCapture);

    参数说明
    elementObjectDOM对象(即DOM元素)。
    eventName事件名称。注意,这里的事件名称没有“ on ”,如鼠标单击事件 click ,鼠标双击事件 doubleclick ,鼠标移入事件 mouseover,鼠标移出事件 mouseout 等。
    handle事件句柄函数,即用来处理事件的函数。
    useCaptureBoolean类型,是否使用捕获,一般用false 。这里涉及到JavaScript事件流的概念,前面已经进行了讲解


    attachEvent()函数语法:
    elementObject.attachEvent(eventName,handle);

    参数说明
    elementObjectDOM对象(即DOM元素)。
    eventName事件名称。注意,与addEventListener()不同,这里的事件名称有“ on ”,如鼠标单击事件 onclick ,鼠标双击事件 ondoubleclick ,鼠标移入事件 onmouseover,鼠标移出事件 onmouseout 等。
    handle事件句柄函数,即用来处理事件的函数。


    注意:事件句柄函数是指“ 函数名 ”,不能带小括号。
    addEventListener()是标准的绑定事件监听函数的方法,是W3C所支持的,Chrome、FireFox、Opera、Safari、IE9.0及其以上版本都支持该函数;但是,IE8.0及其以下版本不支持该方法,它使用attachEvent()来绑定事件监听函数。所以,这种绑定事件的方法必须要处理浏览器兼容问题。     

    下面绑定事件的代码,进行了兼容性处理,能够被所有浏览器支持:

    <button id="btn">按钮</button>
    
    <script type="text/javascript">
            var oBtn = document.getElementById('btn');
            function addEvent(obj,type,handle){
                try{ // Chrome、FireFox、Opera、Safari、IE9.0及其以上版本
                    obj.addEventListener(type,handle,false);
                }catch(e){
                    try{ // IE8.0及其以下版本
                        obj.attachEvent('on' + type,handle);
                    }catch(e){ // 早期浏览器
                        obj['on' + type] = handle;
                    }
                }
            }
            addEvent(oBtn,'click',function(){//切记cliclk要加引号,没加会报错
                this.style.width = 200+'px';
            });
    </script>
    <span style="color:#ffcc33">这里使用 try{ ... } catch(e){ ... } 代替 if ... else... 语句,避免浏览器出现错误提示。</span>

    注意:obj.addEventListener('click',fn,true);(从外到里)//告诉Obj,如果有一个进去的事件触发了你,你就去执行fn这个函数              obj.addEventListeren('click',fn,false);(从里到外)//告诉Obj,如果有一个出去的事件触发了你,你就去执行fn这个函数

    总结一下就是:如果最后一个布尔值参数是true,就表示,在捕获阶段调用事件处理程序,如果是false,就表示在冒泡阶段调用事件处理程序

    4、三种绑定事件的区别

    第一种方式:函数写在结构层里面。非常不好,使页面很混乱,行为与结构得不到分离。并且在DOM结构如果绑定两个 "onclick" 事件,只会执行第一个;

    第二种方式:行为与结构开始分离。第二种绑定方式中只能给一个时间绑定一个处理函数,在脚本通过匿名函数的方式绑定的只会执行最后一个事件。

    第三种方式:可以绑定多次同一个事件,且都会执行

    1. <div id="btn" onclick="clickone()" onclick="clicktwo()"></div> 
    
        <script>
    
         function clickone(){ alert("hello"); } //执行这个
    
         function clicktwo(){ alert("world!"); }
    
        </script>
    
      2. <div id="btn"></div>
    
        <script>
    
         document.getElementById("btn").onclick = function(){ alert("hello"); }
    
         document.getElementById("btn").onclick = function(){ alert("world"); } //执行这个
    
        </script>
    
      3. <div id="btn"></div>
    
        <script>
    
         document.getElementById("btn").addeventlistener("click",clickone,false);
    
         function clickone(){ alert("hello"); } //先执行
    
         document.getElementById("btn").addeventlistener("click",clicktwo,false);
    
         function clicktwo(){ alert("world"); } //后执行
    
        </script>

    5、如何取消事件绑定

    第一种方式:document.onclick = null;(针对第一和第二两种绑定方式)

    第二种方式:obj.detachEvent(事件名称,事件函数);(针对非标准IE下的绑定方式)

    第三种方式:obj.removeEventListener(事件名称,事件函数,是否捕获);(针对标准浏览器下的绑定方式)

    五、js事件委托

    事件委托:利用事件冒泡的特性,将里层的事件委托给外层事件,根据event对象的属性进行事件委托,改善性能。

    使用事件委托能够避免对特定的每个节点添加事件监听器;事件监听器是被添加到它们的父元素上。事件监听器会分析从子元素冒泡上来的事件,找到是哪个子元素的事件。(事件委托看起来挺难理解,但是举个生活的例子。比如,有三个同事预计会在周一收到快递。为签收快递,有两种办法:一是三个人在公司门口等快递;二是委托给前台MM代为签收。)

     

     

    <ul id="ul-item">
        <li class="item">item1</li>
        <li class="item">item2</li>
        <li class="item">item3</li>
        <li class="item">item4</li>
    </ul>
    
    <script type="text/javascript">
        function fn(){
            var oUlItem = document.getElementById('ul-item');
            oUlItem.addEventListener('click',show,false);//添加监听事件
            function show(ev){
                var  ev = ev || window.event;
                var src = ev.target||ev.srcElement;//兼容IE下和FF下以及其他浏览器
                if(src && src.className.toLowerCase() === 'item'){//tolowerCase,将字符串全部转化为小写字母
                    alert(src.innerHTML);
                }
            }
        };
        fn();
    </script>

    以下为补充知识(js的event.srcElement与event.target(触发事件源))

    IE下,event对象有srcElement属性,但是没有target属性;

    Firefox下,event对象有target属性,但是没有srcElement属性.但他们的作用是相当的,即:

    firefox 下的 event.target = IE 下的 event.srcElement

    解决方法:使用obj = event.srcElement ? event.srcElement : event.target;

    或:var evtTarget = event.target || event.srcElement;

    js将html的所有控件都看成是一个个对象,通过js的各个属性,就能对其进行操作处理,js里对象的整体结构是树形的结构。一层一层的追溯,即可获取需要的结果。

    event.srcElement:表示的当前的这个事件源。

    event.srcElement.parentNode:表示当前事件源的父节点。

     parentNode:父节点,也就是上一层的节点。可以是任何一个标签。

    event.srcElement.firstChild:当前事件的第一个节点,如果节点是input,通过event.srcElement.firstChild.value就可以获取此input的值。

    event.srcElement.parentElement:是指在鼠标所在对象的上一个对象。

    event.srcElement.children:当前节点下对象的个数,有多个的话就是个数组,如当前节点下有2个input的对象,要获取这两个可以用event.srcElement.children[0] 与 event.srcElement.children[1]分别获取。

     

     

     

    展开全文
  • 前言: 大家都知道,在使用JavaScript可以很方便的使用addEventListener函数给DOM对象快速绑定一个或多个事件侦听器。 我们又如何在JavaScript的自定义...首先,”b对象“有一个固定名称作为入口让a对象调用,并且

    前言:

    大家都知道,在使用JavaScript可以很方便的使用addEventListener函数给DOM对象快速绑定一个或多个事件侦听器。

    我们又如何在JavaScript的自定义对象中使用此方法并触发事件呢?这就是本章节的核心内容了。


    目的:

    现在有一个需求,要求“a对象”能够让“b对象“做一系列动作。

    分析后我们得知。首先,”b对象“有一个固定名称作为入口让a对象调用,并且这个入口可以自动检索所有符合这个动作要求的函数并依次触发。


    实现:

    好的,经过以上内容我们可以简单的了解到为什么我们需要自定义事件了。

    接下来我们来用代码具体实现一下。

    function CursomObject (table) {
        /// <summary>这是一个自定义对象类型</summary>
        /// <param name="table" type="Object" optional="true">要添加的函数及属性表</param>
    
        // 这里要存放我们的自定义事件
        // 因为是一个表,所以我们使用Object类型
        this._events = {};
    
        // 得到函数及属性表中的内容
        for (var i in table) this[i] = table[i];
    }

    上面这段代码定义了一个CursomObject类型,这将作为下面所做操作的基础。

    CursomObject.prototype.addEventListener = function (type, listener, capture) {
        /// <summary>添加事件侦听器</summary>
        /// <param name="type" type="String">事件类型</param>
        /// <param name="listener" type="Function">触发的函数</param>
        /// <param name="capture" type="Boolean" optional="true">是否在捕获阶段触发(这里只是做了顺序排列)</param>
    
        // 判断一下传入的参数是否符合规格
        if (typeof type !== "string" || typeof listener !== "function") return this;
    
        // 缓存符合条件的事件列表
        var list = this._events[type];
    
        // 判断是否已经有该类型事件,若没有则添加一个新数组
        if (typeof list === "undefined") list = (this._events[type] = []);
    
        /* 判断插入函数的位置 */
        if (!!capture) list.push(listener);
        else list.insert(0, listener);
    
        return this;
    };
    至此,我们已经实现了一个简单的事件监听器的添加功能了。

    这里需要注意一下,list.insert中的insert函数在JavaScript的Array中是不存在的,我们将在下面的扩展函数中找到。

    另外,return this; 则是为了方便链式编程【详情请参阅”附录1“】

    CursomObject.prototype.removeEventListener = function (type, listener, capture) {
        /// <summary>移除事件侦听器</summary>
        /// <param name="type" type="String">事件名称</param>
        /// <param name="listener" type="Function">触发的函数</param>
        /// <param name="capture" type="Boolean">是否在捕获阶段触发</param>
    
        // 判断一下传入的参数是否符合规格
        if (typeof type !== "string" || typeof listener !== "function") return this;
    
        // 缓存符合条件的事件列表
        var list = this._events[type];
    
        // 若没有绑定过此类事件则不需要做处理
        if (typeof list === "undefined") return this;
    
        for (var i = 0, len = list.length; i < len; i++) {
            // 通过循环判断来确定事件列表中存在要移除的事件侦听函数
            if (list[i] == listener) {
                // 找到后将此侦听函数从事件列表中移除
                list.remove(i);
                break;
            }
        }
        return this;
    };
    以上过程简单明了,一个循环搞定问题。

    同时这个也需要注意,JavaScript中的Array中是不存在remove函数的,同样在下面扩展函数中会出现。

    CursomObject.prototype.fireEvent = function (type, e) {
        /// <summary>触发事件</summary>
        /// <param name="type" type="String">事件名称</param>
        /// <param name="e" type="Object">附加参数对象</param>
    
        // 若存在DOM0用法的函数,则触发
        this["on" + type.toLowerCase()] && this["on" + type.toLowerCase()].call(this, e);
    
        // 缓存符合条件的事件列表
        var list = this._events[type];
    
        // 若事件列表中没有内容则不需要做处理
        if (!list || list.length <= 0) return this;
    
        // 阻止事件冒泡开关
        var isStop = false;
    
        // 模拟事件对象
        window.event = { stopPropagation: function () { isStop = true; } };
        e.stopPropagation = window.event.stopPropagation;
    
        for (var i = 0, len = list.length; i < len; i++) {
            // 通过循环触发符条件的事件列表中存在的所有事件侦听函数
            // 若函数内返回false或事件内调用了event.stopPropagation函数则阻止接下来的所有调用
            if (list[i].call(this, e) === false || isStop) break;
        }
        return this;
    };
    注释已经说的很清楚了,这里就不再累述。

    那么至此就主体就已经完成了。下面放出扩展函数。

    Array.prototype.insert = function (index, value) {
        /// <summary>插入项</summary>
        /// <param name="index" type="Number">索引</param>
        /// <param name="value" type="Object">元素</param>
        /// <returns type="Array" />
    
        if (index > this.length) index = this.length;
        if (index < -this.length) index = 0;
        if (index < 0) index = this.length + index;
        for (var i = this.length; i > index; i--) {
            this[i] = this[i - 1];
        }
        this[index] = value;
        return this;
    };
    
    Array.prototype.remove = function (index) {
        /// <summary>移除项</summary>
        /// <param name="index" type="Number">索引</param>
        /// <returns type="Array" />
    
        if (isNaN(index) || index > this.length) return;
        this.splice(index, 1);
    };
    OK,已经全部完成了。

    下面放出完整代码。

    function CursomObject(table) {
        /// <summary>这是一个自定义对象类型</summary>
        /// <param name="table" type="Object" optional="true">要添加的函数及属性表</param>
    
        // 这里要存放我们的自定义事件
        // 因为是一个表,所以我们使用Object类型
        this._events = {};
    
        // 得到函数及属性表中的内容
        for (var i in table) this[i] = table[i];
    }
    
    CursomObject.prototype.addEventListener = function (type, listener, capture) {
        /// <summary>添加事件侦听器</summary>
        /// <param name="type" type="String">事件类型</param>
        /// <param name="listener" type="Function">触发的函数</param>
        /// <param name="capture" type="Boolean" optional="true">是否在捕获阶段触发(这里只是做了顺序排列)</param>
    
        // 判断一下传入的参数是否符合规格
        if (typeof type !== "string" || typeof listener !== "function") return;
    
        // 缓存符合条件的事件列表
        var list = this._events[type];
    
        // 判断是否已经有该类型事件,若没有则添加一个新数组
        if (typeof list === "undefined") list = (this._events[type] = []);
    
        /* 判断插入函数的位置 */
        if (!!capture) list.push(listener);
        else list.insert(0, listener);
    
        return this;
    };
    
    CursomObject.prototype.removeEventListener = function (type, listener, capture) {
        /// <summary>移除事件侦听器</summary>
        /// <param name="type" type="String">事件名称</param>
        /// <param name="listener" type="Function">触发的函数</param>
        /// <param name="capture" type="Boolean">是否在捕获阶段触发</param>
    
        // 判断一下传入的参数是否符合规格
        if (typeof type !== "string" || typeof listener !== "function") return this;
    
        // 缓存符合条件的事件列表
        var list = this._events[type];
    
        // 若没有绑定过此类事件则不需要做处理
        if (typeof list === "undefined") return this;
    
        for (var i = 0, len = list.length; i < len; i++) {
            // 通过循环判断来确定事件列表中存在要移除的事件侦听函数
            if (list[i] == listener) {
                // 找到后将此侦听函数从事件列表中移除
                list.remove(i);
                break;
            }
        }
        return this;
    };
    
    CursomObject.prototype.fireEvent = function (type, e) {
        /// <summary>触发事件</summary>
        /// <param name="type" type="String">事件名称</param>
        /// <param name="e" type="Object">附加参数对象</param>
    
        // 若存在DOM0用法的函数,则触发
        this["on" + type.toLowerCase()] && this["on" + type.toLowerCase()].call(this, e);
    
        // 缓存符合条件的事件列表
        var list = this._events[type];
    
        // 若事件列表中没有内容则不需要做处理
        if (!list || list.length <= 0) return this;
    
        // 阻止事件冒泡开关
        var isStop = false;
    
        // 模拟事件对象
        window.event = { stopPropagation: function () { isStop = true; } };
        e.stopPropagation = window.event.stopPropagation;
    
        for (var i = 0, len = list.length; i < len; i++) {
            // 通过循环触发符条件的事件列表中存在的所有事件侦听函数
            // 若函数内返回false或事件内调用了event.stopPropagation函数则阻止接下来的所有调用
            if (list[i].call(this, e) === false || isStop) break;
        }
        return this;
    };
    
    Array.prototype.insert = function (index, value) {
        /// <summary>插入项</summary>
        /// <param name="index" type="Number">索引</param>
        /// <param name="value" type="Object">元素</param>
        /// <returns type="Array" />
    
        if (index > this.length) index = this.length;
        if (index < -this.length) index = 0;
        if (index < 0) index = this.length + index;
        for (var i = this.length; i > index; i--) {
            this[i] = this[i - 1];
        }
        this[index] = value;
        return this;
    };
    
    Array.prototype.remove = function (index) {
        /// <summary>移除项</summary>
        /// <param name="index" type="Number">索引</param>
        /// <returns type="Array" />
    
        if (isNaN(index) || index > this.length) return;
        this.splice(index, 1);
    };


    使用:

    上面已经详述了自定义事件的具体实现。

    接下来我们就可以使用了,那么怎么使用呢?

    function Test() {
        /// <summary>这是一个自定义类型</summary>
    
        // 继承CursomObject中的属性
        CursomObject.apply(this);
    }
    // 继承CursomObject中的函数
    Test.prototype = new CursomObject();
    
    // 定义一个从Test类型中派生出来的对象
    var a = new Test();
    
    // 绑定一个message事件的侦听器
    a.addEventListener("message", function (e) {
        alert(e);
    }, false);
    
    // 再绑定一个message事件的侦听器
    a.addEventListener("message", function (e) {
        alert("内容:" + e);
    }, false);
    
    // 触发message事件
    a.fireEvent("message", "这是参数……");

    至此结束。

    如果疑问请留言,我将及时回复。

    谢谢您的观看!

    展开全文
  • Java面试题大全(2020版)

    万次阅读 多人点赞 2019-11-26 11:59:06
    AIO:Asynchronous IO 是 NIO 的升级,也叫 NIO2,实现了异步非堵塞 IO ,异步 IO 的操作基于事件和回调机制。 17. Files的常用方法都有哪些? Files.exists():检测文件路径是否存在。 Files.createFile():创建...
  • 面向对象设计与事件

    千次阅读 2014-02-26 17:02:52
    面向对象的设计给编程带来很大的便利和好处,在贯彻这种原则的语言中把类作为代码单元似乎也是自然的事情。但是实践中,剥夺了过程的独立生存权有时又会让代码失去过去的灵活和便捷。对事件的编程就是这样的场合。...
  • event是什么?事件对象

    千次阅读 2019-04-17 09:22:52
    1.event是事件函数对象,内置对象的一种 事件对象包含的几个操作原语:(这里只当了解) CreateEvent() 创建一个事件对象 OpenEvent() 打开一个事件对象 SetEvent() 设置指定的事件对象为有信号状态 ...
  • js面试题

    千次阅读 多人点赞 2019-04-09 19:42:32
    JavaScript 的组成 JavaScript 由以下三部分...BOM(浏览器对象模型):提供了浏览器窗口之间进行交互的对象和方法 JS 的基本数据类型和引用数据类型 基本数据类型:undefined、null、boolean、number、string、s...
  • javaScript学习笔记(一)js基础

    万次阅读 多人点赞 2018-09-21 10:07:18
     推荐使用 轮播图 实现一: 实现二: 21、js事件 21.1、事件概述: 事件三要素: 1. 事件源:被监听的html元素(就是这个事件加给谁),就是某个(某些)html标签 2. 事件类型:某类动作,例如点击事件,移入移除...
  • JS冒泡、捕获、默认事件那些事W3C规范三个事件阶段阻止冒泡、取消默认行为)(默认事件)防止冒泡和捕获取消默认事件return false兼容的使用方法(代码)事件对象event事件对象event的一些兼容性写法 W3C规范三个事件阶段...
  • JS基础——事件对象event

    万次阅读 热门讨论 2014-10-27 21:52:37
    事件为什么会是对象呢?先了解一下事件处理 一、事件处理  JS在事件处理函数中提供了事件对象,帮助处理鼠标和键盘事件。同时还可以修改一些事件的捕获和冒泡流的函数。 事件处理分为三部分:对象.事件处理...
  • jquery 的on方法获取发生事件的元素对象方法一:一个元素绑定事件的时候方式一:使用$(this)获取 如下代码:<!DOCTYPE html> <title>Title <script src="../js/jquery-3.2.1.js"></script>
  • Vue.js可以传递$event对象 <body id="app"> <ul> <li v-on:click="say('hello!', $event)">点击当前行文本</li> <li>li2</li> <li>li3</li> </ul> <...
  • 1.JS概述 1)概念 js全程:JavaScript(一门客户端脚本语言) a.js可以直接嵌入在html页面中,...b....c....操作方向: ...—操作BOM元素(浏览器对象) ...1.解释执行:不需要预编译,逐行执行 2.基于对象:内置了大量的现成对象 ...
  • 在所有的内核对象中,事件内核对象比其他的简单的多,可以用事件内核对象对不同进程进行同步。 事件内核对象主要包括三个部分:使用计数,一个表示是自动还是手动重置事件的布尔值,一个表示是否有信号的布尔值。 ...
  • $(".test").click(function () { var val=$(this).attr("id"); }) 转载于:https://www.cnblogs.com/penghq/p/10858179.html
  • Event属性可以帮到你!!! 开发工具与关键技术:DreamWeaver Event属性 作者:听民谣的老猫 撰写时间:2019/1/16 15:30 ...在JavaScript学习过程中接触到的Event属性,...返回当前 Event 对象表示的事件名称
  • C#基础教程-c#实例教程,适合初学者

    万次阅读 多人点赞 2016-08-22 11:13:24
    在项目类型(P)编辑框中选择Visual C#项目,在模板(T)编辑框中选择控制台应用程序,在名称(N)编辑框中键入e1,在位置(L)编辑框中键入D:\csarp,必须预先创建文件夹D:\csarp。也可以单击浏览按钮,在打开文件对话框中...
  • jquery中如果需要给按钮绑定click事件处理函数,那么我们可以使用如下的代码: $("#button1").click( ...但是如果我们需要事件更详细的信息,比如事件发生时鼠标的位置等,那么我们就必须要使用事件对象了。
  • 前端面试题

    万次阅读 多人点赞 2019-08-08 11:49:01
    列举浏览器对象模型BOM里常用的至少4个对象,并列举window对象的常用方法至少5个 72 简述列举文档对象模型DOM里document的常用的查找访问节点的方法并做简单说明 72 希望获取到页面中所有的checkbox怎么做?(不...
  • 任务总数 注意:event可以调换前后顺序但必须是event关键字,不能是e ,如果是e就会报错:ReferenceError: e is not defined 即在HTML事件处理程序的情况下正确的做法是传入完整的event名称 当然也可以不传递任何...
  • angular ng-click获取触发事件对象this

    千次阅读 2017-08-19 13:35:02
    ng-click="shareGoods({{item.goods_id}},$...通过事件对象 $event.target 获取事件源   Html代码  div class="float_left width_50 border_b_top_eee border_b_right_eee bg_ff padding
  • 1.1.1 addEventListenerthis对象的指向 1.2 removeEventListener() 1.3 dispatchEvent() 2 监听函数 2.1 HTML标签的on-属性 2.2 Element节点的事件属性 2.3addEventListener方法 3 事件...
  • 1、 HANDLE m_exitThreadEvent = CreateEvent(NULL,FALSE,FALSE,NULL); //创建通讯线程退出事件句柄,第三个参数为FALSE表示初始时无信号 2、ResetEvent(m_exitThreadEvent );
  • (这是一篇我几年前发表在IBM developerWorks上的文章,在此转帖,构成面向对象的LotusScript的系列文章...不过在LotusScript支持的三种对象:Notes对象、自定义对象和OLE对象中,只有Notes对象支持事件。也就是说我们
  • Javascript与HTML之间的交互是...事件冒泡IE的事件流叫做事件冒泡,即事件开始是由最具体的元素接收,然后逐级向上传播到较为不具体的节点(文档)。 如果点击了页面中的一个div元素,那么这个click事件可能会按照如下
  • addEventListener绑定事件对象方法。

    千次阅读 2016-05-25 20:22:08
    )目标阶段 触发在目标对象本身注册的事件处理程序,也称正常事件派发阶段。冒泡阶段 从目标节点到根节点,检测每个节点是否注册了事件处理程序,如果注册了事件处理程序,并且 useCapture 为
  • [js点滴]JavaScript事件Event对象03

    千次阅读 2016-11-13 14:22:33
    Event对象事件发生以后,会生成一个事件对象,作为参数传给监听函数。浏览器原生提供一个Event对象,所有的事件都是这个对象的实例,或者说继承了Event.prototype对象。Event对象本身就是一个构造函数,可以用来生成...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 392,679
精华内容 157,071
关键字:

对象事件的名称