1.绑定

function(element, type, handler){
        if (element.addEventListener) {
            element.addEventListener(type, handler, false);
        }
        else 
            if (element.attachEvent) {
                element.attachEvent("on" + type, handler);
            }
            else {
                element["on" + type] = handler;
            }
    }

2.删除

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] = null;
            }
    }

3.阻止默认事件

function(event){
        if (event.preventDefault) {
            event.preventDefault();
        }
        else {
            event.returnValue = false;
        }
    }

4.不传播事件(阻止冒泡)

function(event){
        if (event.stopPropagation) {
            event.stopPropagation();
        }
        else {
            event.cancelBubble = true;
        }
    }

5.获得event的target

function(event){
        return event.target || event.srcElement;
    }

封装及实例

var eventUtil = {
// 添加句柄
addHandler: function (element, type, handler) {
if (element.addEventListener) {
element.addEventListener(type, handler, false);
} else if (element.attachEvent) {
element.attachEvent('on' + type, handler);
} 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] = null;
}
},
getEvent: function (event) {
return event ? event : window.event;
},
getType: function (event) {
return event.type;
},
getElement: function (event) {
return event.target || event.srcElement;
},
// 阻止默认行为
preventDefault: function (event) {
if (event.preventDefault) {
event.preventDefault();
} else {
event.returnValue = false;
}
},
// 阻止事件传播
stopPropagation: function (event) {
if (event.stopPropagation) {
event.stopPropagation();
} else {
event.cancelBubble = true;
}
}
}
 
var div = document.createElement("div");
var body = document.getElementsByTagName('body')[0];
div.innerHTML = "hello";
body.appendChild(div);
function show() {
console.log('123');
}
eventUtil.addHandler(div, 'mouseover', show);
 
