zoukankan      html  css  js  c++  java
  • 关于句柄

    句柄即事件监听器,我也是在今天上午看到事件事件监听器,突然不知道这是什么才去查了下。

    首先,在HTML中为一个元素添加事件,一般有三种:

    1.通过HTML元素属性。简单说来就是在html结构中,给你要添加事件的元素添加一个属性。
    属性名为 'on' + 事件名。
    如:你要给a元素绑定一个click事件,你就该这么写:
    <a href="http://blog.163.com/luping_01/blog/#" onclick='do something'>name</a>

     2.通过对象属性。
    对象指的是jDOM树里的对象,我们都知道,所有的html元素在DOM(文档对象类型)里都存在一个相应的DOM元素。
    给这个DOM元素添加事件等同于方式一。这个属性名也一样:
    也为 on + 事件名
    如:
    html结构:
    <a href="http://blog.163.com/luping_01/blog/#" id="n">name</a>
    js:
    document.getElementById('n').onclick = function(){ //do something}

    3.通过W3C监听方式(标准方式)或者IE专属的中间模型添加事件

    W3C方式: elemennt.addEventListener(事件名,处理函数引用,true || false)
    这里的事件名就是单纯的事件名,不需要加 on ,true表示在事件传播阶段捕获事件,false表示在事件冒泡阶段捕获事件,一般我们设为false!

    在这里所说的就是第三种:

    addEventListener()添加句柄

    方法用于向指定元素添加事件句柄

    $(function () {
        var btn = $("button");
        for (var i in btn) {
            btn[i].addEventListener("click", function () {
                alert(this.innerHTML);
            }, true)
        }
    })

    在这里呢,是给所有button按钮添加了一个点击事件,当点击按钮时会弹出一个内容为按钮上内容的弹窗,addEventListener()方法一共有三个参数,第一个参数即事件名称,第二个参数是触发事件后所要给出的效果,最后一个则是判断在什么时候捕获事件。

    RemoveEventlistener()移除方法添加的事件句柄,RemoveEventlistener()方法和addEventListener()方法用法参数一致

    其次,有一个特例就是IE浏览器

    IE中,每个元素和window对象都有两个方法:attachEvent方法和detachEvent方法。这两个方法和以上两个方法在作用上是相同的。但是呢,在IE浏览器中事件前需要加上一个on,且第三个参数也非为必要【在其他浏览器中默认为false】,也就是说IE浏览器中添加事件与移除事件的方法只有两个参数即可。

    【最后,因为看的并不是很仔细,可能多有错漏,还请多多指正】

  • 相关阅读:
    PCB Genesis加邮票孔(邮票孔增加方向判断--左右上下)实现算法
    PCB SLOT槽孔数量计算方法,同CAM350孔数一致 实现方法
    从上到下打印二叉树II
    数据结构与算法(2)---顺序表
    栈的压入弹出序列
    包含min函数的栈
    顺时针打印矩阵
    数据结构与算法(1)--绪论
    反转链表
    数值的整数次方(快速幂)
  • 原文地址:https://www.cnblogs.com/wanghuanl/p/9318367.html
Copyright © 2011-2022 走看看