转换学开发,代码100天——2018-05-06

今天学习JavaScript的绑定事件。因为浏览器的原因绑定事件需要考虑兼容性问题。

attachEvent     IE浏览器 ,ie9以上事件执行顺序与绑定顺序相同;ie9以下事件执行顺序与绑定顺序相反

btn.attachEvent("onclick",function(){
   alert("a");
});

detachEvent

btn.detachEvernt("onclick",function(){
   alert("a");
});

addEventListener FF及chrome浏览器

btn.addEventListener("click",function(){
     alert("a");
});

removeEventListener

btn.renoveEventListener("onclick",function(){
   alert("a");
});

如对一个按钮添加多个事件:

<script type="text/javascript">
window.onload = function(){
var btn = document.getElementById("btn");
addMyEvent(btn,"click",function()
{
alert("a");
});
addMyEvent(btn,"click",function()
{
alert("b");
});
} function addMyEvent(obj,ev,fn){
if (obj.attachEvent) {
obj.attachEvent("on"+ev,fn);
}
else{
obj.addEventListener(ev,fn);
}
}
</script>

补充:将上一篇文章中的拖拽事件改成线框拖拽效果

按下鼠标,拖动物体时:

松开鼠标后:

<!DOCTYPE html>
<html>
<head>
<title>javascript 拖拽</title>
<style type="text/css">
#div1{
width: 100px;
height: 100px;
background: red;
position: absolute;
}
.Box{
border: 1px dashed black;
position: absolute;
}
</style> <script type="text/javascript">
window.onload = function(){
var oDiv = document.getElementById("div1");
var disX =0;
var disY =0;
oDiv.onmousedown = function(ev){
//创建虚线框
var oBox = document.createElement("div");
oBox.className = "Box";
oBox.style.width = oDiv.offsetWidth+"px";
oBox.style.height = oDiv.offsetHeight+"px";
oBox.style.left = oDiv.offsetLeft+"px";
oBox.style.top = oDiv.offsetTop+"px";
document.body.appendChild(oBox); var oEvent = ev||event;
disX = oEvent.clientX-oDiv.offsetLeft;
disY = oEvent.clientY-oDiv.offsetTop;
if (oDiv.setCapture) {
//鼠标移动事件
oDiv.onmousemove = mouseMove;
oDiv.onmouseup = mouseUp;
oDiv.setCapture();//ie专用
return false;
}else{
//鼠标移动
document.onmousemove =mouseMove;
document.onmouseup = mouseUp;
return false;
}
//鼠标按下事件
function mouseMove(ev){
var oEvent = ev||event;
var l = oEvent.clientX-disX;
var t = oEvent.clientY-disY;
oBox.style.left = l+"px";
oBox.style.top = t+"px";
};
//鼠标抬起事件
function mouseUp()
{
this.onmousemove = null;
this.onmouseup = null;
if (this.setCapture)
{
this.releaseCapture();//ie专用
}
oDiv.style.left = oBox.offsetLeft+"px";
oDiv.style.top = oBox.offsetTop+"px";
document.body.removeChild(oBox);
};
};
}
</script>

</head>
<body>
<div id="div1"></div>
</body>
</html>