js  事件大全
onabort 当用户中断下载图像时触发。
onactivate 当对象设置为活动元素时触发。
onafterprint 对象所关联的文档打印或打印预览后立即在对象上触发。
onafterupdate 当成功更新数据源对象中的关联对象后在数据绑定对象上触发。
onbeforeactivate new 对象要被设置为当前元素前立即触发。
onbeforecopy 当选中区复制到系统剪贴板之前在源对象触发。
onbeforecut 当选中区从文档中删除之前在源对象触发。
onbeforedeactivate 在 activeElement 从当前对象变为父文档其它对象之前立即触发。
onbeforeeditfocus 在包含于可编辑元素内的对象进入用户界面激活状态前或可编辑容器变成控件选中区前触发。
onbeforepaste 在选中区从系统剪贴板粘贴到文档前在目标对象上触发。
onbeforeprint 对象的关联文档打印或打印预览前在对象上触发。
onbeforeunload 在页面将要被卸载前触发。
onbeforeupdate 当成功更新数据源对象中的关联对象前在数据绑定对象上触发。
onblur 在对象失去输入焦点时触发。
onbounce 当 marquee 对象的 behavior 属性设置为“alternate”且字幕的内容到达窗口一边时触发。
oncellchange 在数据供应者中的数据变更时触发。
onchange 当对象或选中区的内容改变时触发。
onclick 在用户用鼠标左键单击对象时触发。
oncontextmenu 在用户使用鼠标右键单击客户区打开上下文菜单时触发。
oncontrolselect 当用户将要对该对象制作一个控件选中区时触发。
oncopy 当用户复制对象或选中区,将其添加到系统剪贴板上时在源元素上触发。
oncut 当对象或选中区从文档中删除并添加到系统剪贴板上时在源元素上触发。
ondataavailable 每当异步传输数据的数据源对象的数据到达时触发。
ondatasetchanged 当数据源对象对应的数据集发生变更时触发。
ondatasetcomplete 触发就表明数据源对象所有数据都可用。
ondblclick 当用户双击对象时触发。
ondeactivate 当 activeElement 从当前对象变为父文档其它对象时触发。
ondrag 当进行拖曳操作时在源对象上持续触发。
ondragend 当用户在拖曳操作结束后释放鼠标时在源对象上触发。
ondragenter 当用户拖曳对象到一个合法拖曳目标时在目标元素上触发。
ondragleave 当用户在拖曳操作过程中将鼠标移出合法拖曳目标时在目标对象上触发。
ondragover 当用户拖曳对象划过合法拖曳目标时持续在目标元素上触发。
ondragstart 当用户开始拖曳文本选中区或选中对象时在源对象上触发。
ondrop 当鼠标按钮在拖曳操作过程中释放时在目标对象上触发。
onerror 当对象装载过程中发生错误时触发。
onerrorupdate 更新数据源对象中的关联数据出错时在数据绑定对象上触发。
onfilterchange 当可视滤镜更改状态或完成转换时触发。
onfinish 当字幕循环完成后触发。
onfocus 当对象获得焦点时触发。
onfocusin new 当元素将要被设置为焦点之前触发。
onfocusout new 在移动焦点到其它元素之后立即触发于当前拥有焦点的元素上触发。
onhelp 当用户在浏览器为当前窗口时按 F1 键时触发。
onkeydown 当用户按下键盘按键时触发。
onkeypress 当用户按下字面键时触发。
onkeyup 当用户释放键盘按键时触发。
onlayoutcomplete 当打印或打印预览版面处理完成用来自于源文档的内容填充当前 LayoutRect 对象时触发。
onload 在浏览器完成对象的装载后立即触发。
onlosecapture 当对象失去鼠标捕捉时触发。
onmousedown 当用户用任何鼠标按钮单击对象时触发。
onmouseenter 当用户将鼠标指针移动到对象内时触发。
onmouseleave 当用户将鼠标指针移出对象边界时触发。
onmousemove 当用户将鼠标划过对象时触发。
onmouseout 当用户将鼠标指针移出对象边界时触发。
onmouseover 当用户将鼠标指针移动到对象内时触发。
onmouseup 当用户在鼠标位于对象之上时释放鼠标按钮时触发。
onmousewheel new 当鼠标滚轮按钮旋转时触发。
onmove 当对象移动时触发。
onmoveend 当对象停止移动时触发。
onmovestart 当对象开始移动时触发。
onpaste 当用户粘贴数据以便从系统剪贴板向文档传送数据时在目标对象上触发。
onpropertychange 当在对象上发生对象上发生属性更改时触发。
onreadystatechange 当对象状态变更时触发。
onreset 当用户重置表单时触发。
onresize 当对象的大小将要改变时触发。
onresizeend 当用户更改完控件选中区中对象的尺寸时触发。
onresizestart 当用户开始更改控件选中区中对象的尺寸时触发。
onrowenter 触发就表明当前行已经在数据源中更改,对象上有可用的新数据值。
onrowexit 当数据源控件更改对象当前行前触发。
onrowsdelete 当行将要从记录集中被删除时触发。
onrowsinserted 当在当前记录集中插入新行后触发。
onscroll 当用户滚动对象的滚动条时触发。
onselect 当当前选中区改变时触发。
onselectionchange 当文档的选中状态改变时触发。
onselectstart 对象将要被选中时触发。
onstart 在 marquee 对象的每次循环开始时触发。
onstop 当用户单击停止按钮或离开 Web 页面时触发。
onsubmit 当表单将要被提交时触发。
 
 
 
 
 

