javascript绑定事件:

经常用jQuery去写,时间长了对原生态的js事件绑定的知识会慢慢淡化或者遗忘了,必须翻出来再次总结,今天再次把js原生态事件的处理做个总结。

从最初开始,谁刚接触javascript的时候,老师都会这样教导我们怎么触发事件,在页面某个DOM节点上面添加所要触发的事件,比如:onclick,onmousedown,onmouseup,onfocus,onchange等等...看代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
function init(val){
alert(val + '事件触发');
}
</script>
</head>
<body>
<h1 id="klm" onmousedown="init('onmousedown')">事件</h1>
</body>
</html>

直接在DOM节点内添加事件,这种方式初学者适用,对于我们企业前端开发最好不要用这样的方式,虽然这样看上去很直观,但把函数暴露在页面是很危险的事情。

那我们接下来将这个方式移到js中去操作,拿onclick来说,用纯js方式 首先要获取DOM对象,然后去触发onclick事件。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
window.onload = function(){
var _this = document.getElementById('klm');
_this.onclick = function(){
alert( '点击事件绑定');
}
};
</script>
</head>
<body>
<h1 id="klm">事件</h1>
</body>
</html>

这样的方式也很简单,我们也可以用这种方式绑定多种事件处理

 _this.onmouseup = function(){
alert( '鼠标事件绑定');
}
_this.onclick = function(){
alert( '点击事件绑定');
}

如果用alert()方式的话,在任何浏览器只能触发第一个函数提示,其后面的则不执行,如果用 console.log()控制台打印则在浏览器(除IE浏览器)下都会执行出结果。

attachEvent函数:

为此,我再做其他方式为了兼容浏览器,在js中提供了绑定方式,针对IE这样的浏览器提供的代码是这样写的:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
window.onload = function(){
var _this = document.getElementById('klm');
_this.attachEvent('onmousedown',function(){
console.log('鼠标按下事件')
});
_this.attachEvent('onmouseup',function(){
console.log('鼠标抬起事件')
});
};
</script>
</head>
<body>
<h1 id="klm">事件</h1>
</body>
</html>

注:(在IE浏览器所写的事件名称要用"on"打头的,如onclick,onmouseup,等)

运行结果:

addEventListener函数:

W3C标准的浏览器在添加事件时用addEventListener(event,fn,useCapture)方法,基中第3个参数useCapture是一个Boolean值,用来设置事件是在事件捕获时执行,还是事件冒泡时执行。

注:这个函数也是被黑客利用的工具,利用它来实现内联xss拦截

这个函数除了IE内核系列浏览器之外,基本都执行,而且传入的事件名称不是以“on”开头,先直观的看下代码:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
window.onload = function(){
var _this = document.getElementById('klm');
_this.addEventListener('mousedown',function(){
console.log('鼠标按下事件')
});
_this.addEventListener('mouseup',function(){
console.log('鼠标抬起事件')
});
};
</script>
</head>
<body>
<h1 id="klm">事件</h1>
</body>
</html>

火狐,搜狗,谷歌执行结果:

但是光这样写没法满足兼容性,需要将2个函数整合起来,这里就需要做一个判断,然后判断结果成立,则执行逻辑里面的方法,在写这个逻辑有很多种,我列举2个思路:1,可以通过判断浏览器方式进入对应的函数方式。2,通过直接判断浏览器是否含有attachEvent或addEventListener函数方式。我就用第2个思路进行:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
window.onload = function(){
var _this = document.getElementById('klm');
if(_this.addEventListener){
_this.addEventListener('mousedown',function(){
console.log('鼠标按下事件')
});
_this.addEventListener('mouseup',function(){
console.log('鼠标抬起事件')
});
}else{
_this.attachEvent('onmousedown',function(){
console.log('鼠标按下事件')
});
_this.attachEvent('onmouseup',function(){
console.log('鼠标抬起事件')
});
}
};
</script>
</head>
<body>
<h1 id="klm">事件</h1>
</body>
</html>

火狐和IE浏览器运行结果:

都能顺利的执行代码了。。。(上面的代码还可以精简,在这里我只是样例)

在这里提一个概念:事件捕获和事件冒泡

事件捕获:

事件从最上一级HTML标签开始,一级一级向下查找,直到捕获到事件目标为止。

事件冒泡:

事件从事件目标开始,往上冒泡直到页面的最上一级标签。

在IE浏览器中只支持事件冒泡,不支持事件捕获。而addEventListener函数是第三个参数的设置是判断你在浏览器(去除IE浏览器)下是用事件捕获或者事件冒泡方式执行,"true"是捕获,false是冒泡。

阻止冒泡:

IE方式是: window.event.cancelBubble = true;

火狐浏览器方式:e.stopPropagation()

上面说了绑定事件,js还提供了其他方式,接下来说下删除事件绑定

detachEvent:

IE浏览器提供了这个函数去删除已绑定事件的操作。

detachEvent(funType,funname):2个参数值funType指的触发的事件类型,如onclick,onmouseup... funname则是所要去掉的函数,代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
window.onload = function(){
var _this = document.getElementById('klm');
//添加一个onmouseup事件
_this.attachEvent('onmouseup',init);
function init(){
console.log('鼠标抬起事件')
//删除onmouseup事件
_this.detachEvent('onmouseup',init);
}
};
</script>
</head>
<body>
<h1 id="klm">事件</h1>
</body>
</html>

注:我先用attachEvent绑定onmouseup事件,当触发完这个事件的时候并将onmouseup事件删除。这样<h1>对象就不会再触发事件效果了。

