zoukankan      html  css  js  c++  java
  • javascrpt事件

    1、HTML事件处理程序:就是事件直接写在HTML文档中,其特点就是HTML和Js紧密的结合在一起,缺点就是修改不方便,需要改动js和HTML两处。比如:

    <button onclick="event"></button>

    <javascript>

    funciton event(){

    alert("hello world");

    </javascript>

    2、DOM0级处理程序:就是将事件作为对象的属性来看待,其更方便了修改,缺点就是如果添加在同一个对象上添加多个事件的话,后面的会覆盖掉之前的。比如:

    var a = document.getElementById("div");

    a.onclick = function(){...}

    3、DOM2级事件处理程序:其指定了两个方法,addEventListener,removeEventListener;这两个函数接受三个参数,分别是type,handler,true/false;其中type表示的是给对象添加的事件类型,handler表示的是函数,true表示的是事件捕获,false表示的是时间冒泡。

    var btn3 = document.getElementById("btn");

    function event(){}

    var eventUtil = {

    //添加句柄

    addHandler:function(element,type,handler){//element表示的是哪个元素,type表示的是事件类型(click,mouseover),handler表示的是处理的函数

    if(element.addEventListener)//DOM2级处理函数

    element.addEventListener(type,handler,false);

    else if(element.attachEvent)//IE事件处理程序

    element.attachEvent("on"+type,handler);//这里要变成onclick,所以要加on

    else 

    element["on"+type] = handler;//一般事件处理函数

    },

    //删除句柄

    removeHandler:function(element,type,handler){

    if(element.removeEventListener)

    element.removeEventListener(type,handler,false);

    else if(element.detachEvent)

    element.detachEvent("on"+type,handler);

    else 

    element["on"+type] = handler;

    }

    },

    eventUtil.addHandler(btn3,"click",event);

    eventUtil.removeHandler(btn3,"click",event);

  • 相关阅读:
    element-ui Notification重叠问题,原因及解决办法
    详解CSS3实现无限循环的无缝滚动
    js监听浏览器离开页面操作
    判断浏览器
    轮播动效 | 环形进度条 -- 等 动效库
    拓扑插件搜集
    jquery-图片懒加载
    [原]开源的视频转换器,支持gpu,绝对好用ffmpeg的GUI==》dmMediaConverter最新版本2.3
    【原】font-awesome IE6支持代码本人测试成功
    【原创】 c#单文件绿色资源自更新
  • 原文地址:https://www.cnblogs.com/fireporsche/p/6239477.html
Copyright © 2011-2022 走看看