js 事件相关 事件处理 封装 事件封装 DOM 0 2 3 级事件的更多相关文章

  1. DOM初体验(绑定事件,监听事件)

    JavaScript的组成: ECMAScript(js的基本语法).DOM(文档对象模型).BOM(浏览器对象模型) DOM的作用: 1. 找到页面上的元素 2. 增添.删除.修改页面上的元素 3. ...

  2. DOM0级事件处理和DOM2级事件处理

    转自:http://www.cnblogs.com/holyson/p/3914406.html 0级DOM 分为2个:一是在标签内写onclick事件  二是在JS写onlicke=function ...

  3. JS-------DOM0级事件处理和DOM2级事件处理-------简单记法

    0级DOM 分为2个:一是在标签内写onclick事件  二是在JS写onlicke=function(){}函数 1) <input id="myButton" type= ...

  4. 关于DOM事件流、DOM0级事件与DOM2级事件

    一.DOM 事件模型 DOM 事件模型包括捕获和冒泡,捕获是从上往下到达目标元素,冒泡是从当前元素,也就是目标元素往上到 window 二.流 流的概念,在现今的 JavaScript 中随处可见.比 ...

  5. on(events,[selector],[data],fn) 在选择元素上绑定一个或多个事件的事件处理函数

    on(events,[selector],[data],fn) 概述 在选择元素上绑定一个或多个事件的事件处理函数.大理石平台精度等级 on()方法绑定事件处理程序到当前选定的jQuery对象中的元素 ...

  6. 测试DOM0级事件和DOM2级事件的堆叠

    1. 问题 如果大家看过北风网CJ讲师的Javascript视频教程,就可以看到其封装了一个很强的事件添加和删除函数,如下所示 function addEvent(obj, evtype, fn) { ...

  7. DOM1级问题与DOM2级事件

    前几天有小伙伴问过我一个问题,为什么有DOM 0级事件以及DOM2级事件,但是却没有DOM1级事件呢?那我们今天就来说一说DOM的级别问题. 同时推荐伙伴们可以看看尚学堂有关JavaScript BO ...

  8. js中event事件处理

    1. HTML事件  直接添加到HTML结构中 function show() { alert('hello'); } <body> <button id="btn&quo ...

  9. JS代码的位置与事件响应代码块的封装问题

    JS代码的位置       我们可以将JavaScript代码放在html文件中任何位置,但是我们一般放在网页的head或者body部分.   放在<head>部分最常用的方式是在页面中h ...

随机推荐

  1. Catch all the latest Jordan Release Dates

    In case y'all missed yesterday's news, Air Jordan 13 Olive 2018 officially unveiled their 2017 Holid ...

  2. mysql数据库环境配置中部分问题解决办法

    注:原文地址:https://www.cnblogs.com/hezhuoheng/p/9366630.html 其中最重要的,是三个原则:命令按顺序输入.删除了ini(这个不是原则,是我解决问题的一 ...

  3. Javascript-逻辑运算符非(!)

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. c#及js实现将金融变成3位一逗号

    1.c#用string.format ToString("#,###.00") 2.js方法 转自http://www.cnblogs.com/cssfirefly/p/35820 ...

  5. HashMap(JDK1.9)详解

    一.HashMap的概念. 1.HashMap类的继承实现关系如下:因此HashMap的功能有:可序列化.可克隆等功能. 2.HashMap的数据结构:数组+链表+红黑树. 3.键值对的存储方案:第一 ...

  6. 浅谈css中渐变衔接

    无论transition还是keyframes,如何让变化更自然,这是前端应该考虑的问题. 这里,我简单总结下自己的方法. 以实践为例子. 1.图像渐变 @keyframes looppic{ fro ...

  7. iframe嵌套

    iframe基本内涵 通常我们使用iframe直接直接在页面嵌套iframe标签指定src就可以了. <iframe src="demo_iframe_sandbox.htm" ...

  8. OGNL mybatis

    http://www.mybatis.org/mybatis-3/zh/dynamic-sql.html 动态 SQL MyBatis 的强大特性之一便是它的动态 SQL.如果你有使用 JDBC 或其 ...

  9. 打造高可靠与高性能的React同构解决方案

    前言 随着React的兴起, 结合Node直出的性能优势和React的组件化,React同构已然成为趋势之一.享受技术福利的同时,直面技术挑战,在复杂场景下,挑战10倍以上极致的性能优化. 什么是同构 ...

  10. C/C++之static函数与普通函数

    全局变量(外部变量)的说明之前再冠以static 就构成了静态的全局变量.全局变量本身就是静态存储方式, 静态全局变量当然也是静态存储方式.这两者在存储方式上并无不同.这两者的区别虽在于非静态全局变量 ...