attachEvent非W3C标准,而是IE自己的,那些遵循W3C标准的浏览器该用什么呢?

removeEventListener:

拿火狐为例,使用此函数才能删除已绑定的事件。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
window.onload = function(){
var _this = document.getElementById('klm');
//添加一个onmouseup事件
_this.addEventListener('mouseup',init,false);
function init(){
console.log('鼠标抬起事件');
//删除onmouseup事件
_this.removeEventListener('mouseup',init,false);
}
};
</script>
</head>
<body>
<h1 id="klm">事件</h1>
</body>
</html>

如果  _this.removeEventListener('mouseup',init,true);这里最后一个参数和添加事件设置的不一致,则删除事件无效。

通过js原生态的语法的了解,对以后底层封装会有很大的帮助。

js事件绑定细节说明的更多相关文章

  1. 原生JS事件绑定方法以及jQuery绑定事件方法bind、live、on、delegate的区别

    一.原生JS事件绑定方法: 1.通过HTML属性进行事件处理函数的绑定如: <a href="#" onclick="f()"> 2.通过JavaS ...

  2. js事件绑定的几种方式与on()、bind()的区别

    版权声明:本文为博主原创文章,未经博主允许不得转载 一直不是很理解几种js事件绑定之间的区别与联系,今天百度了一下,在此做一总结: 1.如果只是简单的绑定一个事件,可以直接写在行内,点击执行一个函数, ...

  3. js课程 5-13 js事件绑定和鼠标事件注意事项有哪些

    js课程 5-13  js事件绑定和鼠标事件注意事项有哪些 一.总结 一句话总结:js代码的灵魂就是改变标签的属性和样式,就这两种. 1.js触发改的东西是哪两样? 属性和样式 2.js如何让页面用标 ...

  4. js事件绑定及深入

    学习要点: 1.传统事件绑定的问题2.W3C事件处理函数3.IE事件处理函数4.事件对象的其他补充 事件绑定分为两种:一种是传统事件绑定(内联模型,脚本模型),一种是现代事件绑定(DOM2级模型).现 ...

  5. js 事件绑定

    事件绑定的方式 1.  DOM  元素行内绑定 <div onclick="alert(1)"></div>   2. js on+eventType do ...

  6. js事件绑定函数

    js中事件绑定方法大致有三种: 1.在DOM元素中绑定 <input onclick="alert('在DOM中绑定')" type="button" v ...

  7. js事件绑定的几种方式

    在JavaScript中,有三种常用的绑定事件的方法: 在DOM元素中直接绑定: 在JavaScript代码中绑定: 绑定事件监听函数 一. 在DOM元素中直接绑定 这里的DOM元素,可以理解为HTM ...

  8. js事件绑定/监听

    事件绑定/监听的方法 1.直接绑定 顾名思义,直接在DOM元素上绑定onclick.onmouseover.onmouseout.onmousedown.onmouseup.ondblclick.on ...

  9. 原生js事件绑定

    一.JS事件 (一)JS事件分类 1.鼠标事件: click/dbclick/mouseover/mouseout 2.HTML事件: onload/onunload/onsubmit/onresiz ...

随机推荐

  1. 利用 Rational ClearCase ClearMake 构建高性能的企业级构建环境

    转载地址:http://www.ibm.com/developerworks/cn/rational/r-cn-clearmakebuild/ 构建管理是 IBM® Rational® ClearCa ...

  2. [转]DB2类型转换函数

    Src URL:http://www.cnblogs.com/QQParadise/articles/2642677.html

  3. Android Programming: Pushing the Limits -- Chapter 7:Android IPC -- Messenger

    Messenger类实际是对Aidl方式的一层封装.本文只是对如何在Service中使用Messenger类实现与客户端的通信进行讲解,对Messenger的底层不做说明.阅读Android Prog ...

  4. (2)Underscore.js常用方法

    目录 1.集合相关方法        1.1.数组的处理                map(循环,有返回值),将返回的值依次存入一个新的数组                each(循环,无返回值 ...

  5. Android中libs目录下armeabi和armeabi-v7a的区别

    armeabi默认选项,支持基于 ARM* v5TE 的设备支持软浮点运算(不支持硬件辅助的浮点计算)支持所有 ARM* 设备 armeabi-v7a支持基于 ARM* v7 的设备支持硬件 FPU ...

  6. Delphi之DLL知识学习5---在Delphi应用程序中使用DLL

    首先说明一下:同一个动态库(DLL)被多个的程序加载的话,那么将会在每次加载的时候都会重新分配新的独立的内存空间,绝对不是共用一个,所以当一个DLL被多次加载的时候,其会在内存中“复制”多份,不会互相 ...

  7. Pyqt 打开外部链接的几种方法

    Pyqt 触发一个事件,打开外部链接,我找到了这个方法,供大家参考 1. QDesktopServices 的openUrl 方法 QtGui.QDesktopServices.openUrl(QtC ...

  8. poj 1007:DNA Sorting(水题,字符串逆序数排序)

    DNA Sorting Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 80832   Accepted: 32533 Des ...

  9. Implementing Navigation with UINavigationController

    Implementing Navigation with UINavigationController Problem You would like to allow your users to mo ...

  10. MySQL数据库自带备份与恢复工具:MySQLdump.exe与mysql.exe

    数据库的备份工作是保护数据库正常运行的关键,以下的文章主要讲述的是MySQL数据库备份的一些小妙招,我们大家都知道使用MySQL dump备份数据库的用户所需要的权限相对而言还是比较小的,只需要sel ...