彩世界平台-彩世界时时app-彩世界开奖app苹果下载

热门关键词: 彩世界平台,彩世界时时app,彩世界开奖app苹果下载

您的位置:彩世界平台 > 新闻动态 > JS--事件(一)

JS--事件(一)

发布时间:2019-09-04 14:50编辑:新闻动态浏览(86)

    1.js退出当前页面,一般常用于做系统登录的退出:

    事件流

    事件流描述的是从页面中接受事件的顺序,在IE中的事件流是事件冒泡,在Netscape的事件流是事件捕获流。

    • 事件冒泡
      IE的事件流叫做事件冒泡,即事件开始是由最具体的元素接受,然后逐级向上传播到较不具体的节点(文档)。有的浏览器会跳过body元素直接冒泡到document上,有些浏览器还会一直冒泡到window对象上。基本上所有的浏览器都支持事件冒泡。

    • 事件捕获
      Netscape提出另外一种事件流是事件捕获,事件捕获的思想是首先不太具体的节点应该更早的接受到事件,而具体的节点应该最后接收到事件。事件捕获的用意在于在事件到达预定目标之前捕获它。
      在IE9,Safari,chrome,opera,Firefox中也都支持事件捕获流,DOM2级事件要求事件从document开始传播,但这些浏览器还是从window对象开始捕获事件。

    注:一些老版本的浏览器并不支持事件捕获,所以我们可以放心的使用事件冒泡。

    • DOM事件流
      DOM2级事件规定事件流包括:事件捕获阶段,处于目标阶段,事件冒泡阶段。注意,事件捕获阶段中,事件还是不会到目标元素上,目标元素上发生的事件可以看做是事件冒泡的一部分。

    注意:在IE9,Safari,chrome,Firefox,opera9.5等浏览器都会在事件捕获阶段触发事件对象上的事件。

      confirm("....."),出现确定,取消弹出框,点击“确定”自动返回true,否则返回false(默认返回到当前页,取消该事件),参数是弹出框自定义的的提示信息

    事件处理程序

    关于在文档中响应某种事件的函数我们把称作事件处理程序(事件侦听器),事件处理程序的名称以on开头,为事件指定处理程序的方式有以下几种:

    • HTML事件处理程序
    <input type='button' onclick='alert("hello world")'>
    
    function show(){
      alert('hello world')
    }
    <input type='button' onclick='show()'>
    

    这样指定事件处理程序有一些特别的地方。第一,这样创建一个封装着元素属性值的函数,这个函数中有个局部变量event,也就是事件对象

    <input type='button' onclick='alert(event.type)'>
    //这样你不用自己定义它,用不用从函数的参数列表中去获取
    

    第二,在这个函数内部,this值等于事件的目标元素:

    <input type='button' onclick='alert(this)'>
    

    以这种方式绑定事件处理程序有以下三个缺点:

    1. 时差问题,当事件执行时,事件处理程序还未定义;
    2. 扩展处理程序的作用域链在不同浏览器中导致不同的结果;
    3. HTML代码和JS代码耦合太强,不符合结构,样式,行为分离的标准;
    • DOM0级事件处理程序
      通过JavaScript指定事件处理程序,就是将一个函数赋值给一个事件处理程序属性。要使用JavaScript指定事件处理程序,首先必须取得一个要操作的对象的引用。
    var btn = document.getElementById('myBtn')
    btn.onclick = function(){
      alert('hello world')
    }
    

    使用DOM0级方法指定事件处理程序被认为是元素的方法。因此,这时候事件处理程序是在元素的作用域中运行。换句话说,程序中的this引用当前元素。
    也可以删除通过DOM0级方法指定的事件处理程序:

    btn.onclick = null
    
    • DOM2级事件处理程序
      DOM2级事件,该级别事件中定义了两个方法,用于指定和删除事件处理程序的操作:
    1. addEventListener()
    2. removeEventListener()
      所有DOM节点都包含这个两个方法,都接受三个参数:
    3. 要处理的事件名
    4. 事件处理程序的函数
    5. 布尔值(true表示在捕获阶段调用该事件处理程序,false表示冒泡阶段调用)
    var btn = document.getElementById('btn')
    btn.addEventListener('click', function(){
    alert('hello')
    }, false)
    

    同DOM0级事件一样,这里添加的事件处理程序也是在其依附的元素的作用域中运行。

    var btn = document.getElementById('btn')
    btn.addEventListener('click', function(){
      alert(1)
    },false)
    
    btn.addEventListener('click', function(){
      alert(2)
    },false)
    

    如上,通过DOM2级事件绑定方法,可以绑定多个事件处理程序函数,它会一一的执行,但是通过DOM0级只能绑定一个事件处理程序,如果写第二个则会覆盖掉前一个。

    通过addEventListener绑定的事件可以通过removeEventListener来移除,移除时传入的参数和绑定事件处理程序参数相同(注意:如果通过addEventListener绑定的匿名函数无法移除),如下可以正常解除:

    var fn = function(){
    alert(1)
    }
    
    var btn = document.getElementById('btn')
    btn.addEventListener('click', fn, false)
    btn.removeEventListener('click', fn, false)  //移除
    
    • IE事件处理程序
      IE中实现与DOM中类似的两个方法:
    1. attachEvent()
    2. detachEvent()
      这两个方法接受相同的两个参数:
    3. 事件名称
    4. 事件处理程序函数
    var btn = document.getElementById('btn')
    btn.attachEvent('onclick', function(){
      alert(1)
    })
    //注意:这里的事件名称前面要加on
    
    注意: 使用attachEvent方法,事件处理程序函数的执行环境是在全局作用域下,和DOM0级不一样。所以在该函数中的this指向的是window
    

    在看以下情况,attachEvent方法也可以为一个元素绑定多个事件处理函数:

    var btn = document.getElementById('btn')
    
    btn.attachEvent('onclick', function(){
      alert(1)
    })
    
    btn.attachEvent('onclick', function(){
      alert(2)
    })
    

    执行以上代码,可以发现,执行的顺序和addEventListener的执行顺序是相反的。
    detachEvent方法就不详细介绍了,用法和removeEventListener相对应的。

    例:

     function logout(){
           if(confirm("退出登录?")){
           window.location = "<%=path%>/logout.action?accountType=Touch";//点击确定,要执行的操作
           }
      }

    2.js给按钮添加回车事件,点回车触发按钮执行动作:F13

    例:给BUTTON按钮添加回车事件,执行搜索操作

    <input name="button" id="sButton" type="button"  class="right_btn07" onclick="searchAdmin()" />

    document.onkeydown = function(e){
           if(!e) e = window.event;
           if((e.keyCode || e.which) == 13){
               document.getElementById("sButton").click();//将回车事件按照属性id添加到指定的按钮上,触发该按钮的click事件依次执行一下的操作,调用searchAdmin()方法
           }
    }

    function searchAdmin(){
        var str = document.getElementById("key").value;
        window.location="${path}search.action?type=admin&key=" + encodeURI(encodeURI(str));

     }

    本文由彩世界平台发布于新闻动态,转载请注明出处:JS--事件(一)

    关键词:

上一篇:JavaScript之使用JavaScript模仿oop编程

下一篇:没有了