day51—JavaScript绑定事件的更多相关文章

  1. JavaScript绑定事件的方法[3种]

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

  2. Javascript绑定事件的两种方式的区别

    命名函数 <input type="button" onclick="check()" id="btn"/> <scrip ...

  3. javascript绑定事件

    本质:不同的库或者工具中总是封装了不同的事件绑定形式,但是究其根源,还是IE事件模型和W3C事件模型不同的处理方式 1)W3C事件模型:支持事件捕捉和冒泡 addEventListener('type ...

  4. javascript绑定事件addEventListener与attachEvent

    1.eleObj.addEventListener(eventName,handle,useCapture); eleObj:DOM元素: eventName:事件名称.注意,这里的事件名称没有“ o ...

  5. JavaScript 绑定事件时传递数据

    var data = { name: 'Ruchee', email: 'my@ruchee.com' }; data.handleEvent = function (e) { console.log ...

  6. javaScript绑定事件委托 demo

    事件绑定通常发生在 onload 或 DOMContentReady , 事件绑定占用 处理时间 占用内存, 而且不是每个事件都会被 点击执行. 由此 事件委托 可以优化事件绑定行为.. 事件逐层冒泡 ...

  7. JavaScript中事件绑定的方法总结

    最近收集了一些关于JavaScript绑定事件的方法,汇总了一下,不全面,但是,希望便于以后自己查看. JavaScript中绑定事件的方法主要有三种: 1 在DOM元素中直接绑定 2 JavaScr ...

  8. JavaScript中绑定事件监听函数的通用方法addEvent() 和 事件绑定之bindEvent()与 unBindEvent()函数

    下面绑定事件的代码,进行了兼容性处理,能够被所有浏览器支持: function addEvent(obj,type,handle){ try{ // Chrome.FireFox.Opera.Safa ...

  9. javascript对象事件绑定方法

    javascript对象事件绑定方法 今天在做对象事件绑定的过程中出现了一点异外情况,由于事件方法是由参数传过来的,需要将当前对象call过去,方便方法体里直接调用this 错误写法 obj.oncl ...

随机推荐

  1. 搜索专题: HDU1258Sum It Up

    Sum It Up Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) Total ...

  2. 关系型数据库为什么喜欢使用B+树作为索引结构? (转)

    问题1. 数据库为什么要设计索引? 图书馆存了1000W本图书,要从中找到<架构师之路>,一本本查,要查到什么时候去? 于是,图书管理员设计了一套规则: (1)一楼放历史类,二楼放文学类, ...

  3. Vue:Elementui中的Tag与页面其它元素相互交互的两三事

    前言 公司系统在用elementui做后台开发,不免遇到一些需要自己去根据原有的功能上,加一些交互的功能.今天来介绍下我在用elementUi里的Tag标签与多选框交互的过程,东西听上去很简单,但就是 ...

  4. ThinkPHP5 支付宝支付扩展库(超级简单,超级好用!)

    ThinkPHP5 支付宝支付扩展库, 一个静态方法的调用就可以实现,包括手机网站支付.电脑网站支付.支付查询.退款.退款查询.对账单所有功能,而且是2017年7月20日最新版~我的想法是,调用一个静 ...

  5. windows套接字阻塞模式编程实例

    一.阻塞模式套接字服务端和客户端的运行流程如下: 1.1 服务器运行过程如下: 1.服务器启动后,等待客户端的连接请求.2.当收到客户端的请求后,在界面上显示该客户端的IP地址和端口,以及“Hello ...

  6. 前端为什么要学习 Selenium

    如果你正在阅读本文,那么可能希望从手动测试升级为自动化测试.你是对的,因为你需要学习 Selenium.我这样说是因为自动化测试已经风靡全球,而且业界正很缺少 Selenium 认证专家. 你可能还想 ...

  7. mysql的innodb 引擎 表锁与行锁

    innodb 引擎 行锁与表锁 行锁与表锁是基于索引来说的(且索引要生效) 不带索引 (表锁)要全表扫描 1. 执行select @@autocommit; 查看结果 0是不自动提交事务,1是自动提交 ...

  8. 使用Tensorflow搭建回归预测模型之一:环境安装

    方法1:快速包安装 一.安装Anaconda 1.官网地址:https://www.anaconda.com/distribution/,选择其中一个版本下载即可,最好安装3.7版本,因为2.7版本2 ...

  9. L3-002 特殊堆栈 (30 分)

    大家都知道“堆栈”是一种“先进后出”的线性结构,基本操作有“入栈”(将新元素插入栈顶)和“出栈”(将栈顶元素的值返回并从堆栈中将其删除).现请你实现一种特殊的堆栈,它多了一种操作叫“查中值”,即返回堆 ...

  10. 1129. Recommendation System (25)

    Recommendation system predicts the preference that a user would give to an item. Now you are asked t ...