<!--

作者:gentiana@163.com

时间:2016-3-10

描述:js事件处理

-->

<!DOCTYPE html>

<html>

<head>

<meta
charset="UTF-8">

<title>js事件处理</title>

</head>

<body>

<form
action="http://www.baidu.com"
method="post"
>

<button
id="btn">按钮123</button>

</form>

<script>

 

//添加事件

var addEvent =
function(
obj, type, fn )
{

if
(obj.addEventListener){

obj.addEventListener( type, fn,
false
);

}else
if
(obj.attachEvent)
{

obj["e"+type+fn]
= fn;

obj.attachEvent(
"on"+type,
function()
{

obj["e"+type+fn].call(obj, window.event);

}
);

}

};

 

var test =
function(e){

alert('Listener');

stopEvent(e);

}

var test2 =
function(){

alert('remove');

}

var btn = document.getElementById('btn');

addEvent(btn,
'click', test);

 

 

//移除事件

 

var removeEvent =
function(
obj, type, fn )
{

if
(obj.removeEventListener){

obj.removeEventListener( type, fn,
false
);

}

 

else
if
(obj.detachEvent)
{

obj.detachEvent(
"on"
+type, obj["e"+type+fn]
);

obj["e"+type+fn]
= null;

}

};

 

 

 

 

//阻止事件(包括冒泡和默认行为)

 

var stopEvent =
function(e){

e = e || window.event;

if(e.preventDefault)
{

e.preventDefault();

e.stopPropagation();

}else{

e.returnValue =
false;

e.cancelBubble =
true;

}

};

 

//仅阻止事件冒泡

 

var stopPropagation =
function(e)
{

e = e || window.event;

if
(e.preventDefault)
{

e.cancelBubble =
true;

}
else
{

e.stopPropagation();

}

};

 

 

//仅阻止浏览器默认行为

 

var preventDefault =
function(e)
{

e = e || window.event;

if(e.preventDefault)
{

e.preventDefault();

}else{

e.returnValue =
false;

}

}

 

//取得事件源对象

 

var getEventTarget =
function(e){

e = e || window.event;

var target = event.srcElement ? event.srcElement : event.target;

return target;

};

 

 

</script>

</body>

</html>

js事件处理-整理的更多相关文章

  1. 常用js方法整理common.js

    项目中常用js方法整理成了common.js var h = {}; h.get = function (url, data, ok, error) { $.ajax({ url: url, data ...

  2. js事件处理 —— 详解

    对于JS事件处理分为四部分: 1.html事件处理程序 直接添加到HTML结构中 解析:用html处理程序可以直接在button元素里直接调用,但是维护性不是很方便 <!DOCTYPE html ...

  3. 项目中常用js方法整理common.js

    抽空把项目中常用js方法整理成了common.js,都是网上搜集而来的,大家一起分享吧. var h = {}; h.get = function (url, data, ok, error) { $ ...

  4. JS知识点整理(二)

    前言 这是对平时的一些读书笔记和理解进行整理的第二部分,第一部分请前往:JS知识点整理(一).本文包含一些易混淆.遗漏的知识点,也会配上一些例子,也许不是很完整,也许还会有点杂,但也许会有你需要的,后 ...

  5. Vue.js事件处理

    Vue.js事件处理 1.v-on指令 用法如下:使用v-on:指令指定其执行的具体内容或者方法名即可. <button v-on:click='num++'>giao</butto ...

  6. 常用js代码整理、收集

    个人整理了一下个人常用到的一些js代码,以方便学习以及日后使用,或许有一些是个人之前从网上摘下来的,但是不记得是具体从哪里来的了,如果你看到有一段代码跟你的文章很相似甚至一样,请不要气愤,请告诉我,我 ...

  7. 工作中常用的JS函数整理分享(欢迎大家补充)

    今年在渣X工作整理的常用JS函数 今年来了渣X工作,我所在这个部门分工很奇怪,CSS竟然有专门的人在搞,开发PHP的人员需要处理JS,以至于有时候开发起来不是那么得心应手,感觉把JS和CSS拆开就像是 ...

  8. 常用js方法整理(个人)

    开头总要有点废话 今天想了下,还是分享下自己平时积累的一些实用性较高的js方法,供大家指点和评价.本想分篇介绍,发现有点画蛇添足.整理了下也没多少拿得出手的方法,自然有一些是网上看到的个人觉得很有实用 ...

  9. JS知识点整理(一)

    前言 本文把平时的一些读书笔记和理解进行了整理归纳,包含一些易混淆.遗漏的知识点,也会配上一些例子,可能不是很完整,还会有点杂,但也许会有你需要的(目前先整理了一部分,笔记有点多,后续会持续更新). ...

随机推荐

  1. 2014年辛星解读Javascript之DOM之事件及其绑定

    我们通过DOM的事件能够对HTML的事件作出反应.就像我们用其它编程语言写GUI一样,那么HTML包含哪些事件呢?以下是几个常见的样例,比方网页已经完毕记载,图像完毕载入,鼠标移动到元素上方.输入文字 ...

  2. Leetcode: n-queen, n-queen II

    思路: 题目给出的测试数据范围比较小, 使用回溯就可以AC, 搞的我也没有兴趣去研究高效解法了 总结: 刚开始, 本以为用棋盘问题的状态压缩 DP 就可以解决, 但做完 N-queen 才发现多个皇后 ...

  3. osgearth将视点绑定到一个节点上

    _manip->getSettings()->setTetherMode(osgEarth::Util::EarthManipulator:: TETHER_CENTER ); //设置_ ...

  4. C++说明符和限定符

    有些被称为存储说明符(storage class specifier)或cv-限定符(cv-qualifier)的C++关键字提供了一些有关存储的信息.下面是存储所说明符:* auto (在C++11 ...

  5. PyQt4颜色对话框QColorDialog

    QColorDialog提供了用于显示颜色的对话框. #!/usr/bin/python # -*- coding: utf-8 -*- import sys from PyQt4 import Qt ...

  6. php PDO简介和操作

    PDO:数据访问抽象层 具有三大特点: 1.可以访问其它数据库  所有数据库都可以 2.具有事务功能 3.带有预处理语句功能(防止SQL注入攻击) <?php //1.造PDO对象 $dsn = ...

  7. 上传控件CSS用图片代替

    <style type="text/css"> a.btn {width: 120px;height: 42px;overflow: hidden;display: b ...

  8. Delphi的保存文件对话框-TsaveDialog

    TsaveDialog继承于TOpenDialog,只介绍以下几个内容: 1.TsaveDialog如何设定为保存的默认路径是当前程序所在的文件夹: 默认目录是当前程序所在目录应设置属性Initial ...

  9. JavaWeb温习之防止表单重复提交

    表单重复提交主要有以下三种情况: 1. 在网络延迟的情况下让用户有时间点击多次submit按钮导致表单重复提交 2. 表单提交后用户点击[刷新]按钮导致表单重复提交 3. 用户提交表单后,点击浏览器的 ...

  10. 1.border-image

    1.设置在元素围绕的border的图片,用图片代替边框 语法: broder-image-source:图片 border-image-slice:切下的区域,数字|百分比(相对于图像的高度和宽度) ...