js添加绑定事件的方法
更新时间：2016年05月15日 08:49:27 投稿：lijiao
这篇文章主要为大家详细介绍了js添加事件的通用方法，还为大家介绍了js绑定事件的常用方式，感兴趣的小伙伴们可以参考一下
先介绍js添加事件通用方法，具体内容如下
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<p id="p1">测试添加事件：firefox使用addEventListener,ie使用attachEvent<br>
点击此p标签，绑定了2个弹出事件</p>
<script>
function test1() {
alert("test1");
}
function test2(){
alert("test2");
}
//添加事件通用方法
function addEvent(element,e,fn) {
//firefox使用addEventListener，来添加事件
if(element.addEventListener) {
element.addEventListener(e,fn,false);
}
//ie使用attachEvent，来添加事件
else {
element.attachEvent("on"+e,fn);
}
}
window.onload = function(){
var element = document.getElementById("p1");
addEvent(element,"click",test1);
addEvent(element,"click",test2);
}
</script>
</body>
</html>
js绑定事件的常用方式：
绑定事件的方式：用事件属性绑定事件函数
优点：
1、完成行为的分离
2、便于操作当事对象，因为function是作为on***的属性出现的，可直接用this引用当事对象。
3、方便读取事件对象，事件触发时系统自动把事件对象传递给事件函数，已其一个来传
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>JS事件绑定</title>
<script type="text/javascript">
window.onload=function(){
var k=document.getElementById('k').onclick=function(event){
var jj=document.getElementById('jj');
jj.style.top=event.clientX+'px';
jj.style.left=event.clientY+'px';
}
}
</script>
<style>
#k{width:60px;height:80px; background-color:#80ffff;}
#jj{width:60px ;height:80px;background-color:#ffff00;z-index:1000;position:absolute;}
</style>
</head>
<body>
<div id="k"></div>
<div id="jj"></div>
</body>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助。
相关文章
这篇文章主要跟大家介绍了关于Javascript中mouseup事件丢失的原因与解决办法的相关资料，文中给出详细的示例代码供大家参考学习，需要的朋友们下面跟着小编一起来学习学习吧。2017-06-06
这篇文章主要介绍了浅谈js数组splice删除某个元素爬坑，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-10-10
字符串拼接是所有程序设计语言都需要的操作。当拼接结果较长时，如何保证效率就成为一个很重要的问题。本文介绍的是Javascript中的字符串拼接，希望对你有帮助，一起来看。2014-09-09
如果一个值是引用类型的，那么它的存储空间将从堆中分配。由于引用值的大小会改变，所以不能把它放在栈中，否则会降低变量查寻的速度。相反，放在变量的栈空间中的值是该对象存储在堆中的地址，这篇文章主要介绍了JS原始值和引用值 ,需要的朋友可以参考下2021-12-12
如果需要在程序中获取当前用户的IP,通常手段都是需要使用服务器,但现在借助WebRTC的强大功能,我们可以直接在浏览器客户端获取用户IP,所以本文小编将给大家介绍一下如何在在浏览器中使用WebRTC获取用户IP地址,文中通过代码示例讲解的非常详细,需要的朋友可以参考下2023-11-11
这篇文章主要介绍了JS基于面向对象实现的多个倒计时器功能,结合实例形式分析了javascript面向对象及时间操作相关技巧,需要的朋友可以参考下2017-02-02
这篇文章主要为大家详细介绍了小程序如何页面多级来回切换支持滑动和点击操作，文中的实现步骤讲解详细，快跟随小编一起动手尝试一下吧2022-07-07
本文主要介绍了javaScript的基础知识，具有很好的参考价值，下面跟着小编一起来看下吧2017-01-01
最近开发一个有关手机端拼图游戏，是基于js实现的。今天小编抽时间把具体实现代码分享到脚本之家平台供大家参考，对js移动端拼图游戏感兴趣的朋友参考下吧2016-09-09
Promise是异步编程的一种解决方案,比传统的解决方案——回调函数和事件——更合理和更强大,下面这篇文章主要给大家介绍了关于ES6中promise详解及用法的相关资料,需要的朋友可以参考下2022-11-11
最新评论